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:
parent
c6ebd235cd
commit
1ec23bd5a8
10 changed files with 16 additions and 16 deletions
|
@ -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')}"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"]/>
|
||||
|
|
|
@ -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/>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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??>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue