From cdc99f82ea331b35e5129663de7e213a8089c8da Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 17 Jul 2024 10:19:53 +0200
Subject: [PATCH] removed use of alpine.js due to tests

fixed merge error

removed alpinejs value

made selectors a bit less specific on the dom structure

updated reason for more detail and an even better check

copy paste

more copy and paste

more copy paste

reveted handling of multi valued fields

oops

Co-authored-by: Hynek Mlnarik <hmlnarik@redhat.com>
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../theme/keycloak.v2/login/template.ftl      | 31 +------
 .../theme/keycloak.v2/login/theme.properties  |  5 +-
 .../login/user-profile-commons.ftl            | 83 ++++++-------------
 3 files changed, 31 insertions(+), 88 deletions(-)

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 e8326b3db4a..ddfc4b7e002 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,6 @@
     <script type="importmap">
         {
             "imports": {
-                "alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js",
                 "rfc4648": "${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js"
             }
         }
@@ -57,30 +56,7 @@
              class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
     </div>
 </div>
-<div class="pf-v5-c-login"
-    x-data="{
-        open: false,
-        toggle() {
-            if (this.open) {
-                return this.close()
-            }
-
-            this.$refs.button.focus()
-
-            this.open = true
-        },
-        close(focusAfter) {
-            if (! this.open) return
-
-            this.open = false
-
-            focusAfter && focusAfter.focus()
-        }
-    }"
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
-    x-on:focusin.window="! $refs.panel?.contains($event.target) && close()"
-    x-id="['language-select']"
->
+<div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <main class="pf-v5-c-login__main">
       <header class="pf-v5-c-login__main-header">
@@ -206,11 +182,6 @@
     </main>
   </div>
 </div>
-<script type="module">
-    import Alpine from "alpinejs";
-
-    Alpine.start();
-</script>
 </body>
 </html>
 </#macro>
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 4e69c0b95e9..7dc49dc6dc8 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -26,4 +26,7 @@ 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
+kcResetFlowIcon=pf-icon fas fa-share-square
+
+kcSelectAuthListItemClass= pf-v5-c-data-list__item pf-m-clickable select-auth-box-parent
+kcSelectAuthListItemHeadingClass=pf-v5-u-font-family-heading select-auth-box-headline
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 99cd4b95499..6019fac8d7d 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,62 +35,25 @@
 		</#if>
 
 		<#nested "beforeField" attribute>
-		<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">
-					${advancedMsg(attribute.displayName!'')}
-					<#if attribute.required>
-						<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span>
-					</#if>
-				</span>
-			</label>
-			<template x-for="(item, index) in values">
-			<div :class="kcMultivalued ? 'pf-v5-c-input-group' : ''">
-				<div :class="kcMultivalued ? 'pf-v5-c-input-group__item pf-m-fill' : ''">
-					<span class="${properties.kcInputClass!}" >
-						<#if attribute.annotations.inputHelperTextBefore??>
-							<div class="${properties.kcInputHelperTextBeforeClass!}" id="form-help-text-before-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextBefore))?no_esc}</div>
-						</#if>
-							<@inputFieldByType attribute=attribute/>
-						<#if messagesPerField.existsError('${attribute.name}')>
-							<span id="input-error-${attribute.name}" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-								${kcSanitize(messagesPerField.get('${attribute.name}'))?no_esc}
-							</span>
-						</#if>
-						<#if attribute.annotations.inputHelperTextAfter??>
-							<div class="${properties.kcInputHelperTextAfterClass!}" id="form-help-text-after-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextAfter))?no_esc}</div>
-						</#if>
-					</span>
-				</div>
-				<div class="pf-v5-c-input-group__item" x-show="kcMultivalued">
-					<button
-						class="pf-v5-c-button pf-m-control"
-						type="button"
-						:id="$id('kc-remove-${attribute.name}')"
-						x-bind:disabled="index == 0 && values.length == 1"
-						x-on:click="values.splice(index, 1); $dispatch('bind')"
-					>
-						<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 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"></path></svg>
-					</button>
-				</div>
+		<div class="${properties.kcFormGroupClass!}">
+			<div class="${properties.kcLabelWrapperClass!}">
+				<label for="${attribute.name}" class="${properties.kcLabelClass!}">${advancedMsg(attribute.displayName!'')}</label>
+				<#if attribute.required>*</#if>
+			</div>
+			<div class="${properties.kcInputWrapperClass!}">
+				<#if attribute.annotations.inputHelperTextBefore??>
+					<div class="${properties.kcInputHelperTextBeforeClass!}" id="form-help-text-before-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextBefore))?no_esc}</div>
+				</#if>
+				<@inputFieldByType attribute=attribute/>
+				<#if messagesPerField.existsError('${attribute.name}')>
+					<span id="input-error-${attribute.name}" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+						${kcSanitize(messagesPerField.get('${attribute.name}'))?no_esc}
+					</span>
+				</#if>
+				<#if attribute.annotations.inputHelperTextAfter??>
+					<div class="${properties.kcInputHelperTextAfterClass!}" id="form-help-text-after-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextAfter))?no_esc}</div>
+				</#if>
 			</div>
-			</template>
-			<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>
 		</div>
 		<#nested "afterField" attribute>
 	</#list>
@@ -114,12 +77,18 @@
 		<@inputTagSelects attribute=attribute/>
 		<#break>
 	<#default>
-		<@inputTag attribute=attribute value=attribute.value!/>
+		<#if attribute.multivalued && attribute.values?has_content>
+			<#list attribute.values as value>
+				<@inputTag attribute=attribute value=value!''/>
+			</#list>
+		<#else>
+			<@inputTag attribute=attribute value=attribute.value!''/>
+		</#if>
 	</#switch>
 </#macro>
 
 <#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!}"
+	<input type="<@inputTagType attribute=attribute/>" id="${attribute.name}" name="${attribute.name}" value="${(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>