keycloakify 10.0.0-rc.13 → 10.0.0-rc.130

package/login/lib/useUserProfileForm.js

@@ -12,22 +12,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import "../../tools/Array.prototype.every";
 import { useMemo, useReducer, useEffect, Fragment } from "react";
+import { assert } from "tsafe/assert";
 import { id } from "tsafe/id";
+import { structuredCloneButFunctions } from "../../tools/structuredCloneButFunctions";
 import { useConstCallback } from "../../tools/useConstCallback";
 import { emailRegexp } from "../../tools/emailRegExp";
-import { assert } from "tsafe/assert";
 import { formatNumber } from "../../tools/formatNumber";
-import { createUseInsertScriptTags } from "../../tools/useInsertScriptTags";
-const { useInsertScriptTags } = createUseInsertScriptTags();
+import { useInsertScriptTags } from "../../tools/useInsertScriptTags";
+assert();
 export function useUserProfileForm(params) {
     var _a, _b;
     const { kcContext, i18n, doMakeUserConfirmPassword } = params;
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": Object.keys((_b = (_a = kcContext.profile) === null || _a === void 0 ? void 0 : _a.html5DataAnnotations) !== null && _b !== void 0 ? _b : {})
+        componentOrHookName: "useUserProfileForm",
+        scriptTags: Object.keys((_b = (_a = kcContext.profile) === null || _a === void 0 ? void 0 : _a.html5DataAnnotations) !== null && _b !== void 0 ? _b : {})
             .filter(key => key !== "kcMultivalued" && key !== "kcNumberFormat") // NOTE: Keycloakify handles it.
             .map(key => ({
-            "type": "module",
-            "src": `${kcContext.url.resourcesPath}/js/${key}.js`
+            type: "module",
+            src: `${kcContext.url.resourcesPath}/js/${key}.js`
         }))
     });
     useEffect(() => {
@@ -38,170 +40,214 @@ export function useUserProfileForm(params) {
         i18n
     });
     const initialState = useMemo(() => {
+        var _a, _b;
         // NOTE: We don't use te kcContext.profile.attributes directly because
         // they don't includes the password and password confirm fields and we want to add them.
-        // Also, we want to polyfill the attributes for older Keycloak version before User Profile was introduced.
-        // Finally we want to patch the changes made by Keycloak on the attributes format so we have an homogeneous
-        // attributes format to work with.
-        const syntheticAttributes = (() => {
-            const syntheticAttributes = [];
-            const attributes = (() => {
-                var _a;
-                retrocompat_patch: {
-                    if ("profile" in kcContext && "attributes" in kcContext.profile && kcContext.profile.attributes.length !== 0) {
-                        break retrocompat_patch;
-                    }
-                    if ("register" in kcContext && kcContext.register instanceof Object && "formData" in kcContext.register) {
-                        //NOTE: Handle legacy register.ftl page
-                        return ["firstName", "lastName", "email", "username"]
-                            .filter(name => (name !== "username" ? true : !kcContext.realm.registrationEmailAsUsername))
-                            .map(name => {
-                            var _a;
-                            return id({
-                                "name": name,
-                                "displayName": id(`\${${name}}`),
-                                "required": true,
-                                "value": (_a = kcContext.register.formData[name]) !== null && _a !== void 0 ? _a : "",
-                                "html5DataAnnotations": {},
-                                "readOnly": false,
-                                "validators": {},
-                                "annotations": {},
-                                "autocomplete": (() => {
-                                    switch (name) {
-                                        case "email":
-                                            return "email";
-                                        case "username":
-                                            return "username";
-                                        default:
-                                            return undefined;
-                                    }
-                                })()
-                            });
+        // We also want to apply some retro-compatibility and consistency patches.
+        const attributes = (() => {
+            var _a;
+            mock_user_profile_attributes_for_older_keycloak_versions: {
+                if ("profile" in kcContext &&
+                    "attributesByName" in kcContext.profile &&
+                    Object.keys(kcContext.profile.attributesByName).length !== 0) {
+                    break mock_user_profile_attributes_for_older_keycloak_versions;
+                }
+                if ("register" in kcContext && kcContext.register instanceof Object && "formData" in kcContext.register) {
+                    //NOTE: Handle legacy register.ftl page
+                    return ["firstName", "lastName", "email", "username"]
+                        .filter(name => (name !== "username" ? true : !kcContext.realm.registrationEmailAsUsername))
+                        .map(name => {
+                        var _a;
+                        return id({
+                            name: name,
+                            displayName: id(`\${${name}}`),
+                            required: true,
+                            value: (_a = kcContext.register.formData[name]) !== null && _a !== void 0 ? _a : "",
+                            html5DataAnnotations: {},
+                            readOnly: false,
+                            validators: {},
+                            annotations: {},
+                            autocomplete: (() => {
+                                switch (name) {
+                                    case "email":
+                                        return "email";
+                                    case "username":
+                                        return "username";
+                                    default:
+                                        return undefined;
+                                }
+                            })()
                         });
-                    }
-                    if ("user" in kcContext && kcContext.user instanceof Object) {
-                        //NOTE: Handle legacy login-update-profile.ftl
-                        return ["username", "email", "firstName", "lastName"]
-                            .filter(name => (name !== "username" ? true : kcContext.user.editUsernameAllowed))
-                            .map(name => {
-                            var _a;
-                            return id({
-                                "name": name,
-                                "displayName": id(`\${${name}}`),
-                                "required": true,
-                                "value": (_a = kcContext.user[name]) !== null && _a !== void 0 ? _a : "",
-                                "html5DataAnnotations": {},
-                                "readOnly": false,
-                                "validators": {},
-                                "annotations": {},
-                                "autocomplete": (() => {
-                                    switch (name) {
-                                        case "email":
-                                            return "email";
-                                        case "username":
-                                            return "username";
-                                        default:
-                                            return undefined;
-                                    }
-                                })()
-                            });
+                    });
+                }
+                if ("user" in kcContext && kcContext.user instanceof Object) {
+                    //NOTE: Handle legacy login-update-profile.ftl
+                    return ["username", "email", "firstName", "lastName"]
+                        .filter(name => (name !== "username" ? true : kcContext.user.editUsernameAllowed))
+                        .map(name => {
+                        var _a;
+                        return id({
+                            name: name,
+                            displayName: id(`\${${name}}`),
+                            required: true,
+                            value: (_a = kcContext.user[name]) !== null && _a !== void 0 ? _a : "",
+                            html5DataAnnotations: {},
+                            readOnly: false,
+                            validators: {},
+                            annotations: {},
+                            autocomplete: (() => {
+                                switch (name) {
+                                    case "email":
+                                        return "email";
+                                    case "username":
+                                        return "username";
+                                    default:
+                                        return undefined;
+                                }
+                            })()
                         });
-                    }
-                    if ("email" in kcContext && kcContext.email instanceof Object) {
-                        //NOTE: Handle legacy update-email.ftl
-                        return [
-                            id({
-                                "name": "email",
-                                "displayName": id(`\${email}`),
-                                "required": true,
-                                "value": (_a = kcContext.email.value) !== null && _a !== void 0 ? _a : "",
-                                "html5DataAnnotations": {},
-                                "readOnly": false,
-                                "validators": {},
-                                "annotations": {},
-                                "autocomplete": "email"
-                            })
-                        ];
-                    }
-                    assert(false, "Unable to mock user profile from the current kcContext");
-                }
-                return kcContext.profile.attributes.map(attribute_pre_group_patch => {
-                    if (typeof attribute_pre_group_patch.group === "string" && attribute_pre_group_patch.group !== "") {
-                        const _a = attribute_pre_group_patch, { group, groupDisplayHeader, groupDisplayDescription, groupAnnotations } = _a, rest = __rest(_a, ["group", "groupDisplayHeader", "groupDisplayDescription", "groupAnnotations"]);
-                        return id(Object.assign(Object.assign({}, rest), { "group": {
-                                "name": group,
-                                "displayHeader": groupDisplayHeader,
-                                "displayDescription": groupDisplayDescription,
-                                "html5DataAnnotations": {}
-                            } }));
-                    }
-                    return attribute_pre_group_patch;
-                });
-            })();
-            for (const attribute of attributes) {
-                syntheticAttributes.push(attribute);
-                add_password_and_password_confirm: {
-                    if (!kcContext.passwordRequired) {
-                        break add_password_and_password_confirm;
-                    }
-                    if (attribute.name !== (kcContext.realm.registrationEmailAsUsername ? "email" : "username")) {
-                        // NOTE: We want to add password and password-confirm after the field that identifies the user.
-                        // It's either email or username.
-                        break add_password_and_password_confirm;
-                    }
-                    syntheticAttributes.push(Object.assign({ "name": "password", "displayName": id("${password}"), "required": true, "readOnly": false, "validators": {}, "annotations": {}, "autocomplete": "new-password", "html5DataAnnotations": {} }, { "groupAnnotations": {} }), Object.assign({ "name": "password-confirm", "displayName": id("${passwordConfirm}"), "required": true, "readOnly": false, "validators": {}, "annotations": {}, "html5DataAnnotations": {}, "autocomplete": "new-password" }, { "groupAnnotations": {} }));
+                    });
                 }
-            }
-            return syntheticAttributes;
+                if ("email" in kcContext && kcContext.email instanceof Object) {
+                    //NOTE: Handle legacy update-email.ftl
+                    return [
+                        id({
+                            name: "email",
+                            displayName: id(`\${email}`),
+                            required: true,
+                            value: (_a = kcContext.email.value) !== null && _a !== void 0 ? _a : "",
+                            html5DataAnnotations: {},
+                            readOnly: false,
+                            validators: {},
+                            annotations: {},
+                            autocomplete: "email"
+                        })
+                    ];
+                }
+                assert(false, "Unable to mock user profile from the current kcContext");
+            }
+            return Object.values(kcContext.profile.attributesByName).map(structuredCloneButFunctions);
         })();
-        const initialFormFieldState = (() => {
+        // Retro-compatibility and consistency patches
+        attributes.forEach(attribute => {
             var _a, _b, _c;
-            const out = [];
-            for (const attribute of syntheticAttributes) {
-                handle_multi_valued_attribute: {
-                    if (!attribute.multivalued) {
-                        break handle_multi_valued_attribute;
+            patch_legacy_group: {
+                if (typeof attribute.group !== "string") {
+                    break patch_legacy_group;
+                }
+                const { group, groupDisplayHeader, groupDisplayDescription, groupAnnotations } = attribute;
+                delete attribute.group;
+                // @ts-expect-error
+                delete attribute.groupDisplayHeader;
+                // @ts-expect-error
+                delete attribute.groupDisplayDescription;
+                // @ts-expect-error
+                delete attribute.groupAnnotations;
+                if (group === "") {
+                    break patch_legacy_group;
+                }
+                attribute.group = {
+                    name: group,
+                    displayHeader: groupDisplayHeader,
+                    displayDescription: groupDisplayDescription,
+                    annotations: groupAnnotations,
+                    html5DataAnnotations: {}
+                };
+            }
+            // Attributes with options rendered by default as select inputs
+            if (attribute.validators.options !== undefined && attribute.annotations.inputType === undefined) {
+                attribute.annotations.inputType = "select";
+            }
+            // Consistency patch on values/value property
+            {
+                if (getIsMultivaluedSingleField({ attribute })) {
+                    attribute.multivalued = true;
+                }
+                if (attribute.multivalued) {
+                    (_a = attribute.values) !== null && _a !== void 0 ? _a : (attribute.values = attribute.value !== undefined ? [attribute.value] : []);
+                    delete attribute.value;
+                }
+                else {
+                    (_b = attribute.value) !== null && _b !== void 0 ? _b : (attribute.value = (_c = attribute.values) === null || _c === void 0 ? void 0 : _c[0]);
+                    delete attribute.values;
+                }
+            }
+        });
+        add_password_and_password_confirm: {
+            if (!kcContext.passwordRequired) {
+                break add_password_and_password_confirm;
+            }
+            attributes.forEach((attribute, i) => {
+                if (attribute.name !== (kcContext.realm.registrationEmailAsUsername ? "email" : "username")) {
+                    // NOTE: We want to add password and password-confirm after the field that identifies the user.
+                    // It's either email or username.
+                    return;
+                }
+                attributes.splice(i + 1, 0, {
+                    name: "password",
+                    displayName: id("${password}"),
+                    required: true,
+                    readOnly: false,
+                    validators: {},
+                    annotations: {},
+                    autocomplete: "new-password",
+                    html5DataAnnotations: {}
+                }, {
+                    name: "password-confirm",
+                    displayName: id("${passwordConfirm}"),
+                    required: true,
+                    readOnly: false,
+                    validators: {},
+                    annotations: {},
+                    html5DataAnnotations: {},
+                    autocomplete: "new-password"
+                });
+            });
+        }
+        const initialFormFieldState = [];
+        for (const attribute of attributes) {
+            handle_multi_valued_attribute: {
+                if (!attribute.multivalued) {
+                    break handle_multi_valued_attribute;
+                }
+                const values = ((_a = attribute.values) === null || _a === void 0 ? void 0 : _a.length) ? attribute.values : [""];
+                apply_validator_min_range: {
+                    if (getIsMultivaluedSingleField({ attribute })) {
+                        break apply_validator_min_range;
                     }
-                    const values = (_a = attribute.values) !== null && _a !== void 0 ? _a : [""];
-                    apply_validator_min_range: {
-                        if ((_b = attribute.annotations.inputType) === null || _b === void 0 ? void 0 : _b.startsWith("multiselect")) {
-                            break apply_validator_min_range;
-                        }
-                        const validator = attribute.validators.multivalued;
-                        if (validator === undefined) {
-                            break apply_validator_min_range;
-                        }
-                        const { min: minStr } = validator;
-                        if (minStr === undefined) {
-                            break apply_validator_min_range;
-                        }
-                        const min = parseInt(`${minStr}`);
-                        for (let index = values.length; index < min; index++) {
-                            values.push("");
-                        }
+                    const validator = attribute.validators.multivalued;
+                    if (validator === undefined) {
+                        break apply_validator_min_range;
+                    }
+                    const { min: minStr } = validator;
+                    if (!minStr) {
+                        break apply_validator_min_range;
+                    }
+                    const min = parseInt(`${minStr}`);
+                    for (let index = values.length; index < min; index++) {
+                        values.push("");
                     }
-                    out.push({
-                        attribute,
-                        "valueOrValues": values
-                    });
-                    continue;
                 }
-                out.push({
+                initialFormFieldState.push({
                     attribute,
-                    "valueOrValues": (_c = attribute.value) !== null && _c !== void 0 ? _c : ""
+                    valueOrValues: values
                 });
+                continue;
             }
-            return out;
-        })();
+            initialFormFieldState.push({
+                attribute,
+                valueOrValues: (_b = attribute.value) !== null && _b !== void 0 ? _b : ""
+            });
+        }
         const initialState = {
-            "formFieldStates": initialFormFieldState.map(({ attribute, valueOrValues }) => ({
+            formFieldStates: initialFormFieldState.map(({ attribute, valueOrValues }) => ({
                 attribute,
-                "errors": getErrors({
-                    "attributeName": attribute.name,
-                    "formFieldStates": initialFormFieldState
+                errors: getErrors({
+                    attributeName: attribute.name,
+                    formFieldStates: initialFormFieldState
                 }),
-                "hasLostFocusAtLeastOnce": valueOrValues instanceof Array ? valueOrValues.map(() => false) : false,
-                "valueOrValues": valueOrValues
+                hasLostFocusAtLeastOnce: valueOrValues instanceof Array && !getIsMultivaluedSingleField({ attribute }) ? valueOrValues.map(() => false) : false,
+                valueOrValues: valueOrValues
             }))
         };
         return initialState;
@@ -217,7 +263,7 @@ export function useUserProfileForm(params) {
                     apply_formatters: {
                         const { attribute } = formFieldState;
                         const { kcNumberFormat } = (_a = attribute.html5DataAnnotations) !== null && _a !== void 0 ? _a : {};
-                        if (kcNumberFormat === undefined) {
+                        if (!kcNumberFormat) {
                             break apply_formatters;
                         }
                         if (formFieldState.valueOrValues instanceof Array) {
@@ -228,9 +274,24 @@ export function useUserProfileForm(params) {
                         }
                     }
                     formFieldState.errors = getErrors({
-                        "attributeName": formAction.name,
-                        "formFieldStates": state.formFieldStates
+                        attributeName: formAction.name,
+                        formFieldStates: state.formFieldStates
                     });
+                    simulate_focus_lost: {
+                        const { displayErrorsImmediately = false } = formAction;
+                        if (!displayErrorsImmediately) {
+                            break simulate_focus_lost;
+                        }
+                        for (const fieldIndex of formAction.valueOrValues instanceof Array
+                            ? formAction.valueOrValues.map((...[, index]) => index)
+                            : [undefined]) {
+                            state = reducer(state, {
+                                action: "focus lost",
+                                name: formAction.name,
+                                fieldIndex
+                            });
+                        }
+                    }
                     update_password_confirm: {
                         if (doMakeUserConfirmPassword) {
                             break update_password_confirm;
@@ -239,9 +300,28 @@ export function useUserProfileForm(params) {
                             break update_password_confirm;
                         }
                         state = reducer(state, {
-                            "action": "update",
-                            "name": "password-confirm",
-                            "valueOrValues": formAction.valueOrValues
+                            action: "update",
+                            name: "password-confirm",
+                            valueOrValues: formAction.valueOrValues,
+                            displayErrorsImmediately: formAction.displayErrorsImmediately
+                        });
+                    }
+                    trigger_password_confirm_validation_on_password_change: {
+                        if (!doMakeUserConfirmPassword) {
+                            break trigger_password_confirm_validation_on_password_change;
+                        }
+                        if (formAction.name !== "password") {
+                            break trigger_password_confirm_validation_on_password_change;
+                        }
+                        state = reducer(state, {
+                            action: "update",
+                            name: "password-confirm",
+                            valueOrValues: (() => {
+                                const formFieldState = state.formFieldStates.find(({ attribute }) => attribute.name === "password-confirm");
+                                assert(formFieldState !== undefined);
+                                return formFieldState.valueOrValues;
+                            })(),
+                            displayErrorsImmediately: formAction.displayErrorsImmediately
                         });
                     }
                     return;
@@ -260,9 +340,9 @@ export function useUserProfileForm(params) {
         return Object.assign({}, state);
     }, initialState);
     const formState = useMemo(() => ({
-        "formFieldStates": state.formFieldStates.map((_a) => {
+        formFieldStates: state.formFieldStates.map((_a) => {
             var { errors, hasLostFocusAtLeastOnce: hasLostFocusAtLeastOnceOrArr, attribute } = _a, valueOrValuesWrap = __rest(_a, ["errors", "hasLostFocusAtLeastOnce", "attribute"]);
-            return (Object.assign({ "displayableErrors": errors.filter(error => {
+            return (Object.assign({ displayableErrors: errors.filter(error => {
                     const hasLostFocusAtLeastOnce = typeof hasLostFocusAtLeastOnceOrArr === "boolean"
                         ? hasLostFocusAtLeastOnceOrArr
                         : error.fieldIndex !== undefined
@@ -316,19 +396,20 @@ export function useUserProfileForm(params) {
                     }
                 }), attribute }, valueOrValuesWrap));
         }),
-        "isFormSubmittable": state.formFieldStates.every(({ errors }) => errors.length === 0)
+        isFormSubmittable: state.formFieldStates.every(({ errors }) => errors.length === 0)
     }), [state]);
     return {
         formState,
         dispatchFormAction
     };
 }
+assert();
 function useGetErrors(params) {
     const { kcContext, i18n } = params;
     const { messagesPerField, passwordPolicies } = kcContext;
     const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
     const getErrors = useConstCallback((params) => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const { attributeName, formFieldStates } = params;
         const formFieldState = formFieldStates.find(({ attribute }) => attribute.name === attributeName);
         assert(formFieldState !== undefined);
@@ -338,7 +419,7 @@ function useGetErrors(params) {
             let { valueOrValues } = formFieldState;
             unFormat_number: {
                 const { kcNumberUnFormat } = (_a = attribute.html5DataAnnotations) !== null && _a !== void 0 ? _a : {};
-                if (kcNumberUnFormat === undefined) {
+                if (!kcNumberUnFormat) {
                     break unFormat_number;
                 }
                 if (valueOrValues instanceof Array) {
@@ -353,7 +434,7 @@ function useGetErrors(params) {
         assert(attribute !== undefined);
         server_side_error: {
             if (attribute.multivalued) {
-                const defaultValues = (_a = attribute.values) !== null && _a !== void 0 ? _a : [""];
+                const defaultValues = ((_a = attribute.values) === null || _a === void 0 ? void 0 : _a.length) ? attribute.values : [""];
                 assert(valueOrValues instanceof Array);
                 const values = valueOrValues;
                 if (JSON.stringify(defaultValues) !== JSON.stringify(values.slice(0, defaultValues.length))) {
@@ -372,7 +453,7 @@ function useGetErrors(params) {
             try {
                 doesErrorExist = messagesPerField.existsError(attributeName);
             }
-            catch (_e) {
+            catch (_c) {
                 break server_side_error;
             }
             if (!doesErrorExist) {
@@ -382,10 +463,12 @@ function useGetErrors(params) {
             return [
                 {
                     errorMessageStr,
-                    "errorMessage": _jsx("span", { children: errorMessageStr }, 0),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "server"
+                    errorMessage: (_jsx("span", { dangerouslySetInnerHTML: {
+                            __html: errorMessageStr
+                        } }, 0)),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "server"
                     }
                 }
             ];
@@ -394,7 +477,7 @@ function useGetErrors(params) {
             if (!attribute.multivalued) {
                 break handle_multi_valued_multi_fields;
             }
-            if ((_c = attribute.annotations.inputType) === null || _c === void 0 ? void 0 : _c.startsWith("multiselect")) {
+            if (getIsMultivaluedSingleField({ attribute })) {
                 break handle_multi_valued_multi_fields;
             }
             assert(valueOrValues instanceof Array);
@@ -403,12 +486,12 @@ function useGetErrors(params) {
                 .map((...[, index]) => {
                 const specificValueErrors = getErrors({
                     attributeName,
-                    "formFieldStates": formFieldStates.map(formFieldState => {
+                    formFieldStates: formFieldStates.map(formFieldState => {
                         if (formFieldState.attribute.name === attributeName) {
                             assert(formFieldState.valueOrValues instanceof Array);
                             return {
-                                "attribute": Object.assign(Object.assign({}, attribute), { "annotations": Object.assign(Object.assign({}, attribute.annotations), { "inputType": undefined }), "multivalued": false }),
-                                "valueOrValues": formFieldState.valueOrValues[index]
+                                attribute: Object.assign(Object.assign({}, attribute), { annotations: Object.assign(Object.assign({}, attribute.annotations), { inputType: undefined }), multivalued: false }),
+                                valueOrValues: formFieldState.valueOrValues[index]
                             };
                         }
                         return formFieldState;
@@ -421,7 +504,7 @@ function useGetErrors(params) {
                     }
                     return true;
                 })
-                    .map((error) => (Object.assign(Object.assign({}, error), { "fieldIndex": index })));
+                    .map((error) => (Object.assign(Object.assign({}, error), { fieldIndex: index })));
             })
                 .reduce((acc, errors) => [...acc, ...errors], []);
             required_field: {
@@ -433,12 +516,12 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["error-user-attribute-required"];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "other",
-                        "rule": "requiredField"
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "other",
+                        rule: "requiredField"
                     }
                 });
             }
@@ -448,7 +531,7 @@ function useGetErrors(params) {
             if (!attribute.multivalued) {
                 break handle_multi_valued_single_field;
             }
-            if (!((_d = attribute.annotations.inputType) === null || _d === void 0 ? void 0 : _d.startsWith("multiselect"))) {
+            if (!getIsMultivaluedSingleField({ attribute })) {
                 break handle_multi_valued_single_field;
             }
             const validatorName = "multivalued";
@@ -457,10 +540,10 @@ function useGetErrors(params) {
                 return [];
             }
             const { min: minStr } = validator;
-            const min = minStr !== undefined ? parseInt(`${minStr}`) : attribute.required ? 1 : 0;
+            const min = minStr ? parseInt(`${minStr}`) : attribute.required ? 1 : 0;
             assert(!isNaN(min));
             const { max: maxStr } = validator;
-            const max = maxStr === undefined ? Infinity : parseInt(`${maxStr}`);
+            const max = !maxStr ? Infinity : parseInt(`${maxStr}`);
             assert(!isNaN(max));
             assert(valueOrValues instanceof Array);
             const values = valueOrValues;
@@ -470,12 +553,12 @@ function useGetErrors(params) {
             const msgArgs = ["error-invalid-multivalued-size", `${min}`, `${max}`];
             return [
                 {
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, 0),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "validator",
-                        "name": validatorName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, 0),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "validator",
+                        name: validatorName
                     }
                 }
             ];
@@ -493,7 +576,7 @@ function useGetErrors(params) {
             check_password_policy_x: {
                 const policyName = "length";
                 const policy = passwordPolicies[policyName];
-                if (policy === undefined) {
+                if (!policy) {
                     break check_password_policy_x;
                 }
                 const minLength = policy;
@@ -502,19 +585,19 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["invalidPasswordMinLengthMessage", `${minLength}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
             check_password_policy_x: {
                 const policyName = "digits";
                 const policy = passwordPolicies[policyName];
-                if (policy === undefined) {
+                if (!policy) {
                     break check_password_policy_x;
                 }
                 const minNumberOfDigits = policy;
@@ -523,19 +606,19 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["invalidPasswordMinDigitsMessage", `${minNumberOfDigits}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
             check_password_policy_x: {
                 const policyName = "lowerCase";
                 const policy = passwordPolicies[policyName];
-                if (policy === undefined) {
+                if (!policy) {
                     break check_password_policy_x;
                 }
                 const minNumberOfLowerCaseChar = policy;
@@ -544,19 +627,19 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["invalidPasswordMinLowerCaseCharsMessage", `${minNumberOfLowerCaseChar}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
             check_password_policy_x: {
                 const policyName = "upperCase";
                 const policy = passwordPolicies[policyName];
-                if (policy === undefined) {
+                if (!policy) {
                     break check_password_policy_x;
                 }
                 const minNumberOfUpperCaseChar = policy;
@@ -565,19 +648,19 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["invalidPasswordMinUpperCaseCharsMessage", `${minNumberOfUpperCaseChar}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
             check_password_policy_x: {
                 const policyName = "specialChars";
                 const policy = passwordPolicies[policyName];
-                if (policy === undefined) {
+                if (!policy) {
                     break check_password_policy_x;
                 }
                 const minNumberOfSpecialChar = policy;
@@ -586,12 +669,12 @@ function useGetErrors(params) {
                 }
                 const msgArgs = ["invalidPasswordMinSpecialCharsMessage", `${minNumberOfSpecialChar}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
@@ -602,7 +685,7 @@ function useGetErrors(params) {
                     break check_password_policy_x;
                 }
                 const usernameFormFieldState = formFieldStates.find(formFieldState => formFieldState.attribute.name === "username");
-                if (usernameFormFieldState === undefined) {
+                if (!usernameFormFieldState) {
                     break check_password_policy_x;
                 }
                 const usernameValue = (() => {
@@ -611,24 +694,27 @@ function useGetErrors(params) {
                     assert(typeof valueOrValues === "string");
                     unFormat_number: {
                         const { kcNumberUnFormat } = (_a = attribute.html5DataAnnotations) !== null && _a !== void 0 ? _a : {};
-                        if (kcNumberUnFormat === undefined) {
+                        if (!kcNumberUnFormat) {
                             break unFormat_number;
                         }
                         valueOrValues = formatNumber(valueOrValues, kcNumberUnFormat);
                     }
                     return valueOrValues;
                 })();
+                if (usernameValue === "") {
+                    break check_password_policy_x;
+                }
                 if (value !== usernameValue) {
                     break check_password_policy_x;
                 }
                 const msgArgs = ["invalidPasswordNotUsernameMessage"];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
@@ -639,24 +725,27 @@ function useGetErrors(params) {
                     break check_password_policy_x;
                 }
                 const emailFormFieldState = formFieldStates.find(formFieldState => formFieldState.attribute.name === "email");
-                if (emailFormFieldState === undefined) {
+                if (!emailFormFieldState) {
                     break check_password_policy_x;
                 }
                 assert(typeof emailFormFieldState.valueOrValues === "string");
                 {
                     const emailValue = emailFormFieldState.valueOrValues;
+                    if (emailValue === "") {
+                        break check_password_policy_x;
+                    }
                     if (value !== emailValue) {
                         break check_password_policy_x;
                     }
                 }
                 const msgArgs = ["invalidPasswordNotEmailMessage"];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "passwordPolicy",
-                        "name": policyName
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "passwordPolicy",
+                        name: policyName
                     }
                 });
             }
@@ -676,12 +765,12 @@ function useGetErrors(params) {
             }
             const msgArgs = ["invalidPasswordConfirmMessage"];
             errors.push({
-                "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                "errorMessageStr": msgStr(...msgArgs),
-                "fieldIndex": undefined,
-                "source": {
-                    "type": "other",
-                    "rule": "passwordConfirmMatchesPassword"
+                errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                errorMessageStr: msgStr(...msgArgs),
+                fieldIndex: undefined,
+                source: {
+                    type: "other",
+                    rule: "passwordConfirmMatchesPassword"
                 }
             });
         }
@@ -695,19 +784,19 @@ function useGetErrors(params) {
             }
             const msgArgs = ["error-user-attribute-required"];
             errors.push({
-                "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                "errorMessageStr": msgStr(...msgArgs),
-                "fieldIndex": undefined,
-                "source": {
-                    "type": "other",
-                    "rule": "requiredField"
+                errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                errorMessageStr: msgStr(...msgArgs),
+                fieldIndex: undefined,
+                source: {
+                    type: "other",
+                    rule: "requiredField"
                 }
             });
         }
         validator_x: {
             const validatorName = "length";
             const validator = validators[validatorName];
-            if (validator === undefined) {
+            if (!validator) {
                 break validator_x;
             }
             const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
@@ -715,24 +804,24 @@ function useGetErrors(params) {
                 break validator_x;
             }
             const source = {
-                "type": "validator",
-                "name": validatorName
+                type: "validator",
+                name: validatorName
             };
-            if (max !== undefined && value.length > parseInt(`${max}`)) {
+            if (max && value.length > parseInt(`${max}`)) {
                 const msgArgs = ["error-invalid-length-too-long", `${max}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
                     source
                 });
             }
-            if (min !== undefined && value.length < parseInt(`${min}`)) {
+            if (min && value.length < parseInt(`${min}`)) {
                 const msgArgs = ["error-invalid-length-too-short", `${min}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
                     source
                 });
             }
@@ -752,12 +841,12 @@ function useGetErrors(params) {
             }
             const msgArgs = [errorMessageKey !== null && errorMessageKey !== void 0 ? errorMessageKey : id("shouldMatchPattern"), pattern];
             errors.push({
-                "errorMessage": _jsx(Fragment, { children: advancedMsg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                "errorMessageStr": advancedMsgStr(...msgArgs),
-                "fieldIndex": undefined,
-                "source": {
-                    "type": "validator",
-                    "name": validatorName
+                errorMessage: _jsx(Fragment, { children: advancedMsg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                errorMessageStr: advancedMsgStr(...msgArgs),
+                fieldIndex: undefined,
+                source: {
+                    type: "validator",
+                    name: validatorName
                 }
             });
         }
@@ -782,12 +871,12 @@ function useGetErrors(params) {
             }
             const msgArgs = [id("invalidEmailMessage")];
             errors.push({
-                "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                "errorMessageStr": msgStr(...msgArgs),
-                "fieldIndex": undefined,
-                "source": {
-                    "type": "validator",
-                    "name": validatorName
+                errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                errorMessageStr: msgStr(...msgArgs),
+                fieldIndex: undefined,
+                source: {
+                    type: "validator",
+                    name: validatorName
                 }
             });
         }
@@ -803,35 +892,35 @@ function useGetErrors(params) {
             }
             const intValue = parseInt(value);
             const source = {
-                "type": "validator",
-                "name": validatorName
+                type: "validator",
+                name: validatorName
             };
             if (isNaN(intValue)) {
                 const msgArgs = ["mustBeAnInteger"];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
                     source
                 });
                 break validator_x;
             }
-            if (max !== undefined && intValue > parseInt(`${max}`)) {
+            if (max && intValue > parseInt(`${max}`)) {
                 const msgArgs = ["error-number-out-of-range-too-big", `${max}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
                     source
                 });
                 break validator_x;
             }
-            if (min !== undefined && intValue < parseInt(`${min}`)) {
+            if (min && intValue < parseInt(`${min}`)) {
                 const msgArgs = ["error-number-out-of-range-too-small", `${min}`];
                 errors.push({
-                    "errorMessage": _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
+                    errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
                     source
                 });
                 break validator_x;
@@ -851,12 +940,12 @@ function useGetErrors(params) {
             }
             const msgArgs = [id("notAValidOption")];
             errors.push({
-                "errorMessage": _jsx(Fragment, { children: advancedMsg(...msgArgs) }, `${attributeName}-${errors.length}`),
-                "errorMessageStr": advancedMsgStr(...msgArgs),
-                "fieldIndex": undefined,
-                "source": {
-                    "type": "validator",
-                    "name": validatorName
+                errorMessage: _jsx(Fragment, { children: msg(...msgArgs) }, `${attributeName}-${errors.length}`),
+                errorMessageStr: msgStr(...msgArgs),
+                fieldIndex: undefined,
+                source: {
+                    type: "validator",
+                    name: validatorName
                 }
             });
         }
@@ -865,4 +954,59 @@ function useGetErrors(params) {
     });
     return { getErrors };
 }
+function getIsMultivaluedSingleField(params) {
+    var _a, _b;
+    const { attribute } = params;
+    return (_b = (_a = attribute.annotations.inputType) === null || _a === void 0 ? void 0 : _a.startsWith("multiselect")) !== null && _b !== void 0 ? _b : false;
+}
+export function getButtonToDisplayForMultivaluedAttributeField(params) {
+    const { attribute, values, fieldIndex } = params;
+    const hasRemove = (() => {
+        if (values.length === 1) {
+            return false;
+        }
+        const minCount = (() => {
+            const { multivalued } = attribute.validators;
+            if (multivalued === undefined) {
+                return undefined;
+            }
+            const minStr = multivalued.min;
+            if (minStr === undefined) {
+                return undefined;
+            }
+            return parseInt(`${minStr}`);
+        })();
+        if (minCount === undefined) {
+            return true;
+        }
+        if (values.length === minCount) {
+            return false;
+        }
+        return true;
+    })();
+    const hasAdd = (() => {
+        if (fieldIndex + 1 !== values.length) {
+            return false;
+        }
+        const maxCount = (() => {
+            const { multivalued } = attribute.validators;
+            if (multivalued === undefined) {
+                return undefined;
+            }
+            const maxStr = multivalued.max;
+            if (maxStr === undefined) {
+                return undefined;
+            }
+            return parseInt(`${maxStr}`);
+        })();
+        if (maxCount === undefined) {
+            return false;
+        }
+        if (values.length === maxCount) {
+            return false;
+        }
+        return true;
+    })();
+    return { hasRemove, hasAdd };
+}
 //# sourceMappingURL=useUserProfileForm.js.map