agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify the API of useUserProfileForm

Browse Source
This commit is contained in:
Joseph Garrone 2024-04-22 06:53:08 +02:00
parent 49f46c758a
commit 500f558658
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/login/lib/useUserProfileForm.tsx
View File

@ -6,7 +6,6 @@ import type { Attribute, Validators } from "keycloakify/login/kcContext/KcContex
import { useConstCallback } from "keycloakify/tools/useConstCallback"; import { useConstCallback } from "keycloakify/tools/useConstCallback";
import { emailRegexp } from "keycloakify/tools/emailRegExp"; import { emailRegexp } from "keycloakify/tools/emailRegExp";
import type { KcContext, PasswordPolicies } from "keycloakify/login/kcContext/KcContext"; import type { KcContext, PasswordPolicies } from "keycloakify/login/kcContext/KcContext";
import type { Param0 } from "tsafe";
import { assert, type Equals } from "tsafe/assert"; import { assert, type Equals } from "tsafe/assert";
import type { I18n } from "../i18n"; import type { I18n } from "../i18n";
@ -22,6 +21,7 @@ export type FormFieldState = {
index: number; index: number;
value: string; value: string;
displayableError: FormFieldError[]; displayableError: FormFieldError[];
attribute: Attribute;
}; };
export type FormState = { export type FormState = {
@ -65,7 +65,6 @@ export type ParamsOfUseUserProfileForm = {
export type ReturnTypeOfUseUserProfileForm = { export type ReturnTypeOfUseUserProfileForm = {
formState: FormState; formState: FormState;
dispatchFormAction: Dispatch<FormAction>; dispatchFormAction: Dispatch<FormAction>;
attributesWithPassword: Attribute[];
}; };
/** /**
@ -147,7 +146,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
"index": formFieldStates.length, "index": formFieldStates.length,
"fieldValues": state "fieldValues": state
}), }),
"hasLostFocusAtLeastOnce": false "hasLostFocusAtLeastOnce": false,
"attribute": formFieldStates[0].attribute
}); });
return state; return state;
@ -192,7 +192,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
}, },
useMemo(function getInitialState(): State { useMemo(function getInitialState(): State {
const initialFormFieldValues = (() => { const initialFormFieldValues = (() => {
const initialFormFieldValues: Param0<typeof getErrors>["fieldValues"] = []; const initialFormFieldValues: { name: string; index: number; value: string; attribute: Attribute }[] = [];
for (const attribute of attributesWithPassword) { for (const attribute of attributesWithPassword) {
handle_multi_valued_attribute: { handle_multi_valued_attribute: {
@ -226,7 +226,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
initialFormFieldValues.push({ initialFormFieldValues.push({
"name": attribute.name, "name": attribute.name,
index, index,
"value": values[index] "value": values[index],
attribute
}); });
} }
@ -236,23 +237,25 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
initialFormFieldValues.push({ initialFormFieldValues.push({
"name": attribute.name, "name": attribute.name,
"index": 0, "index": 0,
"value": attribute.value ?? "" "value": attribute.value ?? "",
attribute
}); });
} }
return initialFormFieldValues; return initialFormFieldValues;
})(); })();
const initialState: State = initialFormFieldValues.map(({ name, index, value }) => ({ const initialState: State = initialFormFieldValues.map(({ name, index, value, attribute }) => ({
name, name,
index, index,
value, value,
"errors": getErrors({ "errors": getErrors({
"name": name, name,
index, index,
"fieldValues": initialFormFieldValues "fieldValues": initialFormFieldValues
}), }),
"hasLostFocusAtLeastOnce": false "hasLostFocusAtLeastOnce": false,
attribute
})); }));
return initialState; return initialState;
@ -261,11 +264,12 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
const formState: FormState = useMemo( const formState: FormState = useMemo(
() => ({ () => ({
"formFieldStates": state.map(({ name, index, value, errors, hasLostFocusAtLeastOnce }) => ({ "formFieldStates": state.map(({ name, index, value, errors, hasLostFocusAtLeastOnce, attribute }) => ({
name, name,
index, index,
value, value,
"displayableError": hasLostFocusAtLeastOnce ? errors : [] "displayableError": hasLostFocusAtLeastOnce ? errors : [],
attribute
})), })),
"isFormSubmittable": state.every(({ errors }) => errors.length === 0) "isFormSubmittable": state.every(({ errors }) => errors.length === 0)
}), }),
@ -274,8 +278,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
return { return {
formState, formState,
dispatchFormAction, dispatchFormAction
attributesWithPassword
}; };
} }