You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
10 KiB
228 lines
10 KiB
<#macro userProfileFormFields>
|
|
<#assign currentGroup="">
|
|
|
|
<#list profile.attributes as attribute>
|
|
|
|
<#assign group = (attribute.group)!"">
|
|
<#if group != currentGroup>
|
|
<#assign currentGroup=group>
|
|
<#if currentGroup != "">
|
|
<div class="${properties.kcFormGroupClass!}"
|
|
<#list group.html5DataAnnotations as key, value>
|
|
data-${key}="${value}"
|
|
</#list>
|
|
>
|
|
|
|
<#assign groupDisplayHeader=group.displayHeader!"">
|
|
<#if groupDisplayHeader != "">
|
|
<#assign groupHeaderText=advancedMsg(groupDisplayHeader)!group>
|
|
<#else>
|
|
<#assign groupHeaderText=group.name!"">
|
|
</#if>
|
|
<div class="${properties.kcContentWrapperClass!}">
|
|
<label id="header-${attribute.group.name}" class="${kcFormGroupHeader!}">${groupHeaderText}</label>
|
|
</div>
|
|
|
|
<#assign groupDisplayDescription=group.displayDescription!"">
|
|
<#if groupDisplayDescription != "">
|
|
<#assign groupDescriptionText=advancedMsg(groupDisplayDescription)!"">
|
|
<div class="${properties.kcLabelWrapperClass!}">
|
|
<label id="description-${group.name}" class="${properties.kcLabelClass!}">${groupDescriptionText}</label>
|
|
</div>
|
|
</#if>
|
|
</div>
|
|
</#if>
|
|
</#if>
|
|
|
|
<#nested "beforeField" attribute>
|
|
<div class="${properties.kcFormGroupClass!}" x-data="{
|
|
values: [{ value: '${(attribute.value!'')}' }],
|
|
kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
|
|
}"
|
|
>
|
|
<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">*</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('add-name-${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')">
|
|
<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>
|
|
|
|
<#list profile.html5DataAnnotations?keys as key>
|
|
<script type="module" src="${url.resourcesPath}/js/${key}.js"></script>
|
|
</#list>
|
|
</#macro>
|
|
|
|
<#macro inputFieldByType attribute>
|
|
<#switch attribute.annotations.inputType!''>
|
|
<#case 'textarea'>
|
|
<@textareaTag attribute=attribute/>
|
|
<#break>
|
|
<#case 'select'>
|
|
<#case 'multiselect'>
|
|
<@selectTag attribute=attribute/>
|
|
<#break>
|
|
<#case 'select-radiobuttons'>
|
|
<#case 'multiselect-checkboxes'>
|
|
<@inputTagSelects attribute=attribute/>
|
|
<#break>
|
|
<#default>
|
|
<@inputTag attribute=attribute/>
|
|
</#switch>
|
|
</#macro>
|
|
|
|
<#macro inputTag attribute>
|
|
<input type="<@inputTagType attribute=attribute/>" :id="$id('name-${attribute.name}')" name="${attribute.name}" class="${properties.kcInputClass!}"
|
|
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
|
|
<#if attribute.readOnly>disabled</#if>
|
|
<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>
|
|
<#if attribute.annotations.inputTypePlaceholder??>placeholder="${advancedMsg(attribute.annotations.inputTypePlaceholder)}"</#if>
|
|
<#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}"</#if>
|
|
<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
|
|
<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>
|
|
<#if attribute.annotations.inputTypeMinlength??>minlength="${attribute.annotations.inputTypeMinlength}"</#if>
|
|
<#if attribute.annotations.inputTypeMax??>max="${attribute.annotations.inputTypeMax}"</#if>
|
|
<#if attribute.annotations.inputTypeMin??>min="${attribute.annotations.inputTypeMin}"</#if>
|
|
<#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}"</#if>
|
|
<#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}"</#if>
|
|
<#list attribute.html5DataAnnotations as key, value>
|
|
data-${key}="${value}"
|
|
</#list>
|
|
/>
|
|
</#macro>
|
|
|
|
<#macro inputTagType attribute>
|
|
<#compress>
|
|
<#if attribute.annotations.inputType??>
|
|
<#if attribute.annotations.inputType?starts_with("html5-")>
|
|
${attribute.annotations.inputType[6..]}
|
|
<#else>
|
|
${attribute.annotations.inputType}
|
|
</#if>
|
|
<#else>
|
|
text
|
|
</#if>
|
|
</#compress>
|
|
</#macro>
|
|
|
|
<#macro textareaTag attribute>
|
|
<textarea id="${attribute.name}" name="${attribute.name}" class="${properties.kcInputClass!}"
|
|
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
|
|
<#if attribute.readOnly>disabled</#if>
|
|
<#if attribute.annotations.inputTypeCols??>cols="${attribute.annotations.inputTypeCols}"</#if>
|
|
<#if attribute.annotations.inputTypeRows??>rows="${attribute.annotations.inputTypeRows}"</#if>
|
|
<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>
|
|
>${(attribute.value!'')}</textarea>
|
|
</#macro>
|
|
|
|
<#macro selectTag attribute>
|
|
<select id="${attribute.name}" name="${attribute.name}" class="${properties.kcInputClass!}"
|
|
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
|
|
<#if attribute.readOnly>disabled</#if>
|
|
<#if attribute.annotations.inputType=='multiselect'>multiple</#if>
|
|
<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
|
|
>
|
|
<#if attribute.annotations.inputType=='select'>
|
|
<option value=""></option>
|
|
</#if>
|
|
|
|
<#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??>
|
|
<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
|
|
<#elseif attribute.validators.options?? && attribute.validators.options.options??>
|
|
<#assign options=attribute.validators.options.options>
|
|
<#else>
|
|
<#assign options=[]>
|
|
</#if>
|
|
|
|
<#list options as option>
|
|
<option value="${option}" <#if attribute.values?seq_contains(option)>selected</#if>><@selectOptionLabelText attribute=attribute option=option/></option>
|
|
</#list>
|
|
</select>
|
|
</#macro>
|
|
|
|
<#macro inputTagSelects attribute>
|
|
<#if attribute.annotations.inputType=='select-radiobuttons'>
|
|
<#assign inputType='radio'>
|
|
<#assign classDiv=properties.kcInputClassRadio!>
|
|
<#assign classInput=properties.kcInputClassRadioInput!>
|
|
<#assign classLabel=properties.kcInputClassRadioLabel!>
|
|
<#else>
|
|
<#assign inputType='checkbox'>
|
|
<#assign classDiv=properties.kcInputClassCheckbox!>
|
|
<#assign classInput=properties.kcInputClassCheckboxInput!>
|
|
<#assign classLabel=properties.kcInputClassCheckboxLabel!>
|
|
</#if>
|
|
|
|
<#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??>
|
|
<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
|
|
<#elseif attribute.validators.options?? && attribute.validators.options.options??>
|
|
<#assign options=attribute.validators.options.options>
|
|
<#else>
|
|
<#assign options=[]>
|
|
</#if>
|
|
|
|
<#list options as option>
|
|
<div class="${classDiv}">
|
|
<input type="${inputType}" id="${attribute.name}-${option}" name="${attribute.name}" value="${option}" class="${classInput}"
|
|
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
|
|
<#if attribute.readOnly>disabled</#if>
|
|
<#if attribute.values?seq_contains(option)>checked</#if>
|
|
/>
|
|
<label for="${attribute.name}-${option}" class="${classLabel}<#if attribute.readOnly> ${properties.kcInputClassRadioCheckboxLabelDisabled!}</#if>"><@selectOptionLabelText attribute=attribute option=option/></label>
|
|
</div>
|
|
</#list>
|
|
</#macro>
|
|
|
|
<#macro selectOptionLabelText attribute option>
|
|
<#compress>
|
|
<#if attribute.annotations.inputOptionLabels??>
|
|
${advancedMsg(attribute.annotations.inputOptionLabels[option]!option)}
|
|
<#else>
|
|
<#if attribute.annotations.inputOptionLabelsI18nPrefix??>
|
|
${msg(attribute.annotations.inputOptionLabelsI18nPrefix + '.' + option)}
|
|
<#else>
|
|
${option}
|
|
</#if>
|
|
</#if>
|
|
</#compress>
|
|
</#macro>
|