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:
SebastEnn 2024-10-22 18:02:23 +02:00 committed by GitHub
parent f3af54e69d
commit e3936a9b38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 31 deletions

View file

@ -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">&#42;</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">&#42;</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>

View file

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