[KEYCLOAK-12426] Add username to the login form + ability to reset login

themes/src/main/resources/theme/base/login/login-reset-password.ftl

@@ -9,10 +9,13 @@
                     <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus/>
+                    <#if auth?has_content && auth.showUsername()>
+                        <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus value="${auth.attemptedUsername}"/>
+                    <#else>
+                        <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus/>
+                    </#if>
                 </div>
             </div>
-
             <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                 <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
                     <div class="${properties.kcFormOptionsWrapperClass!}">

themes/src/main/resources/theme/base/login/messages/messages_en.properties

@@ -83,6 +83,8 @@ offlineAccessScopeConsentText=Offline Access
 samlRoleListScopeConsentText=My Roles
 rolesScopeConsentText=User roles
 
+restartLoginTooltip=Restart login
+
 loginTotpIntro=You need to set up a One Time Password generator to access this account
 loginTotpStep1=Install one of the following applications on your mobile
 loginTotpStep2=Open the application and scan the barcode

themes/src/main/resources/theme/base/login/select-authenticator.ftl

@@ -1,6 +1,6 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout displayInfo=true; section>
-    <#if section = "header">
+    <#if section = "header" || section = "show-username">
         <script type="text/javascript">
             // Fill up the two hidden and submit the form
             function fillAndSubmit() {

themes/src/main/resources/theme/base/login/template.ftl

@@ -52,11 +52,30 @@
                 </div>
             </div>
         </#if>
-        <h1 id="kc-page-title"><#nested "header"></h1>
+          <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+              <h1 id="kc-page-title"><#nested "header"></h1>
+          <#else>
+              <#nested "show-username">
+          </#if>
       </header>
       <div id="kc-content">
         <div id="kc-content-wrapper">
 
+            <#if auth?has_content && auth.showUsername() && !auth.showResetCredentials()>
+                <div class="${properties.kcFormGroupClass!}">
+                    <div id="kc-username">
+                        <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+                        <a id="reset-login" href="${url.loginRestartFlowUrl}">
+                            <div class="kc-login-tooltip">
+                                <i class="${properties.kcResetFlowIcon!}"></i>
+                                <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <hr/>
+            </#if>
+
           <#-- App-initiated actions should not see warning messages about the need to complete the action -->
           <#-- during login.                                                                               -->
           <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
@@ -69,16 +88,6 @@
               </div>
           </#if>
 
-            <#if auth?has_content && auth.showUsername() >
-                <div class="${properties.kcFormGroupClass!}">
-                    <label id="attempted-username">${auth.attemptedUsername}</label>
-                    <a href="${url.loginRestartFlowUrl}" id="reset-login">Reset Login</a>
-                </div>
-
-                <hr />
-
-            </#if>
-
           <#nested "form">
 
           <#if auth?has_content && auth.showTryAnotherWayLink() >

themes/src/main/resources/theme/keycloak/login/resources/css/login.css

@@ -116,6 +116,17 @@ div.kc-logo-text span {
     width: 100%;
 }
 
+#kc-attempted-username{
+    font-size: 20px;
+    font-family:inherit;
+    font-weight: normal;
+    padding-right:10px;
+}
+
+#kc-username{
+    text-align: center;
+}
+
 /* #kc-content-wrapper {
     overflow-y: hidden;
 } */
@@ -216,6 +227,47 @@ ul#kc-totp-supported-apps {
     margin-top: 0;
 }
 
+.kc-login-tooltip{
+    position:relative;
+    display: inline-block;
+}
+
+.kc-login-tooltip .kc-tooltip-text{
+    top:-3px;
+    left:160%;
+    background-color: black;
+    visibility: hidden;
+    color: #fff;
+
+    min-width:130px;
+    text-align: center;
+    border-radius: 2px;
+    box-shadow:0 1px 8px rgba(0,0,0,0.6);
+    padding: 5px;
+
+    position: absolute;
+    opacity:0;
+    transition:opacity 0.5s;
+}
+
+/* Show tooltip */
+.kc-login-tooltip:hover .kc-tooltip-text {
+    visibility: visible;
+    opacity:0.7;
+}
+
+/* Arrow for tooltip */
+.kc-login-tooltip .kc-tooltip-text::after {
+    content: " ";
+    position: absolute;
+    top: 15px;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent black transparent transparent;
+}
+
 .zocial,
 a.zocial  {
     width: 100%;

themes/src/main/resources/theme/keycloak/login/theme.properties

@@ -35,6 +35,7 @@ kcFeedbackWarningIcon=pficon pficon-warning-triangle-o
 kcFeedbackSuccessIcon=pficon pficon-ok
 kcFeedbackInfoIcon=pficon pficon-info
 
+kcResetFlowIcon=pficon pficon-arrow fa-2x
 
 kcFormClass=form-horizontal
 kcFormGroupClass=form-group