keycloakify 10.0.0-rc.3 → 10.0.0-rc.30

package/src/login/lib/useUserProfileForm.tsx

@@ -1,14 +1,14 @@
 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 { KcContext, PasswordPolicies, Attribute, Validators } from "keycloakify/login/KcContext";
+import type { MessageKey } from "keycloakify/login/i18n";
 import type { I18n } from "../i18n";
 
 export type FormFieldError = {
@@ -67,7 +67,7 @@ export type FormAction =
 export type KcContextLike = {
     messagesPerField: Pick<KcContext.Common["messagesPerField"], "existsError" | "get">;
     profile: {
-        attributes: Attribute[];
+        attributesByName: Record<string, Attribute>;
         html5DataAnnotations?: Record<string, string>;
     };
     passwordRequired?: boolean;
@@ -102,17 +102,16 @@ namespace internal {
     };
 }
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export function useUserProfileForm(params: ParamsOfUseUserProfileForm): 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`
             }))
     });
 
@@ -136,7 +135,11 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
             const attributes = (() => {
                 retrocompat_patch: {
-                    if ("profile" in kcContext && "attributes" in kcContext.profile && kcContext.profile.attributes.length !== 0) {
+                    if (
+                        "profile" in kcContext &&
+                        "attributesByName" in kcContext.profile &&
+                        Object.keys(kcContext.profile.attributesByName).length !== 0
+                    ) {
                         break retrocompat_patch;
                     }
 
@@ -146,15 +149,15 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                             .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": (() => {
+                                    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";
@@ -174,15 +177,15 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                             .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": (() => {
+                                    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";
@@ -200,15 +203,15 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                         //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"
+                                name: "email",
+                                displayName: id<`\${${MessageKey}}`>(`\${email}`),
+                                required: true,
+                                value: (kcContext.email as any).value ?? "",
+                                html5DataAnnotations: {},
+                                readOnly: false,
+                                validators: {},
+                                annotations: {},
+                                autocomplete: "email"
                             })
                         ];
                     }
@@ -216,7 +219,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     assert(false, "Unable to mock user profile from the current kcContext");
                 }
 
-                return kcContext.profile.attributes.map(attribute_pre_group_patch => {
+                return Object.values(kcContext.profile.attributesByName).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 & {
@@ -228,11 +231,11 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                         return id<Attribute>({
                             ...rest,
-                            "group": {
-                                "name": group,
-                                "displayHeader": groupDisplayHeader,
-                                "displayDescription": groupDisplayDescription,
-                                "html5DataAnnotations": {}
+                            group: {
+                                name: group,
+                                displayHeader: groupDisplayHeader,
+                                displayDescription: groupDisplayDescription,
+                                html5DataAnnotations: {}
                             }
                         });
                     }
@@ -242,7 +245,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
             })();
 
             for (const attribute of attributes) {
-                syntheticAttributes.push(attribute);
+                syntheticAttributes.push(structuredCloneButFunctions(attribute));
 
                 add_password_and_password_confirm: {
                     if (!kcContext.passwordRequired) {
@@ -257,38 +260,56 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                     syntheticAttributes.push(
                         {
-                            "name": "password",
-                            "displayName": id<`\${${MessageKey}}`>("${password}"),
-                            "required": true,
-                            "readOnly": false,
-                            "validators": {},
-                            "annotations": {},
-                            "autocomplete": "new-password",
-                            "html5DataAnnotations": {},
+                            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 {})
+                            ...({ groupAnnotations: {} } as {})
                         },
                         {
-                            "name": "password-confirm",
-                            "displayName": id<`\${${MessageKey}}`>("${passwordConfirm}"),
-                            "required": true,
-                            "readOnly": false,
-                            "validators": {},
-                            "annotations": {},
-                            "html5DataAnnotations": {},
-                            "autocomplete": "new-password",
+                            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 {})
+                            ...({ groupAnnotations: {} } as {})
                         }
                     );
                 }
             }
 
+            // NOTE: Consistency patch
+            syntheticAttributes.forEach(attribute => {
+                if (getIsMultivaluedSingleField({ attribute })) {
+                    attribute.multivalued = true;
+                }
+
+                if (attribute.multivalued) {
+                    attribute.values ??= attribute.value !== undefined ? [attribute.value] : [];
+                    delete attribute.value;
+                } else {
+                    attribute.value ??= attribute.values?.[0];
+                    delete attribute.values;
+                }
+            });
+
             return syntheticAttributes;
         })();
 
         const initialFormFieldState = (() => {
-            const out: { attribute: Attribute; valueOrValues: string | string[] }[] = [];
+            const out: {
+                attribute: Attribute;
+                valueOrValues: string | string[];
+            }[] = [];
 
             for (const attribute of syntheticAttributes) {
                 handle_multi_valued_attribute: {
@@ -296,10 +317,10 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                         break handle_multi_valued_attribute;
                     }
 
-                    const values = attribute.values ?? [""];
+                    const values = attribute.values?.length ? attribute.values : [""];
 
                     apply_validator_min_range: {
-                        if (attribute.annotations.inputType?.startsWith("multiselect")) {
+                        if (getIsMultivaluedSingleField({ attribute })) {
                             break apply_validator_min_range;
                         }
 
@@ -311,7 +332,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                         const { min: minStr } = validator;
 
-                        if (minStr === undefined) {
+                        if (!minStr) {
                             break apply_validator_min_range;
                         }
 
@@ -324,7 +345,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                     out.push({
                         attribute,
-                        "valueOrValues": values
+                        valueOrValues: values
                     });
 
                     continue;
@@ -332,7 +353,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                 out.push({
                     attribute,
-                    "valueOrValues": attribute.value ?? ""
+                    valueOrValues: attribute.value ?? ""
                 });
             }
 
@@ -340,36 +361,37 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
         })();
 
         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
             }))
         };
 
         return initialState;
     }, []);
 
-    const [state, dispatchFormAction] = useReducer(function reducer(state: internal.State, params: FormAction): internal.State {
-        const formFieldState = state.formFieldStates.find(({ attribute }) => attribute.name === params.name);
+    const [state, dispatchFormAction] = useReducer(function reducer(state: internal.State, formAction: FormAction): internal.State {
+        const formFieldState = state.formFieldStates.find(({ attribute }) => attribute.name === formAction.name);
 
         assert(formFieldState !== undefined);
 
         (() => {
-            switch (params.action) {
+            switch (formAction.action) {
                 case "update":
-                    formFieldState.valueOrValues = params.valueOrValues;
+                    formFieldState.valueOrValues = formAction.valueOrValues;
 
                     apply_formatters: {
                         const { attribute } = formFieldState;
 
                         const { kcNumberFormat } = attribute.html5DataAnnotations ?? {};
 
-                        if (kcNumberFormat === undefined) {
+                        if (!kcNumberFormat) {
                             break apply_formatters;
                         }
 
@@ -381,8 +403,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     }
 
                     formFieldState.errors = getErrors({
-                        "attributeName": params.name,
-                        "formFieldStates": state.formFieldStates
+                        attributeName: formAction.name,
+                        formFieldStates: state.formFieldStates
                     });
 
                     update_password_confirm: {
@@ -390,21 +412,21 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                             break update_password_confirm;
                         }
 
-                        if (params.name !== "password") {
+                        if (formAction.name !== "password") {
                             break update_password_confirm;
                         }
 
                         state = reducer(state, {
-                            "action": "update",
-                            "name": "password-confirm",
-                            "valueOrValues": params.valueOrValues
+                            action: "update",
+                            name: "password-confirm",
+                            valueOrValues: formAction.valueOrValues
                         });
                     }
 
                     return;
                 case "focus lost":
                     if (formFieldState.hasLostFocusAtLeastOnce instanceof Array) {
-                        const { fieldIndex } = params;
+                        const { fieldIndex } = formAction;
                         assert(fieldIndex !== undefined);
                         formFieldState.hasLostFocusAtLeastOnce[fieldIndex] = true;
                         return;
@@ -413,23 +435,23 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     formFieldState.hasLostFocusAtLeastOnce = true;
                     return;
             }
-            assert<Equals<typeof params, never>>(false);
+            assert<Equals<typeof formAction, never>>(false);
         })();
 
-        return state;
+        return { ...state };
     }, initialState);
 
     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 +504,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]
     );
@@ -501,7 +523,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 +544,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 unFormat_number: {
                     const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                    if (kcNumberUnFormat === undefined) {
+                    if (!kcNumberUnFormat) {
                         break unFormat_number;
                     }
 
@@ -534,7 +562,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 +600,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 +614,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 +626,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 +654,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 +675,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 +693,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 +707,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 +729,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 +760,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -740,12 +773,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 +788,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -768,12 +801,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 +816,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -798,12 +831,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 +846,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -828,12 +861,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 +876,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -856,12 +889,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 +910,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 +922,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                         unFormat_number: {
                             const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                            if (kcNumberUnFormat === undefined) {
+                            if (!kcNumberUnFormat) {
                                 break unFormat_number;
                             }
 
@@ -899,6 +932,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 +943,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 +964,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 +973,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 +985,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 +1018,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 +1042,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 +1057,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                 const validator = validators[validatorName];
 
-                if (validator === undefined) {
+                if (!validator) {
                     break validator_x;
                 }
 
@@ -1027,28 +1068,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 +1117,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 +1156,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 +1184,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 +1248,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 +1266,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 };
+}