fix: can redirect to password form from otp form

public/locales/en/authentication.json

@@ -22,7 +22,8 @@
     "resendCodeIn": "Resend code in",
     "moreMinute": "minute",
     "resendCode": "Resend code",
-    "confirmAndLogin": "Confirm & login"
+    "confirmAndLogin": "Confirm & login",
+    "loginWithPassword": "Login with password"
   },
   "completeSignUp": {
     "completeSignUp": "Complete Sign Up",

public/locales/fa/authentication.json

@@ -23,7 +23,8 @@
     "youHaveSuccessfullySignedIn": "ثبت نام با موفقیت انجام شد",
     "resendCodeIn": "ارسال مجدد کد تا",
     "moreMinute": "دقیقه دیگر",
-    "resendCode": "ارسال مجدد"
+    "resendCode": "ارسال مجدد",
+    "loginWithPassword": "ورود با رمز"
   },
   "completeSignUp": {
     "completeSignUp": "تکمیل ثبت نام",
@@ -63,4 +64,4 @@
     "redirectingTo": "در حال انتقال به",
     "redirecting": "درحال انتقال..."
   }
-}
+}

src/features/authentication/components/AuthenticationSteps/AuthenticationSteps.tsx

@@ -30,6 +30,7 @@ export const AuthenticationSteps = (): JSX.Element => {
   const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
     useState<string>('');
   const [memoryTokenRes, setMemoryTokenRes] = useState<GenerateTokenResponse>();
+  const [hasPassword, setHasPassword] = useState(false);
   const { login } = useAuth();
 
   const authFactory: AuthFactory = useMemo(() => {
@@ -83,6 +84,7 @@ export const AuthenticationSteps = (): JSX.Element => {
       case UserStatus.RegisteredWithPassword:
         setAuthMode('login');
         setCurrentStep('enterPassword');
+        setHasPassword(true);
 
         break;
     }
@@ -165,6 +167,8 @@ export const AuthenticationSteps = (): JSX.Element => {
           authMode={authMode}
           authType={authType}
           value={loginRegisterValue}
+          hasPassword={hasPassword}
+          onLoginWithPassword={() => setCurrentStep('enterPassword')}
         />
       )}
 

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -188,17 +188,17 @@ export const EnterPasswordForm = ({
           sx={{ my: 4 }}
         />
 
-      <Button
-        onClick={handleLoginWithOtp}
-        sx={{ width: 'auto', mb: 2 }}
-        variant="text"
-        loading={emailResendLoading || smsResendLoading}
-        endIcon={
-          <Icon Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight} />
-        }
-      >
-        {t('enterPassword.loginWithOneTimeCode')}
-      </Button>
+        <Button
+          onClick={handleLoginWithOtp}
+          sx={{ width: 'auto', mb: 2 }}
+          variant="text"
+          loading={emailResendLoading || smsResendLoading}
+          endIcon={
+            <Icon Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight} />
+          }
+        >
+          {t('enterPassword.loginWithOneTimeCode')}
+        </Button>
 
         <Stack spacing={1}>
           <Button loading={loginWithPassLoading}>

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Stack, Typography } from '@mui/material';
-import { Edit2 } from 'iconsax-react';
+import { ArrowLeft, ArrowRight, Edit2 } from 'iconsax-react';
 import DigitInput from '@/components/DigitsInput';
 import type { AuthFactory, AuthMode, AuthType } from '../../types/authTypes';
 import { useEffect, useState } from 'react';
@@ -31,6 +31,8 @@ interface OtpVerifyFormProps {
     tokenResponse: GenerateTokenResponse,
   ) => void;
   authFactory: AuthFactory;
+  hasPassword: boolean;
+  onLoginWithPassword: () => void;
 }
 
 export function OtpVerifyForm({
@@ -41,11 +43,13 @@ export function OtpVerifyForm({
   onEditValue,
   onOTPVerified,
   authFactory,
+  hasPassword,
+  onLoginWithPassword,
 }: OtpVerifyFormProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
   const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const [resendTimer, setResendTimer] = useState<number>(120);
   const [canResend, setCanResend] = useState(false);
   const toast = useToast();
@@ -219,6 +223,21 @@ export function OtpVerifyForm({
             onChange={(value) => setOtpCode(value)}
           />
 
+          {hasPassword && (
+            <Button
+              onClick={onLoginWithPassword}
+              sx={{ width: 'auto', mb: 2 }}
+              variant="text"
+              endIcon={
+                <Icon
+                  Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight}
+                />
+              }
+            >
+              {t('verify.loginWithPassword')}
+            </Button>
+          )}
+
           <Button type="submit" loading={loginSignUpLoading}>
             {authMode === 'register'
               ? t('verify.confirmAndContinue')