From cce8cd29f0e3a82acc8f271ab5aef8e223e18c2d Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sun, 12 Jan 2025 18:44:40 +0330 Subject: [PATCH] feat: add OTP verification messages and improve error handling in login and registration forms --- package.json | 1 + public/locales/en/form.json | 6 +- src/components/auth/login-form.tsx | 70 +++++++++++++---------- src/components/auth/registration-form.tsx | 2 +- 4 files changed, 48 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 04e9d85..a11777d 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "camelcase-keys": "9.1.2", "classnames": "2.3.2", "cookie": "0.6.0", + "date-fns": "^4.1.0", "dayjs": "1.11.10", "framer-motion": "10.16.4", "i18next": "23.6.0", diff --git a/public/locales/en/form.json b/public/locales/en/form.json index 8e9736a..406ee48 100644 --- a/public/locales/en/form.json +++ b/public/locales/en/form.json @@ -759,5 +759,9 @@ "error-minimum-balance-is-required": "Minimum balance is required", "error-maximum-balance-type": "Maximum balance number or 'over' text", "error-maximum-balance-is-required": "Maximum balance is required", - "text-save-seller-information": "Save Seller Information" + "text-save-seller-information": "Save Seller Information", + "otp-verification-title" : "Verification code", + "otp-verification-description": "Please enter the verification code sent to your phone via WhatsApp to complete your registration.", +"didnt-receive-code": "Didn't receive the code?" + } diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx index 41d354f..edb708d 100644 --- a/src/components/auth/login-form.tsx +++ b/src/components/auth/login-form.tsx @@ -26,10 +26,9 @@ const loginFormSchema = yup.object().shape({ const LoginForm = () => { const { t } = useTranslation(); const [errorMessage, setErrorMessage] = useState(null); - const { mutate: login, isLoading, error } = useLogin(); + const { mutate: login, isLoading } = useLogin(); function onSubmit({ phone_number, range_phone, password }: LoginInput) { - login( { phone_number: range_phone + phone_number, @@ -38,21 +37,36 @@ const LoginForm = () => { }, { onSuccess: (data) => { - setAuthCredentials(data.token) + setAuthCredentials(data.token); Router.push(Routes.dashboard); - // if (data?.token) { - // if (hasAccess(allowedRoles, data?.permissions)) { - // setAuthCredentials(data?.token, data?.permissions, data?.role); - // return; - // } - // setErrorMessage('form:error-enough-permission'); - // } else { - // setErrorMessage('form:error-credential-wrong'); - // } + // Uncomment and adjust the following if you need to handle permissions + /* + if (data?.token) { + if (hasAccess(allowedRoles, data?.permissions)) { + setAuthCredentials(data?.token, data?.permissions, data?.role); + return; + } + setErrorMessage('form:error-enough-permission'); + } else { + setErrorMessage('form:error-credential-wrong'); + } + */ }, - onError: (err) => { - console.log(err); + onError: (err: any) => { + // Extract the error message from the server response + let message = 'form:error-credential-wrong'; // Default error message + + if (err.response && err.response.data && err.response.data.message) { + message = err.response.data.message; + } else if (err.message) { + message = err.message; + } + + // Set the error message state + setErrorMessage(message); + + console.error('Login error:', err); }, }, ); @@ -84,12 +98,22 @@ const LoginForm = () => { className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none flex-1 bg-gray-100 border-none outline-none bg-transparent text-gray-800 p-2" /> + {errors.range_phone && ( +

+ {t(errors.range_phone.message!)} +

+ )} + {errors.phone_number && ( +

+ {t(errors.phone_number.message!)} +

+ )} { )} - {errorMessage ? ( + {errorMessage && ( { className="mt-5" onClose={() => setErrorMessage(null)} /> - ) : null} + )} ); }; export default LoginForm; - -{ - /* {errorMsg ? ( - setErrorMsg('')} - /> - ) : null} */ -} diff --git a/src/components/auth/registration-form.tsx b/src/components/auth/registration-form.tsx index 482fc00..2ca888e 100644 --- a/src/components/auth/registration-form.tsx +++ b/src/components/auth/registration-form.tsx @@ -317,7 +317,7 @@ const RegistrationForm = () => { loading={OTPloading} disabled={OTPloading} > - {t('form:confirm-otp')} + {t('form:button-label-submit')} {errorMessage && (