keycloakify 10.0.0-rc.4 → 10.0.0-rc.41

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,19 +66,20 @@ 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;
+        };
     };
-};
+
+assert<Extract<KcContext.Register, { pageId: "register.ftl" }> extends KcContextLike ? true : false>();
 
 export type ParamsOfUseUserProfileForm = {
     kcContext: KcContextLike;
@@ -102,17 +105,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 +138,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 +152,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 +180,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 +206,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 +222,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 +234,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 +248,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 +263,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 +320,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 +335,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                         const { min: minStr } = validator;
 
-                        if (minStr === undefined) {
+                        if (!minStr) {
                             break apply_validator_min_range;
                         }
 
@@ -324,7 +348,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                     out.push({
                         attribute,
-                        "valueOrValues": values
+                        valueOrValues: values
                     });
 
                     continue;
@@ -332,7 +356,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                 out.push({
                     attribute,
-                    "valueOrValues": attribute.value ?? ""
+                    valueOrValues: attribute.value ?? ""
                 });
             }
 
@@ -340,14 +364,15 @@ 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
             }))
         };
 
@@ -369,7 +394,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
                         const { kcNumberFormat } = attribute.html5DataAnnotations ?? {};
 
-                        if (kcNumberFormat === undefined) {
+                        if (!kcNumberFormat) {
                             break apply_formatters;
                         }
 
@@ -381,8 +406,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 +420,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 +446,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 +507,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 +518,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 +533,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 +554,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                 unFormat_number: {
                     const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                    if (kcNumberUnFormat === undefined) {
+                    if (!kcNumberUnFormat) {
                         break unFormat_number;
                     }
 
@@ -534,7 +572,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 +610,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 +624,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 +636,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 +664,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 +685,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 +703,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 +717,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 +739,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 +770,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -740,12 +783,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 +798,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -768,12 +811,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 +826,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -798,12 +841,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 +856,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -828,12 +871,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 +886,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                     const policy = passwordPolicies[policyName];
 
-                    if (policy === undefined) {
+                    if (!policy) {
                         break check_password_policy_x;
                     }
 
@@ -856,12 +899,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 +920,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 +932,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                         unFormat_number: {
                             const { kcNumberUnFormat } = attribute.html5DataAnnotations ?? {};
 
-                            if (kcNumberUnFormat === undefined) {
+                            if (!kcNumberUnFormat) {
                                 break unFormat_number;
                             }
 
@@ -899,6 +942,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 +953,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 +974,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 +983,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 +995,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 +1028,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 +1052,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 +1067,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
                 const validator = validators[validatorName];
 
-                if (validator === undefined) {
+                if (!validator) {
                     break validator_x;
                 }
 
@@ -1027,28 +1078,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 +1127,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 +1166,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 +1194,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 +1258,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 +1276,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 };
+}