login with two factor

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,14 +40,18 @@ const Login: FC = () => {
         onSubmit(values) {
             loginWithPassword.mutate(values, {
                 onSuccess(data) {
-                    setToken(data?.data?.accessToken?.token)
-                    setRefreshToken(data?.data?.refreshToken?.token)
-                    const redirectUrl = getRedirectUrl();
-                    if (redirectUrl) {
-                        window.location.href = redirectUrl;
-                        return;
+                    if (data?.data?.requires2FA) {
+                        setShowTwoFactor(true)
+                    } else {
+                        setToken(data?.data?.accessToken?.token)
+                        setRefreshToken(data?.data?.refreshToken?.token)
+                        const redirectUrl = getRedirectUrl();
+                        if (redirectUrl) {
+                            window.location.href = redirectUrl;
+                            return;
+                        }
+                        window.location.href = Paths.received
                     }
-                    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'