libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
themes/src/main/resources/theme/base/login/register.ftl
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')}"

8
themes/src/main/resources/theme/keycloak.v2/login/field.ftl
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>

2
themes/src/main/resources/theme/keycloak.v2/login/login-otp.ftl
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>

2
themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl
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">

2
themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.ftl
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>

2
themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl
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"]/>

4
themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
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/>

2
themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
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">

4
themes/src/main/resources/theme/keycloak.v2/login/login.ftl
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??>

4
themes/src/main/resources/theme/keycloak.v2/login/register.ftl
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>