Standardize error messages from client and server in login theme (keycloak.v2) (#34141)
Closes #34137 Signed-off-by: SebastEnn <103125747+SebastEnn@users.noreply.github.com>
This commit is contained in:
parent
f3af54e69d
commit
e3936a9b38
2 changed files with 32 additions and 31 deletions
|
@ -1,33 +1,32 @@
|
|||
<#macro group name label error="" required=false>
|
||||
|
||||
<div class="${properties.kcFormGroupClass}">
|
||||
<div class="${properties.kcFormGroupLabelClass}">
|
||||
<label for="${name}" class="${properties.kcFormGroupLabelClass}">
|
||||
<div class="${properties.kcFormGroupLabelClass}">
|
||||
<label for="${name}" class="${properties.kcFormGroupLabelClass}">
|
||||
<span class="${properties.kcFormGroupLabelTextClass}">
|
||||
${label}
|
||||
${label}
|
||||
</span>
|
||||
<#if required>
|
||||
<span class="${properties.kcInputRequiredClass}" aria-hidden="true">*</span>
|
||||
</#if>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<#nested>
|
||||
|
||||
<div id="input-error-client-${name}"></div>
|
||||
<#if error?has_content>
|
||||
<div class="${properties.kcFormHelperTextClass}" aria-live="polite">
|
||||
<div class="${properties.kcInputHelperTextClass}">
|
||||
<div
|
||||
class="${properties.kcInputHelperTextItemClass} ${properties.kcError}"
|
||||
id="input-error-${name}">
|
||||
<span class="${properties.kcInputErrorMessageClass}">
|
||||
${error}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<#if required>
|
||||
<span class="${properties.kcInputRequiredClass}" aria-hidden="true">*</span>
|
||||
</#if>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<#nested>
|
||||
|
||||
<div id="input-error-container-${name}">
|
||||
<#if error?has_content>
|
||||
<div class="${properties.kcFormHelperTextClass}" aria-live="polite">
|
||||
<div class="${properties.kcInputHelperTextClass}">
|
||||
<div class="${properties.kcInputHelperTextItemClass} ${properties.kcError}" id="input-error-${name}">
|
||||
<span class="${properties.kcInputErrorMessageClass}">
|
||||
${error}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
</#macro>
|
||||
|
|
|
@ -73,14 +73,16 @@
|
|||
].filter(p => p.policy.value !== -1);
|
||||
|
||||
document.getElementById("password").addEventListener("change", (event) => {
|
||||
const serverErrors = document.getElementById("input-error-password");
|
||||
if (serverErrors) {
|
||||
serverErrors.remove();
|
||||
|
||||
const errorContainer = document.getElementById("input-error-container-password");
|
||||
const template = document.querySelector("#errorTemplate").content.cloneNode(true);
|
||||
const errors = validatePassword(event.target.value, activePolicies);
|
||||
|
||||
if (errors.length === 0) {
|
||||
errorContainer.replaceChildren();
|
||||
return;
|
||||
}
|
||||
|
||||
const template = document.querySelector("#errorTemplate").content.cloneNode(true);
|
||||
|
||||
const errors = validatePassword(event.target.value, activePolicies);
|
||||
const errorList = template.querySelector("ul");
|
||||
const htmlErrors = errors.forEach((e) => {
|
||||
const row = document.querySelector("#errorItemTemplate").content.cloneNode(true);
|
||||
|
@ -88,7 +90,7 @@
|
|||
li.textContent = e;
|
||||
errorList.appendChild(li);
|
||||
});
|
||||
document.getElementById("input-error-client-password").replaceChildren(template);
|
||||
errorContainer.replaceChildren(template);
|
||||
});
|
||||
</script>
|
||||
</#if>
|
||||
|
|
Loading…
Reference in a new issue