From 0242eb9cda15d122d9bb7acae6f2df60396217ac Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 3 Sep 2024 20:12:33 +0200
Subject: [PATCH] styling for username form added class to form tag (#32511)

fixes: #32510

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../theme/keycloak.v2/login/buttons.ftl       | 16 +++++
 .../keycloak.v2/login/login-username.ftl      | 69 +++++++++++++++++++
 .../theme/keycloak.v2/login/login.ftl         |  7 +-
 .../theme/keycloak.v2/login/theme.properties  |  2 +
 4 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
 create mode 100755 themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl

diff --git a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
new file mode 100644
index 0000000000..764bdc8f50
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
@@ -0,0 +1,16 @@
+<#macro actionGroup>
+  <div class="${properties.kcFormGroupClass}">
+    <div class="${properties.kcFormActionGroupClass}">
+      <#nested>
+    </div>
+</#macro>
+
+<#macro button id name label class="kcButtonPrimaryClass">
+  <button class="${properties[class]}" name="${name}" id="${id}" type="submit">${msg(label)}</button>
+</#macro>
+
+<#macro loginButton>
+  <@buttons.actionGroup>
+    <@buttons.button id="kc-login" name="login" label="doLogIn"/>
+  </@buttons.actionGroup>
+</#macro>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
new file mode 100755
index 0000000000..73202e8432
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
@@ -0,0 +1,69 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
+    <#if section = "header">
+        ${msg("loginAccountTitle")}
+    <#elseif section = "form">
+        <div id="kc-form">
+            <div id="kc-form-wrapper">
+                <#if realm.password>
+                    <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
+                          method="post">
+                        <#if !usernameHidden??>
+                            <div class="${properties.kcFormGroupClass!}">
+                                <#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!'')}" />
+
+                                <#if messagesPerField.existsError('username')>
+                                    <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                        ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                                    </span>
+                                </#if>
+                            </div>
+                        </#if>
+
+                        <div class="${properties.kcFormGroupClass!}">
+                            <#if realm.rememberMe && !usernameHidden??>
+                                <@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
+                            </#if>
+                        </div>
+
+                        <@buttons.loginButton />
+                    </form>
+                </#if>
+            </div>
+        </div>
+
+    <#elseif section = "info" >
+        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration">
+                <span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+            </div>
+        </#if>
+    <#elseif section = "socialProviders" >
+        <#if realm.password && social?? && social.providers?has_content>
+            <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                <hr/>
+                <h4>${msg("identity-provider-login-label")}</h4>
+
+                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+                    <#list social.providers as p>
+                        <a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
+                                type="button" href="${p.loginUrl}">
+                            <#if p.iconClasses?has_content>
+                                <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
+                                <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
+                            <#else>
+                                <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
+                            </#if>
+                        </a>
+                    </#list>
+                </ul>
+            </div>
+        </#if>
+    </#if>
+
+</@layout.registrationLayout>
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 e6c105dc04..1731654475 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
@@ -1,5 +1,6 @@
 <#import "template.ftl" as layout>
 <#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
     <#if section = "header">
         ${msg("loginAccountTitle")}
@@ -23,10 +24,8 @@
                         </#if>
                     </div>
 
-                    <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
-                        <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
-                        <input tabindex="4" class="pf-v5-c-button pf-m-primary pf-m-block" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
-                    </div>
+                    <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
+                    <@buttons.loginButton />
                 </form>
             </#if>
             </div>
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 1f86e1ca9a..a1f4d3ff0f 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -34,6 +34,7 @@ kcAlertTitleClass=pf-v5-c-alert__title
 kcAlertDescriptionClass=pf-v5-c-alert__description
 kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
 kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
+kcFormActionGroupClass=pf-v5-c-form__actions
 
 kcPanelClass=pf-v5-c-panel pf-m-raised
 kcPanelMainClass=pf-v5-c-panel__main
@@ -41,6 +42,7 @@ kcPanelMainBodyClass=pf-v5-c-panel__main-body
 kcListClass=pf-v5-c-list
 
 kcButtonClass=pf-v5-c-button
+kcButtonPrimaryClass=pf-v5-c-button pf-m-primary pf-m-block
 kcButtonLinkClass=pf-v5-c-button pf-m-link
 kcCommonLogoIdP=pf-v5-c-login__main-footer-links-item
 kcFormSocialAccountListClass=pf-v5-c-login__main-footer-links