Keycloak theme adjustments

InseeFrLab · Jun 13, 2024 · 30df072 · 30df072
1 parent 3959ff8
commit 30df072
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 39 deletions.
diff --git a/web/src/keycloak-theme/login/UserProfileFormFields.tsx b/web/src/keycloak-theme/login/UserProfileFormFields.tsx
@@ -421,38 +421,72 @@ function CustomInputTag(
                 </>
             }
             helperText={(() => {
-                {
-                    const nonEmailPatternDisplayableErrors =
-                        displayableErrors_props.filter(
-                            ({ source }) =>
-                                !(
-                                    source.type === "validator" &&
-                                    source.name === "pattern" &&
-                                    attribute.name === "email"
-                                )
-                        );
+                allowed_email_domains: {
+                    if (attribute.name !== "email") {
+                        break allowed_email_domains;
+                    }
 
-                    if (nonEmailPatternDisplayableErrors.length !== 0) {
-                        return nonEmailPatternDisplayableErrors.map(
-                            ({ errorMessage }, i) => (
-                                <span key={i}>{errorMessage}&nbsp;</span>
-                            )
-                        );
+                    if (attribute.validators.pattern === undefined) {
+                        break allowed_email_domains;
                     }
+
+                    const isErrored = displayableErrors_props.length !== 0;
+                    const hasPatternError = displayableErrors_props.some(
+                        ({ source }) =>
+                            source.type === "validator" && source.name === "pattern"
+                    );
+                    const hasCustomPatternErrorMessage =
+                        attribute.validators.pattern["error-message"] !== undefined;
+
+                    if (isErrored && (!hasPatternError || hasCustomPatternErrorMessage)) {
+                        break allowed_email_domains;
+                    }
+
+                    return msg("allowed email domains");
                 }
 
-                {
-                    // prettier-ignore
-                    const { pattern } = attribute.validators;
+                username_pattern_message: {
+                    if (attribute.name !== "username") {
+                        break username_pattern_message;
+                    }
+
+                    const isErrored = displayableErrors_props.length !== 0;
+
+                    if (isErrored) {
+                        break username_pattern_message;
+                    }
+
+                    if (attribute.validators.pattern === undefined) {
+                        break username_pattern_message;
+                    }
+
+                    const patternErrorMessage =
+                        attribute.validators.pattern["error-message"];
+
+                    if (patternErrorMessage === undefined) {
+                        break username_pattern_message;
+                    }
 
-                    if (pattern !== undefined) {
-                        const { "error-message": errorMessageKey } = pattern;
+                    return advancedMsg(patternErrorMessage);
+                }
 
-                        // prettier-ignore
-                        return errorMessageKey !== undefined ?
-                            advancedMsg(errorMessageKey) :
-                            msg("must respect the pattern");
+                error_messages_default_behavior: {
+                    const isErrored = displayableErrors_props.length !== 0;
+
+                    if (!isErrored) {
+                        break error_messages_default_behavior;
                     }
+
+                    return (
+                        <>
+                            {displayableErrors_props.map(({ errorMessage }, i, arr) => (
+                                <Fragment key={i}>
+                                    <span key={i}>{errorMessage}</span>
+                                    {arr.length - 1 !== i && <br />}
+                                </Fragment>
+                            ))}
+                        </>
+                    );
                 }
 
                 return undefined;
@@ -461,22 +495,24 @@ function CustomInputTag(
             questionMarkHelperText={(() => {
                 const { pattern } = attribute.validators.pattern ?? {};
 
-                // prettier-ignore
-                return pattern === undefined ?
-                    undefined :
-                    attribute.name === "email" ?
-                        (() => {
+                if (pattern === undefined) {
+                    return undefined;
+                }
 
-                            try {
-                                return regExpStrToEmailDomains(pattern).join(", ");
-                            } catch {
-                                return pattern;
-                            }
+                if (attribute.name === "email") {
+
+                    try {
+                        return regExpStrToEmailDomains(pattern).join(", ");
+                    } catch {
+                        return pattern;
+                    }
+
+                }
+
+                return displayableErrors_props.length === 0 ?
+                    pattern :
+                    undefined;
 
-                        })() :
-                        displayableErrors_props.length === 0 ?
-                            pattern :
-                            undefined;
             })()}
             doOnlyShowErrorAfterFirstFocusLost={false}
             // prettier-ignore

diff --git a/web/src/keycloak-theme/login/getKcContextMock.tsx b/web/src/keycloak-theme/login/getKcContextMock.tsx
@@ -54,6 +54,9 @@ export const { getKcContextMock } = createGetKcContextMock({
                         "name": "email"
                     }
                 }
+            },
+            "passwordPolicies": {
+                "length": 12
             }
         }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,6 +54,9 @@ export const { getKcContextMock } = createGetKcContextMock({ @@
                             "name": "email"
                         }
                     }
+                },
+                "passwordPolicies": {
+                    "length": 12
                 }
             }
         }
@@ Expand Down @@