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

Improved credential select form accessibility

Browse source 
Closes #24412

Signed-off-by: Paul Van Uytvinck <paul.van.uytvinck@cern.ch>
Co-authored-by: vanuytvp <paul.vanuytvinck@cern.ch>
This commit is contained in:
Paul-Van-Uytvinck 2023-12-08 17:42:47 +01:00 committed by GitHub
parent 99d197b309
commit a02967e5dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
themes/src/main/resources/theme/base/login/select-authenticator.ftl
View file

@ -1,12 +1,6 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=false; section> <@layout.registrationLayout displayInfo=false; section>
<#if section = "header" || section = "show-username"> <#if section = "header" || section = "show-username">
<script type="text/javascript">
function fillAndSubmit(authExecId) {
document.getElementById('authexec-hidden-input').value = authExecId;
document.getElementById('kc-select-credential-form').submit();
}
</script>
<#if section = "header"> <#if section = "header">
${msg("loginChooseAuthenticator")} ${msg("loginChooseAuthenticator")}
</#if> </#if>
@ -15,7 +9,7 @@
<form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post"> <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<div class="${properties.kcSelectAuthListClass!}"> <div class="${properties.kcSelectAuthListClass!}">
<#list auth.authenticationSelections as authenticationSelection> <#list auth.authenticationSelections as authenticationSelection>
<div class="${properties.kcSelectAuthListItemClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')"> <button class="${properties.kcSelectAuthListItemClass!}" type="submit" name="authenticationExecution" value="${authenticationSelection.authExecId}">
<div class="${properties.kcSelectAuthListItemIconClass!}"> <div class="${properties.kcSelectAuthListItemIconClass!}">
<i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i> <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
@ -32,9 +26,8 @@
<div class="${properties.kcSelectAuthListItemArrowClass!}"> <div class="${properties.kcSelectAuthListItemArrowClass!}">
<i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i> <i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i>
</div> </div>
</div> </button>
</#list> </#list>
<input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />
</div> </div>
</form> </form>

6
themes/src/main/resources/theme/keycloak/login/resources/css/login.css
View file

@ -465,6 +465,12 @@ ul#kc-totp-supported-apps {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
cursor: pointer; cursor: pointer;
text-align: left;
align-items: unset;
background-color: unset;
border-right: unset;
border-bottom: unset;
border-left: unset;
} }
.select-auth-box-parent:hover{ .select-auth-box-parent:hover{