upstream/keycloak
1
0
Fork 0
mirror of https://github.com/keycloak/keycloak.git synced 2026-05-28 04:13:22 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Unify buttons in horizontal layout for Login UI

Browse source 
Closes #49372

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
This commit is contained in:
Martin Bartoš 2026-05-27 23:51:02 +02:00 committed by GitHub
parent 0c4a4714c6
commit 16fc31dfee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 33 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/documentation/release_notes/topics/26_7_0.adoc
View file

@ -27,6 +27,10 @@ When a user wants to authenticate with Passkeys, {project_name} shows the authen
As part of this change, the passkey authentication page in the login theme and the signing-in page in the account console were updated.
If you use a custom theme that overrides these pages, verify that your customizations work as expected with this release.
== Unified button layout in login theme
Action buttons across login theme pages now use a consistent horizontal layout. If you use a custom theme that overrides these pages, verify that your customizations work as expected with this release.
== Realm search now matches by display name
When searching for realms in the admin console, the search now also matches against the realm's display name in addition to the realm name.

8
themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
View file

@ -6,19 +6,19 @@
</div>
</#macro>
<#macro button label id="" name="" class=["kcButtonPrimaryClass"] extra...>
<button class="<#list class as c>${properties[c]} </#list>" name="${name}" id="${id}"
<#macro button label id="" name="" type="primary" fullWidth=true class=[] extra...>
<button class="${properties['kcButton' + type?cap_first + 'Class']}<#if fullWidth> ${properties.kcButtonBlockClass}</#if><#list class as c> ${properties[c]}</#list>" name="${name}" id="${id}"
type="submit" <#list extra as attrName, attrVal>${attrName}="${attrVal}"</#list>>
${msg(label)}
</button>
</#macro>
<#macro buttonLink href label id="" class=["kcButtonSecondaryClass"]>
<#macro buttonLink href label id="" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]>
<a id="${id}" href="${href}" class="<#list class as c>${properties[c]} </#list>">${msg(label)}</a>
</#macro>
<#macro loginButton>
<@buttons.actionGroup>
<@buttons.button id="kc-login" name="login" label="doLogIn" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
<@buttons.button id="kc-login" name="login" label="doLogIn" />
</@buttons.actionGroup>
</#macro>

4
themes/src/main/resources/theme/keycloak.v2/login/delete-account-confirm.ftl
View file

@ -29,9 +29,9 @@
<p class="delete-account-text">${msg("finalDeletionConfirmation")}</p>
<@buttons.actionGroup>
<@buttons.button id="kc-submit" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
<@buttons.button id="kc-submit" label="doConfirmDelete"/>
<#if triggered_from_aia>
<@buttons.button id="kc-cancel" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass"]/>
<@buttons.button id="kc-cancel" name="cancel-aia" label="doCancel" type="secondary"/>
</#if>
</@buttons.actionGroup>
</form>

6
themes/src/main/resources/theme/keycloak.v2/login/delete-credential.ftl
View file

@ -12,9 +12,9 @@
</div>
<form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
<@buttons.actionGroup>
<@buttons.button name="accept" id="kc-accept" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
<@buttons.button name="cancel-aia" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
<@buttons.actionGroup horizontal=true>
<@buttons.button name="accept" id="kc-accept" label="doConfirmDelete"/>
<@buttons.button name="cancel-aia" id="kc-decline" label="doDecline" type="secondary"/>
</@buttons.actionGroup>
</form>
</#if>

6
themes/src/main/resources/theme/keycloak.v2/login/link-idp-action.ftl
View file

@ -12,9 +12,9 @@
</div>
<form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
<@buttons.actionGroup>
<@buttons.button name="continue" id="kc-continue" label="doContinue" class=["kcButtonPrimaryClass"]/>
<@buttons.button name="cancel-aia" id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass"]/>
<@buttons.actionGroup horizontal=true>
<@buttons.button name="continue" id="kc-continue" label="doContinue"/>
<@buttons.button name="cancel-aia" id="kc-cancel" label="doCancel" type="secondary"/>
</@buttons.actionGroup>
</form>
</#if>

4
themes/src/main/resources/theme/keycloak.v2/login/login-oauth-grant.ftl
View file

@ -49,9 +49,9 @@
<form class="${properties.kcFormClass} ${properties.kcMarginTopClass!}" action="${url.oauthAction}" method="POST">
<input type="hidden" name="code" value="${oauth.code}">
<@buttons.actionGroup>
<@buttons.actionGroup horizontal=true>
<@buttons.button id="kc-login" name="accept" label="doYes"/>
<@buttons.button id="kc-cancel" name="cancel" label="doNo" class=["kcButtonSecondaryClass"]/>
<@buttons.button id="kc-cancel" name="cancel" label="doNo" type="secondary"/>
</@buttons.actionGroup>
</form>
</div>

2
themes/src/main/resources/theme/keycloak.v2/login/login-oauth2-device-verify-user-code.ftl
View file

@ -10,7 +10,7 @@
<@field.input name="device_user_code" label=msg("verifyOAuth2DeviceUserCode") autofocus=true />
<@buttons.actionGroup>
<@buttons.button id="kc-login" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
<@buttons.button id="kc-login" label="doSubmit" />
</@buttons.actionGroup>
</form>
</#if>

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

@ -12,8 +12,8 @@
<@field.input name="username" label=label value=auth.attemptedUsername!'' autofocus=true />
<@buttons.actionGroup>
<@buttons.button id="kc-form-buttons" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
<@buttons.buttonLink href=url.loginUrl label="backToLogin" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]/>
<@buttons.button id="kc-form-buttons" label="doSubmit"/>
<@buttons.buttonLink href=url.loginUrl label="backToLogin"/>
</@buttons.actionGroup>
</form>

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

@ -18,10 +18,10 @@
<@buttons.actionGroup horizontal=true>
<#if isAppInitiatedAction??>
<@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass"]/>
<@buttons.button id="kc-cancel" label="doCancel" name="cancel-aia" class=["kcButtonSecondaryClass"]/>
<@buttons.button id="kc-submit" name="login" label="doSubmit"/>
<@buttons.button id="kc-cancel" label="doCancel" name="cancel-aia" type="secondary"/>
<#else>
<@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
<@buttons.button id="kc-submit" name="login" label="doSubmit"/>
</#if>
</@buttons.actionGroup>
</form>

4
themes/src/main/resources/theme/keycloak.v2/login/terms.ftl
View file

@ -12,8 +12,8 @@
</div>
<form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
<@buttons.actionGroup horizontal=true>
<@buttons.button name="accept" id="kc-accept" label="doAccept" class=["kcButtonPrimaryClass"]/>
<@buttons.button name="cancel" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
<@buttons.button name="accept" id="kc-accept" label="doAccept"/>
<@buttons.button name="cancel" id="kc-decline" label="doDecline" type="secondary"/>
</@buttons.actionGroup>
</form>
<div class="clearfix"></div>

4
themes/src/main/resources/theme/keycloak.v2/login/update-email.ftl
View file

@ -18,9 +18,9 @@
<@passwordCommons.logoutOtherSessions/>
<@buttons.actionGroup horizontal=true>
<@buttons.button id="kc-submit" label="doSubmit" class=["kcButtonPrimaryClass","kcButtonBlockClass"]/>
<@buttons.button id="kc-submit" label="doSubmit"/>
<#if isAppInitiatedAction??>
<@buttons.button id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"] name="cancel-aia" value="true"/>
<@buttons.button id="kc-cancel" label="doCancel" type="secondary" name="cancel-aia" value="true"/>
</#if>
</@buttons.actionGroup>
</div>

2
themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
View file

@ -117,7 +117,7 @@
</#if>
<@buttons.actionGroup>
<@buttons.button id="authenticateWebAuthnButton" label="webauthn-doAuthenticate" class=["kcButtonPrimaryClass","kcButtonBlockClass"] autofocus="autofocus"/>
<@buttons.button id="authenticateWebAuthnButton" label="webauthn-doAuthenticate" autofocus="autofocus"/>
</@buttons.actionGroup>
</div>
<script type="module">

4
themes/src/main/resources/theme/keycloak.v2/login/webauthn-error.ftl
View file

@ -21,12 +21,12 @@
<input type="hidden" id="isSetRetry" name="isSetRetry"/>
<@buttons.actionGroup horizontal=true>
<@buttons.button id="kc-try-again" name="try-again" label="doTryAgain" class=["kcButtonPrimaryClass","kcButtonBlockClass"] onclick="refreshPage()" />
<@buttons.button id="kc-try-again" name="try-again" label="doTryAgain" onclick="refreshPage()" />
<#if isAppInitiatedAction??>
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-webauthn-settings-form"
method="post">
<@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"]/>
<@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" type="secondary"/>
</form>
</#if>
</@buttons.actionGroup>

4
themes/src/main/resources/theme/keycloak.v2/login/webauthn-register.ftl
View file

@ -49,11 +49,11 @@
</script>
<@buttons.actionGroup horizontal=true>
<@buttons.button id="registerWebAuthn" label="doRegisterSecurityKey" class=["kcButtonPrimaryClass","kcButtonBlockClass"]/>
<@buttons.button id="registerWebAuthn" label="doRegisterSecurityKey"/>
<#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
<form class="${properties.kcFormClass!}" action="${url.loginAction}"
id="kc-webauthn-settings-form" method="post">
<@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"]/>
<@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" type="secondary"/>
</form>
</#if>
</@buttons.actionGroup>