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

Closes #32830

Signed-off-by: Alexander Schwartz <aschwart@redhat.com>
This commit is contained in:
Alexander Schwartz 2024-09-11 19:41:05 +02:00 committed by Alexander Schwartz
parent c6ebd235cd
commit 1ec23bd5a8
10 changed files with 16 additions and 16 deletions

View file

@ -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')}"

View file

@ -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>

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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"]/>

View file

@ -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-confirm" label=msg("passwordConfirm") />
<@field.password name="password-new" label=msg("passwordNew") fieldName="password" autocomplete="new-password" autofocus=true />
<@field.password name="password-confirm" label=msg("passwordConfirm") autocomplete="new-password" />
<div class="${properties.kcFormGroupClass!}">
<@passwordCommons.logoutOtherSessions/>

View file

@ -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">

View file

@ -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??>

View file

@ -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-confirm" label=msg("passwordConfirm") />
<@field.password name="password" label=msg("password") autocomplete="new-password" />
<@field.password name="password-confirm" label=msg("passwordConfirm") autocomplete="new-password" />
</#if>
</#if>
</@userProfileCommons.userProfileFormFields>