diff --git a/packages/frontend/src/pages/Profile/ChangePasswordForm.tsx b/packages/frontend/src/pages/Profile/ChangePasswordForm.tsx index d920374..3eb183d 100644 --- a/packages/frontend/src/pages/Profile/ChangePasswordForm.tsx +++ b/packages/frontend/src/pages/Profile/ChangePasswordForm.tsx @@ -7,10 +7,8 @@ import useTheme from "@mui/material/styles/useTheme"; import { type PasswordChangeFormData } from "./types"; import { passwordChangeFormSchema, - widgets, - advancedProperties, - validationRules, - validateForm, + passwordChangeUiSchema, + customValidate, } from "./constants"; interface ChangePasswordFormProps { @@ -38,18 +36,15 @@ const ChangePasswordForm: FC = ({ return ( { setFormData(formData); }} - customValidate={(formData, errors) => - validateForm(formData, errors, validationRules) - } > = { +export const passwordChangeUiSchema: UiSchema = { oldPassword: { - type: "password", + "ui:widget": CustomPasswordFieldWidget, }, newPassword: { - type: "password", + "ui:widget": CustomPasswordFieldWidget, + "ui:passwordStrengthConfig": { + hideStrengthBar: false, + hideRulesText: false, + }, }, confirmNewPassword: { - type: "password", + "ui:widget": CustomPasswordFieldWidget, }, }; -export const validationRules: ValidationRule[] = [ - { - field: "oldPassword", - test: (value) => !value, - message: "Required field", - }, - { - field: "newPassword", - test: (value) => !value, - message: "Required field", - }, - { - field: "confirmNewPassword", - test: (value) => !value, - message: "Required field", - }, - { - field: "confirmNewPassword", - test: (value, formData) => value !== formData.newPassword, - message: "Your passwords don't match. Please try again", - }, -]; - -export type ValidationRule = { - field: keyof T; - test: (value: T[keyof T] | undefined | null, formData: T) => boolean; - message: string; -}; - -export type ValidateFormErrors = { - [K in keyof T]?: boolean; -}; - -export const validateForm = ( - formData: T, - errors: FormValidation, - validationRules: ValidationRule[] -): FormValidation => { - const errorsAdded: ValidateFormErrors = {}; - - for (const rule of validationRules) { - const { field, test, message } = rule; - const value = formData?.[field]; - - if (test(value, formData)) { - if (!errorsAdded?.[field]) { - errors?.[field]?.addError(message); - errorsAdded[field] = true; - } - } +export const customValidate: CustomValidator< + PasswordUpdateForm, + RJSFSchema, + Record +> = (formData, errors) => { + if (formData?.confirmNewPassword !== formData?.newPassword) { + errors?.confirmNewPassword?.addError("Your passwords don't match."); + } + if (!validatePasswordScore(formData?.newPassword ?? "")) { + errors?.newPassword?.addError( + "Your password do not meet the security criteria." + ); } return errors; }; - -export default validateForm; diff --git a/packages/frontend/src/pages/Profile/index.tsx b/packages/frontend/src/pages/Profile/index.tsx index 1041aae..a59a90b 100644 --- a/packages/frontend/src/pages/Profile/index.tsx +++ b/packages/frontend/src/pages/Profile/index.tsx @@ -25,9 +25,9 @@ const ProfileScreen: FC = () => { const [isConfirmationModalOpen, setConfirmationModalOpen] = useState(false); const [formData, setFormData] = useState({ + fullName: "", + nickname: "", email: "", - firstName: "John", - lastName: "Smith", }); const [isLoadingSubmit, setLoadingSubmit] = useState(false); @@ -58,10 +58,16 @@ const ProfileScreen: FC = () => { }; useEffect(() => { - if (user && !formData.email) { - setFormData({ ...formData, email: (user as User).email }); + if (user) { + const form = user as User; + + setFormData({ + fullName: form.userProfile?.fullName || "", + nickname: form.userProfile?.nickname || "", + email: form.email || "", + }); } - }, [user, formData]); + }, [user]); return ( @@ -133,7 +139,7 @@ const ProfileScreen: FC = () => {