Fix auto-complete and auto-focus for login v2 theme

Closes #32830

Signed-off-by: Alexander Schwartz <aschwart@redhat.com>

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

@@ -49,7 +49,7 @@
                             <div class="${properties.kcInputWrapperClass!}">
                                 <div class="${properties.kcInputGroup!}" dir="ltr">
                                     <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
-                                           name="password-confirm"
+                                           name="password-confirm" autocomplete="new-password"
                                            aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
                                     />
                                     <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"

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

@@ -41,24 +41,24 @@
   </#if>
 </#macro>
 
-<#macro input name label value="" required=false autocomplete="off" fieldName=name>
+<#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>
     <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
-        <input id="${name}" name="${name}" value="${value}" type="text" autocomplete="${autocomplete}"
+        <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>
 </#macro>
 
-<#macro password name label value="" required=false forgotPassword=false fieldName=name>
+<#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>
     <div class="${properties.kcInputGroup}">
       <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
         <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
-          <input id="${name}" name="${name}" value="${value}" type="password" autocomplete="off"
+          <input id="${name}" name="${name}" value="${value}" type="password" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if>
                   aria-invalid="<#if error?has_content>true</#if>"/>
           <@errorIcon error=error/>
         </span>

themes/src/main/resources/theme/keycloak.v2/login/login-otp.ftl

@@ -27,7 +27,7 @@
                 </div>
             </#if>
 
-            <@field.input name="otp" label=msg("loginOtpOneTime") autocomplete="one-time-code" fieldName="totp" />
+            <@field.input name="otp" label=msg("loginOtpOneTime") autocomplete="one-time-code" fieldName="totp" autofocus=true />
 
             <@buttons.loginButton />
         </form>

themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl

@@ -9,7 +9,7 @@
         <div id="kc-form">
             <div id="kc-form-wrapper">
                 <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
-                    <@field.password name="password" label=msg("password")/>
+                    <@field.password name="password" label=msg("password") autofocus=true autocomplete="current-password" />
 
                     <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                         <div id="kc-form-options">

themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.ftl

@@ -7,7 +7,7 @@
         ${msg("auth-recovery-code-header")}
     <#elseif section = "form">
         <form id="kc-recovery-code-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
-            <@field.input name="recoveryCodeInput" label=msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c) />
+            <@field.input name="recoveryCodeInput" label=msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c) autofocus=true />
 
             <@buttons.loginButton />
         </form>

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

@@ -9,7 +9,7 @@
             <#assign label>
                 <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
             </#assign>
-            <@field.input name="username" label=label value=auth.attemptedUsername!''/>
+            <@field.input name="username" label=label value=auth.attemptedUsername!'' autofocus=true />
 
             <@buttons.actionGroup>
               <@buttons.button id="kc-form-buttons" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>

themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl

@@ -8,8 +8,8 @@
         ${msg("updatePasswordTitle")}
     <#elseif section = "form">
         <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post" novalidate="novalidate">
-            <@field.password name="password-new" label=msg("passwordNew") fieldName="password" />
+            <@field.password name="password-new" label=msg("passwordNew") fieldName="password" autocomplete="new-password" autofocus=true />
-            <@field.password name="password-confirm" label=msg("passwordConfirm") />
+            <@field.password name="password-confirm" label=msg("passwordConfirm") autocomplete="new-password" />
 
             <div class="${properties.kcFormGroupClass!}">
                 <@passwordCommons.logoutOtherSessions/>

themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl

@@ -17,7 +17,7 @@
                                 <#assign label>
                                     <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
                                 </#assign>
-                                <@field.input name="username" label=label value=login.username!'' />
+                                <@field.input name="username" label=label value=login.username!'' autofocus=true autocomplete="username" />
 
                                 <#if messagesPerField.existsError('username')>
                                     <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">

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

@@ -15,10 +15,10 @@
                         <#assign label>
                             <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
                         </#assign>
-                        <@field.input name="username" label=label value=login.username!'' />
+                        <@field.input name="username" label=label autofocus=true autocomplete="username" value=login.username!'' />
                     </#if>
 
-                    <@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed/>
+                    <@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password" />
 
                     <div class="${properties.kcFormGroupClass!}">
                         <#if realm.rememberMe && !usernameHidden??>

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

@@ -18,8 +18,8 @@
                 <#if callback = "afterField">
                 <#-- render password fields just under the username or email (if used as username) -->
                     <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))>
-                        <@field.password name="password" label=msg("password") />
+                        <@field.password name="password" label=msg("password") autocomplete="new-password" />
-                        <@field.password name="password-confirm" label=msg("passwordConfirm") />
+                        <@field.password name="password-confirm" label=msg("passwordConfirm") autocomplete="new-password" />
                     </#if>
                 </#if>
             </@userProfileCommons.userProfileFormFields>