feat: add OTP verification messages and improve error handling in login and registration forms

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",

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?"
+
 }

src/components/auth/login-form.tsx

@@ -26,10 +26,9 @@ const loginFormSchema = yup.object().shape({
 const LoginForm = () => {
   const { t } = useTranslation();
   const [errorMessage, setErrorMessage] = useState<string | null>(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"
                 />
               </div>
+              {errors.range_phone && (
+                <p className="text-red-500 text-sm mt-1">
+                  {t(errors.range_phone.message!)}
+                </p>
+              )}
+              {errors.phone_number && (
+                <p className="text-red-500 text-sm mt-1">
+                  {t(errors.phone_number.message!)}
+                </p>
+              )}
             </label>
             <PasswordInput
               label={t('form:input-label-password')}
               forgotPassHelpText={t('form:input-forgot-password-label')}
               {...register('password')}
-              error={t(errors?.password?.message!)}
+              error={errors?.password ? t(errors.password.message!) : ''}
               variant="outline"
               className="mb-4"
               forgotPageLink={Routes.forgotPassword}
@@ -117,7 +141,7 @@ const LoginForm = () => {
           </>
         )}
       </Form>
-      {errorMessage ? (
+      {errorMessage && (
         <Alert
           message={t(errorMessage)}
           variant="error"
@@ -125,21 +149,9 @@ const LoginForm = () => {
           className="mt-5"
           onClose={() => setErrorMessage(null)}
         />
-      ) : null}
+      )}
     </>
   );
 };
 
 export default LoginForm;
-
-{
-  /* {errorMsg ? (
-          <Alert
-            message={t(errorMsg)}
-            variant="error"
-            closeable={true}
-            className="mt-5"
-            onClose={() => setErrorMsg('')}
-          />
-        ) : null} */
-}

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')}
           </Button>
 
           {errorMessage && (