libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

removed use of alpine.js due to tests

Browse source 
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>
This commit is contained in:
Erik Jan de Wit 2024-07-17 10:19:53 +02:00 committed by Hynek Mlnařík
parent dbfc633877
commit cdc99f82ea
3 changed files with 31 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
themes/src/main/resources/theme/keycloak.v2/login/template.ftl
View file

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

5
themes/src/main/resources/theme/keycloak.v2/login/theme.properties
View file

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

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

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