keycloakify 10.0.0-rc.8 → 10.0.0-rc.80

package/src/login/lib/useUserProfileForm.tsx

@@ -1,14 +1,16 @@
 import "keycloakify/tools/Array.prototype.every";
 import { useMemo, useReducer, useEffect, Fragment, type Dispatch } from "react";
+import { assert, type Equals } from "tsafe/assert";
 import { id } from "tsafe/id";
-import type { MessageKey } from "keycloakify/login/i18n/i18n";
-import type { Attribute, Validators } from "keycloakify/login/kcContext/KcContext";
+import { structuredCloneButFunctions } from "keycloakify/tools/structuredCloneButFunctions";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import { emailRegexp } from "keycloakify/tools/emailRegExp";
-import type { KcContext, PasswordPolicies } from "keycloakify/login/kcContext/KcContext";
-import { assert, type Equals } from "tsafe/assert";
 import { formatNumber } from "keycloakify/tools/formatNumber";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PasswordPolicies, Attribute, Validators } from "keycloakify/login/KcContext";
+import type { KcContext } from "../KcContext";
+import type { MessageKey } from "keycloakify/login/i18n";
+import { KcContextLike as KcContextLike_i18n } from "keycloakify/login/i18n";
 import type { I18n } from "../i18n";
 
 export type FormFieldError = {
@@ -64,21 +66,22 @@ export type FormAction =
           fieldIndex: number | undefined;
       };
 
-export type KcContextLike = {
-    messagesPerField: Pick<KcContext.Common["messagesPerField"], "existsError" | "get">;
-    profile: {
-        attributes: Attribute[];
-        html5DataAnnotations?: Record<string, string>;
-    };
-    passwordRequired?: boolean;
-    realm: { registrationEmailAsUsername: boolean };
-    passwordPolicies?: PasswordPolicies;
-    url: {
-        resourcesPath: string;
+export type KcContextLike = KcContextLike_i18n &
+    KcContextLike_useGetErrors & {
+        profile: {
+            attributesByName: Record<string, Attribute>;
+            html5DataAnnotations?: Record<string, string>;
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+        url: {
+            resourcesPath: string;
+        };
     };
-};
 
-export type ParamsOfUseUserProfileForm = {
+assert<Extract<Extract<KcContext, { profile: unknown }>, { pageId: "register.ftl" }> extends KcContextLike ? true : false>();
+
+export type UseUserProfileFormParams = {
     kcContext: KcContextLike;
     i18n: I18n;
     doMakeUserConfirmPassword: boolean;
@@ -102,17 +105,16 @@ namespace internal {
     };
 }
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
-export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
+export function useUserProfileForm(params: UseUserProfileFormParams): ReturnTypeOfUseUserProfileForm {
     const { kcContext, i18n, doMakeUserConfirmPassword } = params;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": Object.keys(kcContext.profile?.html5DataAnnotations ?? {})
+        componentOrHookName: "useUserProfileForm",
+        scriptTags: Object.keys(kcContext.profile?.html5DataAnnotations ?? {})
             .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`
             }))
     });
 
@@ -128,226 +130,251 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
     const initialState = useMemo((): internal.State => {
         // 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: Attribute[] = [];
-
-            const attributes = (() => {
-                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"] as const)
-                            .filter(name => (name !== "username" ? true : !kcContext.realm.registrationEmailAsUsername))
-                            .map(name =>
-                                id<Attribute>({
-                                    "name": name,
-                                    "displayName": id<`\${${MessageKey}}`>(`\${${name}}`),
-                                    "required": true,
-                                    "value": (kcContext.register as any).formData[name] ?? "",
-                                    "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: Attribute[] = (() => {
+            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 ("user" in kcContext && kcContext.user instanceof Object) {
-                        //NOTE: Handle legacy login-update-profile.ftl
-                        return (["username", "email", "firstName", "lastName"] as const)
-                            .filter(name => (name !== "username" ? true : (kcContext.user as any).editUsernameAllowed))
-                            .map(name =>
-                                id<Attribute>({
-                                    "name": name,
-                                    "displayName": id<`\${${MessageKey}}`>(`\${${name}}`),
-                                    "required": true,
-                                    "value": (kcContext as any).user[name] ?? "",
-                                    "html5DataAnnotations": {},
-                                    "readOnly": false,
-                                    "validators": {},
-                                    "annotations": {},
-                                    "autocomplete": (() => {
-                                        switch (name) {
-                                            case "email":
-                                                return "email";
-                                            case "username":
-                                                return "username";
-                                            default:
-                                                return undefined;
-                                        }
-                                    })()
-                                })
-                            );
-                    }
+                if ("register" in kcContext && kcContext.register instanceof Object && "formData" in kcContext.register) {
+                    //NOTE: Handle legacy register.ftl page
+                    return (["firstName", "lastName", "email", "username"] as const)
+                        .filter(name => (name !== "username" ? true : !kcContext.realm.registrationEmailAsUsername))
+                        .map(name =>
+                            id<Attribute>({
+                                name: name,
+                                displayName: id<`\${${MessageKey}}`>(`\${${name}}`),
+                                required: true,
+                                value: (kcContext.register as any).formData[name] ?? "",
+                                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 [
+                if ("user" in kcContext && kcContext.user instanceof Object) {
+                    //NOTE: Handle legacy login-update-profile.ftl
+                    return (["username", "email", "firstName", "lastName"] as const)
+                        .filter(name => (name !== "username" ? true : (kcContext.user as any).editUsernameAllowed))
+                        .map(name =>
                             id<Attribute>({
-                                "name": "email",
-                                "displayName": id<`\${${MessageKey}}`>(`\${email}`),
-                                "required": true,
-                                "value": (kcContext.email as any).value ?? "",
-                                "html5DataAnnotations": {},
-                                "readOnly": false,
-                                "validators": {},
-                                "annotations": {},
-                                "autocomplete": "email"
+                                name: name,
+                                displayName: id<`\${${MessageKey}}`>(`\${${name}}`),
+                                required: true,
+                                value: (kcContext as any).user[name] ?? "",
+                                html5DataAnnotations: {},
+                                readOnly: false,
+                                validators: {},
+                                annotations: {},
+                                autocomplete: (() => {
+                                    switch (name) {
+                                        case "email":
+                                            return "email";
+                                        case "username":
+                                            return "username";
+                                        default:
+                                            return undefined;
+                                    }
+                                })()
                             })
-                        ];
-                    }
+                        );
+                }
 
-                    assert(false, "Unable to mock user profile from the current kcContext");
+                if ("email" in kcContext && kcContext.email instanceof Object) {
+                    //NOTE: Handle legacy update-email.ftl
+                    return [
+                        id<Attribute>({
+                            name: "email",
+                            displayName: id<`\${${MessageKey}}`>(`\${email}`),
+                            required: true,
+                            value: (kcContext.email as any).value ?? "",
+                            html5DataAnnotations: {},
+                            readOnly: false,
+                            validators: {},
+                            annotations: {},
+                            autocomplete: "email"
+                        })
+                    ];
                 }
 
-                return kcContext.profile.attributes.map(attribute_pre_group_patch => {
-                    if (typeof attribute_pre_group_patch.group === "string" && attribute_pre_group_patch.group !== "") {
-                        const { group, groupDisplayHeader, groupDisplayDescription, groupAnnotations, ...rest } =
-                            attribute_pre_group_patch as Attribute & {
-                                group: string;
-                                groupDisplayHeader?: string;
-                                groupDisplayDescription?: string;
-                                groupAnnotations: Record<string, string>;
-                            };
-
-                        return id<Attribute>({
-                            ...rest,
-                            "group": {
-                                "name": group,
-                                "displayHeader": groupDisplayHeader,
-                                "displayDescription": groupDisplayDescription,
-                                "html5DataAnnotations": {}
-                            }
-                        });
-                    }
+                assert(false, "Unable to mock user profile from the current kcContext");
+            }
 
-                    return attribute_pre_group_patch;
-                });
-            })();
+            return Object.values(kcContext.profile.attributesByName).map(structuredCloneButFunctions);
+        })();
 
-            for (const attribute of attributes) {
-                syntheticAttributes.push(attribute);
+        // Retro-compatibility and consistency patches
+        attributes.forEach(attribute => {
+            patch_legacy_group: {
+                if (typeof attribute.group !== "string") {
+                    break patch_legacy_group;
+                }
 
-                add_password_and_password_confirm: {
-                    if (!kcContext.passwordRequired) {
-                        break add_password_and_password_confirm;
-                    }
+                const { group, groupDisplayHeader, groupDisplayDescription /*, groupAnnotations*/ } = attribute as Attribute & {
+                    group: string;
+                    groupDisplayHeader?: string;
+                    groupDisplayDescription?: string;
+                    groupAnnotations: Record<string, string>;
+                };
 
-                    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;
-                    }
+                delete attribute.group;
+                // @ts-expect-error
+                delete attribute.groupDisplayHeader;
+                // @ts-expect-error
+                delete attribute.groupDisplayDescription;
+                // @ts-expect-error
+                delete attribute.groupAnnotations;
 
-                    syntheticAttributes.push(
-                        {
-                            "name": "password",
-                            "displayName": id<`\${${MessageKey}}`>("${password}"),
-                            "required": true,
-                            "readOnly": false,
-                            "validators": {},
-                            "annotations": {},
-                            "autocomplete": "new-password",
-                            "html5DataAnnotations": {},
-                            // NOTE: Compat with Keycloak version prior to 24
-                            ...({ "groupAnnotations": {} } as {})
-                        },
-                        {
-                            "name": "password-confirm",
-                            "displayName": id<`\${${MessageKey}}`>("${passwordConfirm}"),
-                            "required": true,
-                            "readOnly": false,
-                            "validators": {},
-                            "annotations": {},
-                            "html5DataAnnotations": {},
-                            "autocomplete": "new-password",
-                            // NOTE: Compat with Keycloak version prior to 24
-                            ...({ "groupAnnotations": {} } as {})
-                        }
-                    );
+                if (group === "") {
+                    break patch_legacy_group;
                 }
+
+                attribute.group = {
+                    name: group,
+                    displayHeader: groupDisplayHeader,
+                    displayDescription: groupDisplayDescription,
+                    html5DataAnnotations: {}
+                };
             }
 
-            return syntheticAttributes;
-        })();
+            // Attributes with options rendered by default as select inputs
+            if (attribute.validators.options !== undefined && attribute.annotations.inputType === undefined) {
+                attribute.annotations.inputType = "select";
+            }
 
-        const initialFormFieldState = (() => {
-            const out: { attribute: Attribute; valueOrValues: string | string[] }[] = [];
+            // Consistency patch on values/value property
+            {
+                if (getIsMultivaluedSingleField({ attribute })) {
+                    attribute.multivalued = true;
+                }
 
-            for (const attribute of syntheticAttributes) {
-                handle_multi_valued_attribute: {
-                    if (!attribute.multivalued) {
-                        break handle_multi_valued_attribute;
+                if (attribute.multivalued) {
+                    attribute.values ??= attribute.value !== undefined ? [attribute.value] : [];
+                    delete attribute.value;
+                } else {
+                    attribute.value ??= attribute.values?.[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<`\${${MessageKey}}`>("${password}"),
+                        required: true,
+                        readOnly: false,
+                        validators: {},
+                        annotations: {},
+                        autocomplete: "new-password",
+                        html5DataAnnotations: {}
+                    },
+                    {
+                        name: "password-confirm",
+                        displayName: id<`\${${MessageKey}}`>("${passwordConfirm}"),
+                        required: true,
+                        readOnly: false,
+                        validators: {},
+                        annotations: {},
+                        html5DataAnnotations: {},
+                        autocomplete: "new-password"
                     }
+                );
+            });
+        }
 
-                    const values = attribute.values ?? [""];
+        const initialFormFieldState: {
+            attribute: Attribute;
+            valueOrValues: string | string[];
+        }[] = [];
 
-                    apply_validator_min_range: {
-                        if (attribute.annotations.inputType?.startsWith("multiselect")) {
-                            break apply_validator_min_range;
-                        }
+        for (const attribute of attributes) {
+            handle_multi_valued_attribute: {
+                if (!attribute.multivalued) {
+                    break handle_multi_valued_attribute;
+                }
 
-                        const validator = attribute.validators.multivalued;
+                const values = attribute.values?.length ? attribute.values : [""];
 
-                        if (validator === undefined) {
-                            break apply_validator_min_range;
-                        }
+                apply_validator_min_range: {
+                    if (getIsMultivaluedSingleField({ attribute })) {
+                        break apply_validator_min_range;
+                    }
 
-                        const { min: minStr } = validator;
+                    const validator = attribute.validators.multivalued;
 
-                        if (minStr === undefined) {
-                            break apply_validator_min_range;
-                        }
+                    if (validator === undefined) {
+                        break apply_validator_min_range;
+                    }
 
-                        const min = parseInt(`${minStr}`);
+                    const { min: minStr } = validator;
 
-                        for (let index = values.length; index < min; index++) {
-                            values.push("");
-                        }
+                    if (!minStr) {
+                        break apply_validator_min_range;
                     }
 
-                    out.push({
-                        attribute,
-                        "valueOrValues": values
-                    });
+                    const min = parseInt(`${minStr}`);
 
-                    continue;
+                    for (let index = values.length; index < min; index++) {
+                        values.push("");
+                    }
                 }
 
-                out.push({
+                initialFormFieldState.push({
                     attribute,
-                    "valueOrValues": attribute.value ?? ""
+                    valueOrValues: values
                 });
+
+                continue;
             }
 
-            return out;
-        })();
+            initialFormFieldState.push({
+                attribute,
+                valueOrValues: attribute.value ?? ""
+            });
+        }
 
         const initialState: internal.State = {
-            "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
             }))
         };
 
@@ -369,7 +396,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                         const { kcNumberFormat } = attribute.html5DataAnnotations ?? {};
 
-                        if (kcNumberFormat === undefined) {
+                        if (!kcNumberFormat) {
                             break apply_formatters;
                         }
 
@@ -381,8 +408,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     }
 
                     formFieldState.errors = getErrors({
-                        "attributeName": formAction.name,
-                        "formFieldStates": state.formFieldStates
+                        attributeName: formAction.name,
+                        formFieldStates: state.formFieldStates
                     });
 
                     update_password_confirm: {
@@ -395,9 +422,9 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                         }
 
                         state = reducer(state, {
-                            "action": "update",
-                            "name": "password-confirm",
-                            "valueOrValues": formAction.valueOrValues
+                            action: "update",
+                            name: "password-confirm",
+                            valueOrValues: formAction.valueOrValues
                         });
                     }
 
@@ -421,15 +448,15 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
     const formState: FormState = useMemo(
         () => ({
-            "formFieldStates": state.formFieldStates.map(
+            formFieldStates: state.formFieldStates.map(
                 ({ errors, hasLostFocusAtLeastOnce: hasLostFocusAtLeastOnceOrArr, attribute, ...valueOrValuesWrap }) => ({
-                    "displayableErrors": errors.filter(error => {
+                    displayableErrors: errors.filter(error => {
                         const hasLostFocusAtLeastOnce =
                             typeof hasLostFocusAtLeastOnceOrArr === "boolean"
                                 ? hasLostFocusAtLeastOnceOrArr
                                 : error.fieldIndex !== undefined
-                                ? hasLostFocusAtLeastOnceOrArr[error.fieldIndex]
-                                : hasLostFocusAtLeastOnceOrArr[hasLostFocusAtLeastOnceOrArr.length - 1];
+                                  ? hasLostFocusAtLeastOnceOrArr[error.fieldIndex]
+                                  : hasLostFocusAtLeastOnceOrArr[hasLostFocusAtLeastOnceOrArr.length - 1];
 
                         switch (error.source.type) {
                             case "server":
@@ -482,7 +509,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     ...valueOrValuesWrap
                 })
             ),
-            "isFormSubmittable": state.formFieldStates.every(({ errors }) => errors.length === 0)
+            isFormSubmittable: state.formFieldStates.every(({ errors }) => errors.length === 0)
         }),
         [state]
     );
@@ -493,7 +520,14 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
     };
 }
 
-function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField" | "passwordPolicies">; i18n: I18n }) {
+type KcContextLike_useGetErrors = KcContextLike_i18n & {
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    passwordPolicies?: PasswordPolicies;
+};
+
+assert<KcContextLike extends KcContextLike_useGetErrors ? true : false>();
+
+function useGetErrors(params: { kcContext: KcContextLike_useGetErrors; i18n: I18n }) {
     const { kcContext, i18n } = params;
 
     const { messagesPerField, passwordPolicies } = kcContext;
@@ -501,7 +535,13 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
     const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
     const getErrors = useConstCallback(
-        (params: { attributeName: string; formFieldStates: { attribute: Attribute; valueOrValues: string | string[] }[] }): FormFieldError[] => {
+        (params: {
+            attributeName: string;
+            formFieldStates: {
+                attribute: Attribute;
+                valueOrValues: string | string[];
+            }[];
+        }): FormFieldError[] => {
             const { attributeName, formFieldStates } = params;
 
             const formFieldState = formFieldStates.find(({ attribute }) => attribute.name === attributeName);
@@ -516,7 +556,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 unFormat_number: {
                     const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                    if (kcNumberUnFormat === undefined) {
+                    if (!kcNumberUnFormat) {
                         break unFormat_number;
                     }
 
@@ -534,7 +574,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
             server_side_error: {
                 if (attribute.multivalued) {
-                    const defaultValues = attribute.values ?? [""];
+                    const defaultValues = attribute.values?.length ? attribute.values : [""];
 
                     assert(valueOrValues instanceof Array);
 
@@ -572,10 +612,10 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 return [
                     {
                         errorMessageStr,
-                        "errorMessage": <span key={0}>{errorMessageStr}</span>,
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "server"
+                        errorMessage: <span key={0}>{errorMessageStr}</span>,
+                        fieldIndex: undefined,
+                        source: {
+                            type: "server"
                         }
                     }
                 ];
@@ -586,7 +626,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     break handle_multi_valued_multi_fields;
                 }
 
-                if (attribute.annotations.inputType?.startsWith("multiselect")) {
+                if (getIsMultivaluedSingleField({ attribute })) {
                     break handle_multi_valued_multi_fields;
                 }
 
@@ -598,19 +638,19 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     .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": {
+                                        attribute: {
                                             ...attribute,
-                                            "annotations": {
+                                            annotations: {
                                                 ...attribute.annotations,
-                                                "inputType": undefined
+                                                inputType: undefined
                                             },
-                                            "multivalued": false
+                                            multivalued: false
                                         },
-                                        "valueOrValues": formFieldState.valueOrValues[index]
+                                        valueOrValues: formFieldState.valueOrValues[index]
                                     };
                                 }
 
@@ -626,7 +666,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                                 return true;
                             })
-                            .map((error): FormFieldError => ({ ...error, "fieldIndex": index }));
+                            .map(
+                                (error): FormFieldError => ({
+                                    ...error,
+                                    fieldIndex: index
+                                })
+                            );
                     })
                     .reduce((acc, errors) => [...acc, ...errors], []);
 
@@ -642,12 +687,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["error-user-attribute-required"] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "other",
-                            "rule": "requiredField"
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "other",
+                            rule: "requiredField"
                         }
                     });
                 }
@@ -660,7 +705,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     break handle_multi_valued_single_field;
                 }
 
-                if (!attribute.annotations.inputType?.startsWith("multiselect")) {
+                if (!getIsMultivaluedSingleField({ attribute })) {
                     break handle_multi_valued_single_field;
                 }
 
@@ -674,13 +719,13 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                 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));
 
@@ -696,12 +741,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                 return [
                     {
-                        "errorMessage": <Fragment key={0}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "validator",
-                            "name": validatorName
+                        errorMessage: <Fragment key={0}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "validator",
+                            name: validatorName
                         }
                     }
                 ];
@@ -727,7 +772,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -740,12 +785,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordMinLengthMessage", `${minLength}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -755,7 +800,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -768,12 +813,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordMinDigitsMessage", `${minNumberOfDigits}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -783,7 +828,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -798,12 +843,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordMinLowerCaseCharsMessage", `${minNumberOfLowerCaseChar}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -813,7 +858,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -828,12 +873,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordMinUpperCaseCharsMessage", `${minNumberOfUpperCaseChar}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -843,7 +888,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -856,12 +901,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordMinSpecialCharsMessage", `${minNumberOfSpecialChar}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -877,7 +922,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const usernameFormFieldState = formFieldStates.find(formFieldState => formFieldState.attribute.name === "username");
 
-                    if (usernameFormFieldState === undefined) {
+                    if (!usernameFormFieldState) {
                         break check_password_policy_x;
                     }
 
@@ -889,7 +934,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                         unFormat_number: {
                             const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                            if (kcNumberUnFormat === undefined) {
+                            if (!kcNumberUnFormat) {
                                 break unFormat_number;
                             }
 
@@ -899,6 +944,10 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                         return valueOrValues;
                     })();
 
+                    if (usernameValue === "") {
+                        break check_password_policy_x;
+                    }
+
                     if (value !== usernameValue) {
                         break check_password_policy_x;
                     }
@@ -906,12 +955,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordNotUsernameMessage"] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -927,7 +976,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const emailFormFieldState = formFieldStates.find(formFieldState => formFieldState.attribute.name === "email");
 
-                    if (emailFormFieldState === undefined) {
+                    if (!emailFormFieldState) {
                         break check_password_policy_x;
                     }
 
@@ -936,6 +985,10 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     {
                         const emailValue = emailFormFieldState.valueOrValues;
 
+                        if (emailValue === "") {
+                            break check_password_policy_x;
+                        }
+
                         if (value !== emailValue) {
                             break check_password_policy_x;
                         }
@@ -944,12 +997,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     const msgArgs = ["invalidPasswordNotEmailMessage"] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
-                        "source": {
-                            "type": "passwordPolicy",
-                            "name": policyName
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
+                        source: {
+                            type: "passwordPolicy",
+                            name: policyName
                         }
                     });
                 }
@@ -977,12 +1030,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const msgArgs = ["invalidPasswordConfirmMessage"] as const;
 
                 errors.push({
-                    "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "other",
-                        "rule": "passwordConfirmMatchesPassword"
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "other",
+                        rule: "passwordConfirmMatchesPassword"
                     }
                 });
             }
@@ -1001,12 +1054,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const msgArgs = ["error-user-attribute-required"] as const;
 
                 errors.push({
-                    "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "other",
-                        "rule": "requiredField"
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "other",
+                        rule: "requiredField"
                     }
                 });
             }
@@ -1016,7 +1069,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                 const validator = validators[validatorName];
 
-                if (validator === undefined) {
+                if (!validator) {
                     break validator_x;
                 }
 
@@ -1027,28 +1080,28 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 }
 
                 const source: FormFieldError.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}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        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}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
                         source
                     });
                 }
@@ -1076,12 +1129,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const msgArgs = [errorMessageKey ?? id<MessageKey>("shouldMatchPattern"), pattern] as const;
 
                 errors.push({
-                    "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": advancedMsgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "validator",
-                        "name": validatorName
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
+                    errorMessageStr: advancedMsgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "validator",
+                        name: validatorName
                     }
                 });
             }
@@ -1115,12 +1168,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const msgArgs = [id<MessageKey>("invalidEmailMessage")] as const;
 
                 errors.push({
-                    "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "validator",
-                        "name": validatorName
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                    errorMessageStr: msgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "validator",
+                        name: validatorName
                     }
                 });
             }
@@ -1143,43 +1196,43 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const intValue = parseInt(value);
 
                 const source: FormFieldError.Source = {
-                    "type": "validator",
-                    "name": validatorName
+                    type: "validator",
+                    name: validatorName
                 };
 
                 if (isNaN(intValue)) {
                     const msgArgs = ["mustBeAnInteger"] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        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}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        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}`] as const;
 
                     errors.push({
-                        "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
-                        "errorMessageStr": msgStr(...msgArgs),
-                        "fieldIndex": undefined,
+                        errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                        errorMessageStr: msgStr(...msgArgs),
+                        fieldIndex: undefined,
                         source
                     });
 
@@ -1207,12 +1260,12 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 const msgArgs = [id<MessageKey>("notAValidOption")] as const;
 
                 errors.push({
-                    "errorMessage": <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": advancedMsgStr(...msgArgs),
-                    "fieldIndex": undefined,
-                    "source": {
-                        "type": "validator",
-                        "name": validatorName
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
+                    errorMessageStr: advancedMsgStr(...msgArgs),
+                    fieldIndex: undefined,
+                    source: {
+                        type: "validator",
+                        name: validatorName
                     }
                 });
             }
@@ -1225,3 +1278,79 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
     return { getErrors };
 }
+
+function getIsMultivaluedSingleField(params: { attribute: Attribute }) {
+    const { attribute } = params;
+
+    return attribute.annotations.inputType?.startsWith("multiselect") ?? false;
+}
+
+export function getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
+    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 };
+}