From 333f1fb7ee5e7c42fc3617c84597d617588bf4c0 Mon Sep 17 00:00:00 2001
From: Hynek Mlnarik <hmlnarik@redhat.com>
Date: Fri, 21 Jun 2024 13:51:39 +0200
Subject: [PATCH] Fix Keycloak.v2 login theme

This fixes the findings from #30319.

The tests are not updated and are run on legacy keycloak theme.
The new login theme is kept disabled, since otherwise it would
be treated as default and used by tests which is said to be
unacceptable due to test duration.

Fixes: #29009

Signed-off-by: Hynek Mlnarik <hmlnarik@redhat.com>
---
 .../keycloak.v2/login/login-config-totp.ftl   |  2 +-
 .../login/login-update-password.ftl           |  2 +-
 .../theme/keycloak.v2/login/login.ftl         | 10 +++--
 .../theme/keycloak.v2/login/register.ftl      |  2 +-
 .../login/resources/css/styles.css            | 42 +++++++++++++++++++
 .../theme/keycloak.v2/login/template.ftl      | 25 +++++------
 .../theme/keycloak.v2/login/theme.properties  |  2 +
 .../login/user-profile-commons.ftl            | 20 ++++++---
 8 files changed, 78 insertions(+), 27 deletions(-)

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 d6a0ccc4bf..4c02586166 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
@@ -50,7 +50,7 @@
             </li>
         </ol>
 
-        <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post">
+        <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post" novalidate="novalidate">
             <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelClass!}">
                     <label class="pf-v5-c-form__label" for="form-vertical-name">
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 40cc7a082c..4dc8cd1448 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
@@ -4,7 +4,7 @@
     <#if section = "header">
         ${msg("updatePasswordTitle")}
     <#elseif section = "form">
-        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post" novalidate="novalidate">
             <div class="${properties.kcFormGroupClass!}">
                 <label for="password-new" class="${properties.kcLabelClass!}">
                     <span class="pf-v5-c-form__label-text">
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 7a839c7649..208a8883a8 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl
@@ -6,7 +6,7 @@
         <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">
+                <form id="kc-form-login" class="${properties.kcFormClass!} onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post" novalidate="novalidate">
                     <#if !usernameHidden??>
                         <div class="${properties.kcFormGroupClass!}">
                             <label for="username" class="${properties.kcLabelClass!}">
@@ -180,9 +180,11 @@
                                             </svg>
                                             <#break>
                                         <#default>
-                                            <svg viewBox="0 0 512 512" aria-hidden="true">
-                                                <path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"/>
-                                            </svg>
+                                            <span class="${p.iconClasses!}" aria-hidden="true">
+                                                <svg viewBox="0 0 512 512" aria-hidden="true">
+                                                    <path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"/>
+                                                </svg>
+                                            </span>
                                     </#switch>
                                 <#else>
                                     <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
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 7eb02e40ab..a1916868fb 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl
@@ -9,7 +9,7 @@
             ${msg("registerTitle")}
         </#if>
     <#elseif section = "form">
-        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
+        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post" novalidate="novalidate">
 
             <@userProfileCommons.userProfileFormFields; callback, attribute>
                 <#if callback = "afterField">
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 aa0880b287..9e816fcf7d 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
@@ -27,3 +27,45 @@ div.kc-logo-text {
 div.kc-logo-text span {
     display: none;
 }
+
+.kc-login-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.kc-login-tooltip .kc-tooltip-text{
+    top:-3px;
+    left:160%;
+    background-color: black;
+    visibility: hidden;
+    color: #fff;
+
+    min-width:130px;
+    text-align: center;
+    border-radius: 2px;
+    box-shadow:0 1px 8px rgba(0,0,0,0.6);
+    padding: 5px;
+
+    position: absolute;
+    opacity:0;
+    transition:opacity 0.5s;
+}
+
+/* Show tooltip */
+.kc-login-tooltip:hover .kc-tooltip-text {
+    visibility: visible;
+    opacity:0.7;
+}
+
+/* Arrow for tooltip */
+.kc-login-tooltip .kc-tooltip-text::after {
+    content: " ";
+    position: absolute;
+    top: 15px;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent black transparent transparent;
+}
+
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 2c38409bbc..e8326b3db4 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -27,7 +27,8 @@
     <script type="importmap">
         {
             "imports": {
-                "alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js"
+                "alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js",
+                "rfc4648": "${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js"
             }
         }
     </script>
@@ -41,17 +42,13 @@
             <script src="${script}" type="text/javascript"></script>
         </#list>
     </#if>
-    <#if authenticationSession??>
-        <script type="module">
-            import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
+    <script type="module">
+        import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
 
-            checkCookiesAndSetTimer(
-              "${authenticationSession.authSessionId}",
-              "${authenticationSession.tabId}",
-              "${url.ssoLoginInOtherTabsUrl}"
-            );
-        </script>
-    </#if>
+        checkCookiesAndSetTimer(
+            "${url.ssoLoginInOtherTabsUrl?no_esc}"
+        );
+    </script>
 </head>
 
 <body id="keycloak-bg" class="${properties.kcBodyClass!}">
@@ -87,7 +84,7 @@
   <div class="pf-v5-c-login__container">
     <main class="pf-v5-c-login__main">
       <header class="pf-v5-c-login__main-header">
-        <h1 class="pf-v5-c-title pf-m-3xl"><#nested "header"></h1>
+        <h1 class="pf-v5-c-title pf-m-3xl" id="kc-page-title"><#nested "header"></h1>
         <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
         <div class="pf-v5-c-login__main-header-utilities">
           <div class="pf-v5-c-form-control">
@@ -179,14 +176,14 @@
                     <#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
                     <#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
                 </div>
-                    <span class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</span>
+                    <span class="${properties.kcAlertTitleClass!} kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
             </div>
         </#if>
 
         <#nested "form">
 
         <#if auth?has_content && auth.showTryAnotherWayLink()>
-          <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
+          <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" novalidate="novalidate">
               <div class="${properties.kcFormGroupClass!}">
                   <input type="hidden" name="tryAnotherWay" value="on"/>
                   <a href="#" id="try-another-way"
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 072b527463..4e69c0b95e 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -25,3 +25,5 @@ kcLogoIdP-linkedin-openid-connect=fa fa-linkedin
 kcLoginClass=pf-v5-c-login__main
 kcFormClass=pf-v5-c-form
 kcFormCardClass=card-pf
+
+kcResetFlowIcon=pf-icon fas fa-share-square
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl
index 67c5b98176..99cd4b9549 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl
@@ -35,10 +35,18 @@
 		</#if>
 
 		<#nested "beforeField" attribute>
-		<div class="${properties.kcFormGroupClass!}" x-data="{
+		<div class="${properties.kcFormGroupClass!}" 
+		  <#if attribute.multivalued && attribute.values?has_content>
+		  x-data="{
+				values: [${(attribute.values?map(s -> s!''?js_string)?map(s -> '{ value: \'' + s + '\'}')?join(", ")!'')}],
+				kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
+			}"
+		<#else>
+		  x-data="{
 				values: [{ value: '${(attribute.value!'')}' }],
 				kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
 			}"
+			</#if>
 		>
 			<label for="${attribute.name}" class="${properties.kcLabelClass!}">
 				<span class="pf-v5-c-form__label-text">
@@ -70,7 +78,7 @@
 					<button
 						class="pf-v5-c-button pf-m-control"
 						type="button"
-						:id="$id('add-name-${attribute.name}')"
+						:id="$id('kc-remove-${attribute.name}')"
 						x-bind:disabled="index == 0 && values.length == 1"
 						x-on:click="values.splice(index, 1); $dispatch('bind')"
 					>
@@ -79,7 +87,7 @@
 				</div>
 			</div>
 			</template>
-			<button type="button" class="pf-v5-c-button pf-m-link" x-show="kcMultivalued" x-on:click="values.push({ value: '' }); $dispatch('bind')">
+			<button type="button" class="pf-v5-c-button pf-m-link" x-show="kcMultivalued" x-on:click="values.push({ value: '' }); $dispatch('bind')" id="kc-add-${attribute.name}">
 				<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg>
 				Add ${advancedMsg(attribute.displayName!'')}
 			</button>
@@ -106,12 +114,12 @@
 		<@inputTagSelects attribute=attribute/>
 		<#break>
 	<#default>
-		<@inputTag attribute=attribute/>
+		<@inputTag attribute=attribute value=attribute.value!/>
 	</#switch>
 </#macro>
 
-<#macro inputTag attribute>
-	<input type="<@inputTagType attribute=attribute/>" :id="$id('name-${attribute.name}')" name="${attribute.name}" class="${properties.kcInputClass!}"
+<#macro inputTag attribute value>
+	<input type="<@inputTagType attribute=attribute/>" :id="kcMultivalued ? $id('${attribute.name}') : '${attribute.name}'" name="${attribute.name}" :value="item.value" class="${properties.kcInputClass!}"
 		aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
 		<#if attribute.readOnly>disabled</#if>
 		<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>