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>

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"
+<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__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>

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
+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

themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl

@@ -35,62 +35,25 @@
 		</#if>
 
 		<#nested "beforeField" attribute>
-		<div class="${properties.kcFormGroupClass!}" 
+		<div class="${properties.kcFormGroupClass!}">
-		  <#if attribute.multivalued && attribute.values?has_content>
+			<div class="${properties.kcLabelWrapperClass!}">
-		  x-data="{
+				<label for="${attribute.name}" class="${properties.kcLabelClass!}">${advancedMsg(attribute.displayName!'')}</label>
-				values: [${(attribute.values?map(s -> s!''?js_string)?map(s -> '{ value: \'' + s + '\'}')?join(", ")!'')}],
+				<#if attribute.required>*</#if>
-				kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
+			</div>
-			}"
+			<div class="${properties.kcInputWrapperClass!}">
-		<#else>
+				<#if attribute.annotations.inputHelperTextBefore??>
-		  x-data="{
+					<div class="${properties.kcInputHelperTextBeforeClass!}" id="form-help-text-before-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextBefore))?no_esc}</div>
-				values: [{ value: '${(attribute.value!'')}' }],
+				</#if>
-				kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
+				<@inputFieldByType attribute=attribute/>
-			}"
+				<#if messagesPerField.existsError('${attribute.name}')>
-			</#if>
+					<span id="input-error-${attribute.name}" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-		>
+						${kcSanitize(messagesPerField.get('${attribute.name}'))?no_esc}
-			<label for="${attribute.name}" class="${properties.kcLabelClass!}">
+					</span>
-				<span class="pf-v5-c-form__label-text">
+				</#if>
-					${advancedMsg(attribute.displayName!'')}
+				<#if attribute.annotations.inputHelperTextAfter??>
-					<#if attribute.required>
+					<div class="${properties.kcInputHelperTextAfterClass!}" id="form-help-text-after-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextAfter))?no_esc}</div>
-						<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span>
+				</#if>
-					</#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>
-			</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>