diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx index f12628027..adde9acf4 100644 --- a/src/components/Main/Authentication/Registration/index.tsx +++ b/src/components/Main/Authentication/Registration/index.tsx @@ -1,4 +1,4 @@ -import { KeyboardEvent, useEffect } from "react"; +import { KeyboardEvent, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { isValidPasswordFormat } from "../../../../utils/isPasswordFormatValid"; @@ -32,7 +32,7 @@ const validatePassword = (password: string): string | boolean => { } if (!isValidPasswordFormat(password)) { - return "Password must contain one special character"; + return "Password must contain one special character !@#$%^&*-"; } return true; @@ -52,7 +52,8 @@ export const Registration = () => { watch, setError, clearErrors, - formState: { errors, isValid }, + trigger, + formState: { errors, isValid, touchedFields }, setFocus } = useForm({ mode: "onChange", @@ -66,12 +67,11 @@ export const Registration = () => { errors: resultErrors } = useRegistration(); + const [responseStatus, setResponseStatus] = useState(); + useEffect(() => { if (resultErrors?.length > 0) { - setError("root", { - type: "validate", - message: resultErrors.map((x) => x.description).join("\r\n") - }); + setResponseStatus(resultErrors.map((x) => x.description).join("\n")); } }, [setError, resultErrors]); @@ -81,7 +81,7 @@ export const Registration = () => { useEffect(() => { watch(() => { - clearErrors(); + setResponseStatus(undefined); }); }, [clearErrors, watch]); @@ -95,6 +95,7 @@ export const Registration = () => { onSubmit(values); } }; + const errorMessage = Object.values(errors).length > 0 ? Object.values(errors)[0].message : ""; @@ -127,7 +128,13 @@ export const Registration = () => { defaultValue={""} rules={{ required: "Password is required", - validate: validatePassword + validate: (pass) => { + if (touchedFields.confirmPassword) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + trigger("confirmPassword"); + } + return validatePassword(pass); + } }} render={({ field }) => ( { /> {errorMessage && {errorMessage}} + {responseStatus && {responseStatus}} {isSucceed && ( User created successfully! )} diff --git a/src/components/Main/Authentication/styles.ts b/src/components/Main/Authentication/styles.ts index 94c28cb3a..7bbf34745 100644 --- a/src/components/Main/Authentication/styles.ts +++ b/src/components/Main/Authentication/styles.ts @@ -114,6 +114,7 @@ export const InputForm = styled.div` display: flex; flex-direction: column; gap: 12px; + max-width: 250px; `; export const InfoMessage = styled.div` diff --git a/src/utils/isPasswordFormatValid.ts b/src/utils/isPasswordFormatValid.ts index 2b5c9ed94..f5aed159b 100644 --- a/src/utils/isPasswordFormatValid.ts +++ b/src/utils/isPasswordFormatValid.ts @@ -1,5 +1,6 @@ +// password should have at least 6 symbols and could be alphanumeric with at least one spec symbol const PASSWORD_REGEX = - /^(?=.*[A-Za-z0-9])(?=.*[!@#$%^&*])[A-Za-z0-9!@#$%^&*]{6,}$/gm; + /^(?=.*[A-Za-z0-9])(?=.*[!@#$%^&*-])[A-Za-z0-9!@#$%^&*-]{6,}$/gm; export const isValidPasswordFormat = (password: string): boolean => { return new RegExp(PASSWORD_REGEX).test(password);