From 927a02ec5da1570101cbc5e6aaeca0bb08f3cc38 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 4 Sep 2024 18:30:34 +0200
Subject: [PATCH] some more ui fixes (#32661)

towards: #32522

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../theme/keycloak.v2/login/buttons.ftl       |  6 ++--
 .../keycloak.v2/login/login-config-totp.ftl   |  1 +
 .../keycloak.v2/login/login-password.ftl      | 31 +++++++++++++++++++
 .../login-recovery-authn-code-config.ftl      |  7 +++--
 .../login/login-recovery-authn-code-input.ftl | 15 +++++++++
 .../login/login-update-password.ftl           |  1 -
 .../keycloak.v2/login/login-username.ftl      |  2 ++
 .../theme/keycloak.v2/login/login.ftl         |  3 +-
 .../theme/keycloak.v2/login/register.ftl      |  3 +-
 .../login/resources/css/styles.css            |  5 +++
 .../login/select-authenticator.ftl            |  2 ++
 .../theme/keycloak.v2/login/template.ftl      |  2 ++
 .../theme/keycloak.v2/login/theme.properties  |  9 +++---
 .../login/webauthn-authenticate.ftl           |  2 ++
 14 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100755 themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl
 create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.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
index 764bdc8f50..f37c8f9105 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
@@ -5,12 +5,12 @@
     </div>
 </#macro>
 
-<#macro button id name label class="kcButtonPrimaryClass">
-  <button class="${properties[class]}" name="${name}" id="${id}" type="submit">${msg(label)}</button>
+<#macro button id name label class=["kcButtonPrimaryClass"]>
+  <button class="<#list class as c>${properties[c]} </#list>" name="${name}" id="${id}" type="submit">${msg(label)}</button>
 </#macro>
 
 <#macro loginButton>
   <@buttons.actionGroup>
-    <@buttons.button id="kc-login" name="login" label="doLogIn"/>
+    <@buttons.button id="kc-login" name="login" label="doLogIn" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
   </@buttons.actionGroup>
 </#macro>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl
index 7a7ad57d14..0a36fa6099 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl
@@ -2,6 +2,7 @@
 <#import "field.ftl" as field>
 <#import "password-commons.ftl" as passwordCommons>
 <@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
+<!-- template: login-config-totp.ftl -->
 
     <#if section = "header">
         ${msg("loginTotpTitle")}
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl
new file mode 100755
index 0000000000..141569e39d
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-password.ftl
@@ -0,0 +1,31 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password'); section>
+<!-- template: login-password.ftl -->
+    <#if section = "header">
+        ${msg("doLogIn")}
+    <#elseif section = "form">
+        <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")/>
+
+                    <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                        <div id="kc-form-options">
+                            <div class="${properties.kcFormOptionsWrapperClass!}">
+                                <#if realm.resetPasswordAllowed>
+                                    <span><a tabindex="5"
+                                             href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
+                                </#if>
+                            </div>
+                        </div>
+                    </div>
+
+                    <@buttons.loginButton />
+                </form>
+            </div>
+        </div>
+    </#if>
+
+</@layout.registrationLayout>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
index 30c9d9a084..f1f6c8cfe5 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
@@ -1,7 +1,7 @@
 <#import "template.ftl" as layout>
 <#import "password-commons.ftl" as passwordCommons>
 <@layout.registrationLayout; section>
-
+<!-- template: login-recovery-authn-code-config.ftl -->
 <#if section = "header">
     ${msg("recovery-code-config-header")}
 <#elseif section = "form">
@@ -81,7 +81,8 @@
         /* copy recovery codes  */
         function copyRecoveryCodes() {
             const tmpTextarea = document.createElement("textarea");
-            document.body.appendChild(parseRecoveryCodeList());
+            tmpTextarea.innerHTML = parseRecoveryCodeList();
+            document.body.appendChild(tmpTextarea);
             tmpTextarea.select();
             document.execCommand("copy");
             document.body.removeChild(tmpTextarea);
@@ -104,7 +105,7 @@
 
         function parseRecoveryCodeList() {
             const recoveryCodes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
-            const recoveryCodeList = "";
+            let recoveryCodeList = "";
 
             for (let i = 0; i < recoveryCodes.length; i++) {
                 const recoveryCodeLiElement = recoveryCodes[i].innerText;
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.ftl
new file mode 100644
index 0000000000..c59d5daab3
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-input.ftl
@@ -0,0 +1,15 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>
+<!-- template: login-recovery-authn-code-input.ftl -->
+    <#if section = "header">
+        ${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) />
+
+            <@buttons.loginButton />
+        </form>
+    </#if>
+</@layout.registrationLayout>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
index 4dc8cd1448..1e43ae2408 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
@@ -75,6 +75,5 @@
                 </div>
             </div>
         </form>
-        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
     </#if>
 </@layout.registrationLayout>
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
index 73202e8432..1325aa85f6 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
@@ -2,6 +2,8 @@
 <#import "field.ftl" as field>
 <#import "buttons.ftl" as buttons>
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
+<!-- template: login-username.ftl -->
+
     <#if section = "header">
         ${msg("loginAccountTitle")}
     <#elseif section = "form">
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 1731654475..a2333306a2 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
@@ -2,6 +2,8 @@
 <#import "field.ftl" as field>
 <#import "buttons.ftl" as buttons>
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
+<!-- template: login.ftl -->
+
     <#if section = "header">
         ${msg("loginAccountTitle")}
     <#elseif section = "form">
@@ -30,7 +32,6 @@
             </#if>
             </div>
         </div>
-        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
     <#elseif section = "info" >
         <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
             <div id="kc-registration-container" class="${properties.kcLoginFooterBand!}">
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 5f243c445f..58156a4626 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
@@ -3,6 +3,8 @@
 <#import "user-profile-commons.ftl" as userProfileCommons>
 <#import "register-commons.ftl" as registerCommons>
 <@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+<!-- template: register.ftl -->
+
     <#if section = "header">
         <#if messageHeader??>
             ${kcSanitize(msg("${messageHeader}"))?no_esc}
@@ -44,6 +46,5 @@
             </div>
 
         </form>
-        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
     </#if>
 </@layout.registrationLayout>
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 0a3d3d6bd6..f0fd9f629c 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
@@ -79,4 +79,9 @@ div.kc-logo-text span {
     white-space: normal;
     color: var(--pf-v5-global--Color--light-100) !important;
     text-align: center;
+}
+
+hr {
+    margin-top: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--md);
 }
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl b/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl
index 4117018ddd..4a29fe9f37 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl
@@ -1,5 +1,7 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout displayInfo=false; section>
+<!-- template: select-authenticator.ftl -->
+
     <#if section = "header" || section = "show-username">
         <#if section = "header">
             ${msg("loginChooseAuthenticator")}
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 97b27ba7e2..818c890979 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -41,6 +41,7 @@
             <script src="${script}" type="text/javascript"></script>
         </#list>
     </#if>
+    <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
     <script type="module">
         import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
 
@@ -142,6 +143,7 @@
                             <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
                         </div>
                     </a>
+                    <hr />
                 </div>
             </#if>
         </#if>
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 e3d8725ffd..6dba6fbd81 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -25,11 +25,11 @@ kcCheckboxLabelClass=pf-v5-c-check__label
 kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required
 
 kcInputRequiredClass=pf-v5-c-form__label-required
-kcInputErrorMessageClass=pf-v5-c-helper-text__item pf-m-error kc-feedback-text
+kcInputErrorMessageClass=pf-v5-c-helper-text__item-text pf-m-error kc-feedback-text
 kcFormControlUtilClass=pf-v5-c-form-control__utilities
 kcInputErrorIconStatusClass=pf-v5-c-form-control__icon pf-m-status
 kcInputErrorIconClass=fas fa-exclamation-circle
-kcAlertClass=pf-v5-c-alert pf-m-inline
+kcAlertClass=pf-v5-c-alert pf-m-inline pf-v5-u-mb-md
 kcAlertIconClass=pf-v5-c-alert__icon
 kcAlertTitleClass=pf-v5-c-alert__title
 kcAlertDescriptionClass=pf-v5-c-alert__description
@@ -43,7 +43,8 @@ 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
+kcButtonPrimaryClass=pf-v5-c-button pf-m-primary
+kcButtonBlockClass=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
@@ -69,7 +70,7 @@ kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select
 
 kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning
 kcLogin=pf-v5-c-login
-kcLoginContent=pf-v5-c-login__container
+kcLoginContainer=pf-v5-c-login__container
 kcLoginMain=pf-v5-c-login__main
 kcLoginMainHeader=pf-v5-c-login__main-header
 kcLoginMainTitle=pf-v5-c-title pf-m-3xl
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
index ae47356373..8fff57389e 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
@@ -1,5 +1,7 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout displayInfo=(realm.registrationAllowed && !registrationDisabled??); section>
+<!-- template: webauthn-autthenticate.ftl -->
+
     <#if section = "title">
      title
     <#elseif section = "header">