login with two factor

src/langs/fa.json

@@ -244,6 +244,8 @@
     "enter_mobile_number": "شماره موبایل خود را وارد کنید",
     "try_again": "ارسال مجدد",
     "toast_resend_code": "کد جدیدی برای شما ارسال شد",
-    "old_version": "نسخه قدیمی داشبورد"
+    "old_version": "نسخه قدیمی داشبورد",
+    "twoFactorToken": "کد دو مرحله ای",
+    "enter_twoFactorToken": "کد دو مرحله ای خود را وارد کنید"
   }
 }

src/pages/auth/Login.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import LogoImage from '../../assets/images/logo.svg'
 import LogoSmallImage from '../../assets/images/logo-small.svg'
 import Input from '../../components/Input'
@@ -16,16 +16,19 @@ import { Paths } from '../../utils/Paths'
 type LoginFormType = {
     email: string;
     password: string;
+    twoFactorToken?: string;
 }
 
 const Login: FC = () => {
     const { t } = useTranslation('global')
     const loginWithPassword = useLoginWithPassword()
+    const [showTwoFactor, setShowTwoFactor] = useState(false)
 
     const formik = useFormik<LoginFormType>({
         initialValues: {
             email: '',
-            password: ''
+            password: '',
+            twoFactorToken: undefined,
         },
         validationSchema: Yup.object({
             email: Yup.string()
@@ -37,6 +40,9 @@ const Login: FC = () => {
         onSubmit(values) {
             loginWithPassword.mutate(values, {
                 onSuccess(data) {
+                    if (data?.data?.requires2FA) {
+                        setShowTwoFactor(true)
+                    } else {
                         setToken(data?.data?.accessToken?.token)
                         setRefreshToken(data?.data?.refreshToken?.token)
                         const redirectUrl = getRedirectUrl();
@@ -45,6 +51,7 @@ const Login: FC = () => {
                             return;
                         }
                         window.location.href = Paths.received
+                    }
                 },
                 onError(error: ErrorType) {
                     toast(error?.response?.data?.error?.message[0], 'error')
@@ -104,6 +111,16 @@ const Login: FC = () => {
                                     </div>
                                 </div>
 
+                                {showTwoFactor && (
+                                    <div className='mt-6'>
+                                        <Input
+                                            label={t('auth.twoFactorToken')}
+                                            placeholder={t('auth.enter_twoFactorToken')}
+                                            {...formik.getFieldProps('twoFactorToken')}
+                                        />
+                                    </div>
+                                )}
+
                                 <Button
                                     label={t('auth.login')}
                                     className='mt-8'