added username field like suggested in issue comment (#32866)

related: #32522

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/LanguageComboboxAwarePage.java

@@ -127,7 +127,7 @@ public abstract class LanguageComboboxAwarePage extends AbstractPage {
     }
 
     public String getAttemptedUsername() {
-        return attemptedUsernameLabel.getText();
+        return attemptedUsernameLabel.getAttribute("value");
     }
 
     public void clickResetLogin() {

themes/src/main/resources/theme/keycloak.v2/login/field.ftl

@@ -2,12 +2,12 @@
 
 <div class="${properties.kcFormGroupClass}">
   <div class="${properties.kcFormGroupLabelClass}">
-    <label for="${name}" class="pf-v5-c-form__label">
+    <label for="${name}" class="${properties.kcFormGroupLabelClass}">
-        <span class="pf-v5-c-form__label-text">
+        <span class="${properties.kcFormGroupLabelTextClass}">
           ${label}
         </span>
         <#if required>
-          <span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span>
+          <span class="${properties.kcInputRequiredClass}" aria-hidden="true">&#42;</span>
         </#if>
     </label>
   </div>
@@ -44,18 +44,18 @@
 
 <#macro input name label value="" required=false autocomplete="off" fieldName=name autofocus=false>
   <#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc>
-  <@field.group name=name label=label error=error required=required>
+  <@group name=name label=label error=error required=required>
     <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
         <input id="${name}" name="${name}" value="${value}" type="text" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if>
                 aria-invalid="<#if error?has_content>true</#if>"/>
         <@errorIcon error=error/>
     </span>
-  </@field.group>
+  </@group>
 </#macro>
 
 <#macro password name label value="" required=false forgotPassword=false fieldName=name autocomplete="off" autofocus=false>
   <#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc>
-  <@field.group name=name label=label error=error required=required>
+  <@group name=name label=label error=error required=required>
     <div class="${properties.kcInputGroup}">
       <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
         <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
@@ -65,7 +65,7 @@
         </span>
       </div>
       <div class="${properties.kcInputGroupItemClass}">
-        <button class="pf-v5-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+        <button class="${properties.kcFormPasswordVisibilityButtonClass}" type="button" aria-label="${msg('showPassword')}"
                 aria-controls="${name}" data-password-toggle
                 data-icon-show="fa-eye fas" data-icon-hide="fa-eye-slash fas"
                 data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
@@ -84,7 +84,7 @@
             </div>
         </div>
       </#if>
-  </@field.group>
+  </@group>
 </#macro>
 
 <#macro checkbox name label value=false required=false>

themes/src/main/resources/theme/keycloak.v2/login/template.ftl

@@ -1,3 +1,25 @@
+<#import "field.ftl" as field>
+<#macro username>
+  <#assign label>
+    <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
+  </#assign>
+  <@field.group name="username" label=label>
+    <div class="${properties.kcInputGroup}">
+      <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
+        <span class="${properties.kcInputClass} ${properties.kcFormReadOnlyClass}">
+          <input id="kc-attempted-username" value="${auth.attemptedUsername}" readonly>
+        </span>
+      </div>
+      <div class="${properties.kcInputGroupItemClass}">
+        <button id="reset-login" class="${properties.kcFormPasswordVisibilityButtonClass} kc-login-tooltip" type="button" 
+              aria-label="${msg('restartLoginTooltip')}" onclick="location.href='${url.loginRestartFlowUrl}'">
+            <i class="fa-sync-alt fas" aria-hidden="true"></i>
+            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+        </button>
+      </div>
+    </@field.group>
+</#macro>
+
 <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
 <!DOCTYPE html>
 <html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if>>
@@ -135,30 +157,15 @@
                           <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
                         </span>
                     </div>
-                    <div class="col-md-10">
+                    <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
                         <#nested "show-username">
-                        <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                        <@username />
-                            <label id="kc-attempted-username">${auth.attemptedUsername}</label>
-                            <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg('restartLoginTooltip')}">
-                                <div class="kc-login-tooltip">
-                                    <i class="${properties.kcResetFlowIcon!}"></i>
-                                    <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
-                                </div>
-                            </a>
-                        </div>
                     </div>
                 </div>
             <#else>
+                <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
                   <#nested "show-username">
-                <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                  <@username />
-                    <label id="kc-attempted-username">${auth.attemptedUsername}</label>
-                    <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg('restartLoginTooltip')}">
-                        <div class="kc-login-tooltip">
-                            <i class="${properties.kcResetFlowIcon!}"></i>
-                            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
-                        </div>
-                    </a>
-                    <hr />
                 </div>
             </#if>
         </#if>

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

@@ -36,6 +36,9 @@ kcAlertDescriptionClass=pf-v5-c-alert__description
 kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
 kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
 kcFormActionGroupClass=pf-v5-c-form__actions
+kcFormReadOnlyClass=pf-m-readonly
+kcFormGroupLabelClass=pf-v5-c-form__label
+kcFormGroupLabelTextClass=pf-v5-c-form__label-text
 
 kcPanelClass=pf-v5-c-panel pf-m-raised
 kcPanelMainClass=pf-v5-c-panel__main