From 1b5baaed3c572b0b28e95c048f5f8bde7881faff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Barto=C5=A1?= <mabartos@redhat.com>
Date: Tue, 11 Aug 2026 14:11:54 +0200
Subject: [PATCH] [Login] Unify top-bottom padding, login-welcome themes,
 register button, subtitles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unify padding and spacing across login and welcome themes
- Unify registration button with login button macros
- Show client identity on the login page

Closes #51619
Closes #51618
Closes #51617

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
---
 .../testframework/ui/page/RegisterPage.java   |  5 +--
 .../testsuite/pages/RegisterPage.java         |  2 +-
 .../login/messages/messages_en.properties     |  1 +
 .../theme/keycloak.v2/login/buttons.ftl       | 20 ++++++++--
 .../theme/keycloak.v2/login/login.ftl         |  4 ++
 .../theme/keycloak.v2/login/register.ftl      | 17 ++++----
 .../login/resources/css/styles.css            | 13 ++++++
 .../theme/keycloak.v2/login/template.ftl      | 40 +++++--------------
 .../theme/keycloak.v2/login/theme.properties  |  7 ++--
 .../theme/keycloak/welcome/index.ftl          |  6 +--
 .../welcome/resources/css/welcome.css         | 22 ++++++++++
 .../theme/keycloak/welcome/theme.properties   |  4 ++
 12 files changed, 90 insertions(+), 51 deletions(-)

diff --git a/test-framework/ui/src/main/java/org/keycloak/testframework/ui/page/RegisterPage.java b/test-framework/ui/src/main/java/org/keycloak/testframework/ui/page/RegisterPage.java
index ea45f5170b8a..3ec3f7d8a5fa 100644
--- a/test-framework/ui/src/main/java/org/keycloak/testframework/ui/page/RegisterPage.java
+++ b/test-framework/ui/src/main/java/org/keycloak/testframework/ui/page/RegisterPage.java
@@ -25,7 +25,6 @@
 
 import org.junit.jupiter.api.Assertions;
 import org.openqa.selenium.By;
-import org.openqa.selenium.Keys;
 import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.support.FindBy;
@@ -59,7 +58,7 @@ public class RegisterPage extends AbstractLoginPage {
     @FindBy(name = "termsAccepted")
     private WebElement termsAcceptedInput;
 
-    @FindBy(css = "input[type=\"submit\"]")
+    @FindBy(css = "[type=\"submit\"]")
     private WebElement submitButton;
 
     @FindBy(linkText = "« Back to Login")
@@ -139,7 +138,7 @@ public void register(String firstName, String lastName, String email, String use
             }
         }
 
-        submitButton.sendKeys(Keys.ENTER);
+        submitButton.click();
     }
 
     public String getFirstName() {
diff --git a/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/RegisterPage.java b/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/RegisterPage.java
index 6e2bd078cd3e..f8ff2d205c72 100644
--- a/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/RegisterPage.java
+++ b/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/RegisterPage.java
@@ -68,7 +68,7 @@ public class RegisterPage extends LanguageComboboxAwarePage
     @FindBy(name = "termsAccepted")
     private WebElement termsAcceptedInput;
 
-    @FindBy(css = "input[type=\"submit\"]")
+    @FindBy(css = "[type=\"submit\"]")
     private WebElement submitButton;
 
     @FindBy(css = "div[class^='pf-v5-c-alert'], div[class^='alert-error']")
diff --git a/themes/src/main/resources/theme/base/login/messages/messages_en.properties b/themes/src/main/resources/theme/base/login/messages/messages_en.properties
index 2a88cfe3551d..2ada5007d8b2 100644
--- a/themes/src/main/resources/theme/base/login/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/base/login/messages/messages_en.properties
@@ -25,6 +25,7 @@ bypassKerberosDetail=Either you are not logged in by Kerberos or your browser is
 kerberosNotSetUp=Kerberos is not set up. You cannot login.
 registerTitle=Register
 loginAccountTitle=Sign in to your account
+loginSubtitle=to continue to <strong>{0}</strong>
 loginTitle=Sign in to {0}
 loginTitleHtml={0}
 impersonateTitle={0} Impersonate User
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
index 2106364d2a4a..53c1fd9d302b 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
@@ -1,3 +1,6 @@
+<#--
+  @param horizontal - if true, buttons are placed on the same row sharing the full width
+-->
 <#macro actionGroup horizontal=false>
   <div class="${properties.kcFormGroupClass}">
     <div class="${properties.kcFormActionGroupClass} <#if horizontal>pf-v5-u-flex-nowrap<#else>pf-v5-u-flex-wrap</#if>">
@@ -6,9 +9,20 @@
   </div>
 </#macro>
 
-<#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>>
+<#--
+  @param label            - message key for the button text
+  @param id               - HTML id attribute
+  @param name             - HTML name attribute
+  @param type             - button style: "primary", "secondary", etc. (resolves to kcButton{Type}Class property)
+  @param fullWidth        - if true, adds the block class for full-width buttons
+  @param class            - list of theme property keys to append (e.g. ["kcButtonLargeClass"])
+  @param extraClass       - list of raw CSS classes to append (e.g. ["g-recaptcha"])
+  @param specialAttributes - hash of arbitrary HTML attributes, supports hyphenated keys (e.g. {"data-sitekey": value})
+  @param extra            - additional simple (non-hyphenated) HTML attributes passed as named parameters
+-->
+<#macro button label id="" name="" type="primary" fullWidth=true class=[] extraClass=[] specialAttributes={} extra...>
+  <button class="${properties['kcButton' + type?cap_first + 'Class']}<#if fullWidth> ${properties.kcButtonBlockClass}</#if><#list class as c> ${properties[c]}</#list><#list extraClass as c> ${c}</#list>" name="${name}" id="${id}"
+          type="submit"<#list extra as attrName, attrVal> ${attrName}="${attrVal}"</#list><#list specialAttributes as key, val> ${key}="${val}"</#list>>
   ${msg(label)}
   </button>
 </#macro>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
index 2a8d729b1c2b..42550887cf57 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
@@ -8,6 +8,10 @@
 
     <#if section = "header">
         ${msg("loginAccountTitle")}
+    <#elseif section = "subheader">
+        <#if client?? && client.name?has_content>
+            ${kcSanitize(msg("loginSubtitle", advancedMsg(client.name)))?no_esc}
+        </#if>
     <#elseif section = "form">
         <div id="kc-form">
           <div id="kc-form-wrapper">
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/register.ftl b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
index 894d738117d6..4ae9d3c6d34d 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
@@ -1,5 +1,6 @@
 <#import "template.ftl" as layout>
 <#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
 <#import "user-profile-commons.ftl" as userProfileCommons>
 <#import "register-commons.ftl" as registerCommons>
 <#import "password-validation.ftl" as validator>
@@ -40,16 +41,14 @@
                         document.getElementById("kc-register-form").requestSubmit();
                     }
                 </script>
-                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!} g-recaptcha"
-                            data-sitekey="${recaptchaSiteKey}" data-callback="onSubmitRecaptcha" data-action="${recaptchaAction}" type="submit" id="kc-submit">
-                        ${msg("doRegister")}
-                    </button>
-                </div>
+                <@buttons.actionGroup>
+                    <@buttons.button id="kc-submit" label="doRegister" extraClass=["g-recaptcha"]
+                        specialAttributes={"data-sitekey": recaptchaSiteKey, "data-callback": "onSubmitRecaptcha", "data-action": recaptchaAction} />
+                </@buttons.actionGroup>
             <#else>
-                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
-                </div>
+                <@buttons.actionGroup>
+                    <@buttons.button id="kc-register" label="doRegister" />
+                </@buttons.actionGroup>
             </#if>
 
             <div class="${properties.kcFormGroupClass!} pf-v5-c-login__main-footer-band">
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
index 93511128dc37..e294e0db5e69 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
+++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
@@ -4,6 +4,7 @@
     --keycloak-logo-height: 63px;
     --keycloak-logo-width: 300px;
     --keycloak-card-top-color: var(--pf-v5-global--palette--blue-400);
+    --keycloak-form-padding: var(--pf-v5-global--spacer--xl);
 }
 
 .pf-v5-c-login__container {
@@ -12,8 +13,20 @@
                          "main"
 }
 
+.gray-text {
+    color: var(--pf-v5-global--Color--200);
+}
+
 .pf-v5-c-login__main-header {
     border-top: 4px solid var(--keycloak-card-top-color);
+    --pf-v5-c-form__label-required--Color: var(--pf-v5-global--danger-color--100);
+    --pf-v5-c-login__main-header--RowGap: 0;
+    --pf-v5-c-login__main-header--PaddingTop: var(--keycloak-form-padding);
+    --pf-v5-c-login__main-header--PaddingBottom: var(--pf-v5-global--gutter--md);
+}
+
+.pf-v5-c-login__main-body {
+    --pf-v5-c-login__main-body--PaddingBottom: var(--keycloak-form-padding);
 }
 
 /* Info section - top margin + bottom padding */
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
index c5c179f9f9e2..a3fc4b4572fa 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -158,6 +158,12 @@
     <main class="${properties.kcLoginMain!}">
       <div class="${properties.kcLoginMainHeader!}">
         <h1 class="${properties.kcLoginMainTitle!}" id="kc-page-title"><#nested "header"></h1>
+        <p class="${properties.kcLoginMainHeaderDesc!}">
+            <#nested "subheader">
+            <#if displayRequiredFields>
+                <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
+            </#if>
+        </p>
         <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
         <div class="${properties.kcLoginMainHeaderUtilities!}">
           <div class="${properties.kcInputClass!}">
@@ -198,35 +204,11 @@
         </#if>
       </div>
       <div class="${properties.kcLoginMainBody!}">
-        <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
-            <#if displayRequiredFields>
-                <div class="${properties.kcContentWrapperClass!}">
-                    <div class="${properties.kcLabelWrapperClass!} subtitle">
-                        <span class="${properties.kcInputHelperTextItemTextClass!}">
-                          <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
-                        </span>
-                    </div>
-                </div>
-            </#if>
-        <#else>
-            <#if displayRequiredFields>
-                <div class="${properties.kcContentWrapperClass!}">
-                    <div class="${properties.kcLabelWrapperClass!} subtitle">
-                        <span class="${properties.kcInputHelperTextItemTextClass!}">
-                          <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
-                        </span>
-                    </div>
-                    <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
-                        <#nested "show-username">
-                        <@username />
-                    </div>
-                </div>
-            <#else>
-                <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
-                  <#nested "show-username">
-                  <@username />
-                </div>
-            </#if>
+        <#if auth?has_content && auth.showUsername() && !auth.showResetCredentials()>
+            <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
+                <#nested "show-username">
+                <@username />
+            </div>
         </#if>
 
         <#-- App-initiated actions should not see warning messages about the need to complete the action -->
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
index 434b3b1f982a..71d8ac93381d 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -82,8 +82,8 @@ kcSelectAuthListItemHeadingClass=pf-v5-u-font-family-heading select-auth-box-hea
 kcSelectAuthListItemBodyClass=pf-v5-c-data-list__cell pf-m-no-fill pf-v5-u-pt-md pf-v5-u-pb-md
 kcSelectAuthListItemIconClass=pf-v5-c-data-list__cell pf-m-icon pf-v5-u-display-flex pf-v5-u-pt-0 pf-v5-u-align-items-center 
 kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
-kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill pf-v5-u-w-100 pf-v5-u-pt-0 pf-v5-u-font-size-sm pf-v5-u-color-200 select-auth-box-desc
-kcSelectAuthListItemSubtitleClass=pf-v5-u-color-200 pf-v5-u-font-size-sm
+kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill pf-v5-u-w-100 pf-v5-u-pt-0 pf-v5-u-font-size-sm gray-text select-auth-box-desc
+kcSelectAuthListItemSubtitleClass=gray-text pf-v5-u-font-size-sm
 kcSelectAuthListItemArrowIconClass=fa fa-angle-right fa-lg
 
 kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning
@@ -94,11 +94,12 @@ kcLoginMainHeader=pf-v5-c-login__main-header
 kcLoginMainFooter=pf-v5-c-login__main-footer
 kcLoginMainFooterBand=pf-v5-c-login__main-footer-band
 kcLoginMainFooterBandItem=pf-v5-c-login__main-footer-band-item
-kcLoginMainFooterHelperText=pf-v5-u-font-size-sm pf-v5-u-color-200
+kcLoginMainFooterHelperText=pf-v5-u-font-size-sm gray-text
 kcLoginDivider=kc-login-divider
 kcLoginQrCode=kc-qr-code pf-v5-u-display-flex pf-v5-u-flex-direction-column pf-v5-u-align-items-center pf-v5-u-my-sm
 kcLoginQrCodeTitle=pf-v5-u-font-weight-bold pf-v5-u-font-size-md pf-v5-u-pt-sm
 kcLoginMainTitle=pf-v5-c-title pf-m-3xl
+kcLoginMainHeaderDesc=pf-v5-c-login__main-header-desc gray-text
 kcLoginMainHeaderUtilities=pf-v5-c-login__main-header-utilities
 kcLoginMainBody=pf-v5-c-login__main-body
 
diff --git a/themes/src/main/resources/theme/keycloak/welcome/index.ftl b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
index 09d94d83d9db..9296d5c77987 100755
--- a/themes/src/main/resources/theme/keycloak/welcome/index.ftl
+++ b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
@@ -62,11 +62,11 @@
               <#if localUser>
                 <h1 class="pf-v5-c-title pf-m-2xl">Create an administrative user</h1>
                 <#if !successMessage?has_content>
-                  <p class="pf-v5-c-login__main-header-desc">To get started with ${productName}, you first create an administrative user.</p>
+                  <p class="${properties.kcLoginMainHeaderDesc!}">To get started with ${productName}, you first create an administrative user.</p>
                 </#if>
               <#else>
                 <h1 class="pf-v5-c-title pf-m-3xl">Local access required</h1>
-                <p class="pf-v5-c-login__main-header-desc">You will need local access to create the administrative user.</p>
+                <p class="${properties.kcLoginMainHeaderDesc!}">You will need local access to create the administrative user.</p>
               </#if>
             </header>
             <div class="pf-v5-c-login__main-body">
@@ -173,7 +173,7 @@
                       </div>
                     </div>
                     <input name="stateChecker" type="hidden" value="${stateChecker}">
-                    <div class="pf-v5-c-form__group pf-m-action">
+                    <div class="${properties.kcFormActionGroupClass!}">
                       <button class="pf-v5-c-button pf-m-primary pf-m-block" type="submit">Create user</button>
                     </div>
                   </form>
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css b/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css
index f218b487a72b..b5fd20141721 100644
--- a/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css
+++ b/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css
@@ -1,3 +1,11 @@
+:root {
+  --keycloak-form-padding: var(--pf-v5-global--spacer--xl);
+}
+
+.gray-text {
+  color: var(--pf-v5-global--Color--200);
+}
+
 .pf-v5-c-background-image {
   /* Change background size so that the image covers the entire background. */
   --pf-v5-c-background-image--BackgroundSize: cover;
@@ -9,6 +17,20 @@
   --pf-v5-c-login__container--xl--GridTemplateColumns: minmax(auto, 34rem);
 }
 
+.pf-v5-c-login__main-header {
+  --pf-v5-c-login__main-header--RowGap: 0;
+  --pf-v5-c-login__main-header--PaddingTop: var(--keycloak-form-padding);
+  --pf-v5-c-login__main-header--PaddingBottom: var(--pf-v5-global--gutter--md);
+}
+
+.pf-v5-c-login__main {
+  --pf-v5-c-login__main-footer--PaddingBottom: var(--keycloak-form-padding);
+}
+
+.pf-v5-c-login__main-body {
+  --pf-v5-c-login__main-body--PaddingBottom: var(--keycloak-form-padding);
+}
+
 .kc-brand {
     height: 63px;
     width: 300px;
diff --git a/themes/src/main/resources/theme/keycloak/welcome/theme.properties b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
index 1a14a5dced51..f26e10b6c439 100644
--- a/themes/src/main/resources/theme/keycloak/welcome/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
@@ -8,3 +8,7 @@ redirectToAdmin=true
 darkMode=true
 
 kcDarkModeClass=pf-v5-theme-dark
+
+# Aligned with the keycloak.v2 login theme
+kcFormActionGroupClass=pf-v5-c-form__actions pf-v5-u-pt-xs
+kcLoginMainHeaderDesc=pf-v5-c-login__main-header-desc gray-text