disable 2fa

.env

@@ -6,8 +6,8 @@ VITE_DANAK_BASE_URL ='https://api.danakcorp.com'
 VITE_SOCKET_URL = 'wss://dmail-api.danakcorp.com/email'
 # VITE_SOCKET_URL = 'ws://192.168.1.118:4000/email'
 
-# VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
+VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
-VITE_BASE_URL = 'http://192.168.1.101:4000'
+# VITE_BASE_URL = 'http://192.168.1.101:4000'
 
 
 VITE_SERVICE_ID = 'e51afdc3-ea0b-49cf-8f49-2a6f131b024e'

src/langs/fa.json

@@ -150,7 +150,11 @@
     "2fa_step_2": "QR Code را اسکن کنید یا کد را به صورت دستی وارد کنید",
     "2fa_step_3": "کد 6 رقمی تولید شده توسط برنامه را وارد کنید",
     "note": "توجه",
-    "2fa_note": "کد های پشتیبان خود را در مکانی امن نگهداری کنید"
+    "2fa_note": "کد های پشتیبان خود را در مکانی امن نگهداری کنید",
+    "disable_2fa": "غیر فعال کردن دو مرحله ای",
+    "enter_2fa_code": "کد دو مرحله ای خود را وارد کنید",
+    "cancel": "انصراف",
+    "confirm_disable": "تایید غیر فعال سازی"
   },
   "success": "عملیات با موفقیت انجام شد",
   "attachment_select": "اضافه کردن فایل ضمیمه",

src/pages/setting/components/Enabled.tsx

@@ -0,0 +1,103 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Logout, TickCircle } from 'iconsax-react'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import { clx } from '@/helpers/utils'
+import { toast } from '@/components/Toast'
+import { ErrorType } from '@/helpers/types'
+import { useDisableTwoFactor } from '../hooks/useSettingData'
+
+const Enabled: FC = () => {
+
+    const { t } = useTranslation()
+    const [show, setShow] = useState(false)
+    const [token, setToken] = useState('')
+    const { mutate: disableTwoFactor } = useDisableTwoFactor()
+
+    const handleDisableTwoFactor = () => {
+        if (token.length !== 6) {
+            toast(t('setting.invalid_code_length'), 'error')
+            return
+        }
+
+        disableTwoFactor(token, {
+            onSuccess: () => {
+                setShow(false)
+                setToken('')
+                window.location.reload()
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message[0] || t('setting.2fa_disabled_failed'), 'error')
+            }
+        })
+    }
+
+    return (
+        <div>
+            <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
+                <div className='text-center py-8'>
+                    <div className='inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4'>
+                        <TickCircle size={32} color='#22c55e' />
+                    </div>
+                    <h2 className='text-lg font-semibold text-green-600 mb-2'>
+                        {t('setting.2fa_enabled_successfully')}
+                    </h2>
+                </div>
+
+                {
+                    show && (
+                        <div className='px-10 mt-10'>
+                            <Input
+                                label={t('setting.enter_2fa_code')}
+                                placeholder={t('setting.enter_2fa_code')}
+                                value={token}
+                                onChange={(e) => setToken(e.target.value)}
+                                maxLength={6}
+                            />
+                        </div>
+                    )
+                }
+
+                <div className={clx(
+                    'flex justify-center mt-10',
+                    !show && '-mt-5'
+                )}>
+                    {!show ? (
+                        <Button
+                            onClick={() => setShow(true)}
+                            className='w-fit px-6'
+                        >
+                            <div className='flex items-center gap-2'>
+                                <Logout size={20} color='white' />
+                                <span>{t('setting.disable_2fa')}</span>
+                            </div>
+                        </Button>
+                    ) : (
+                        <div className='flex gap-3'>
+                            <Button
+                                onClick={() => {
+                                    setShow(false)
+                                    setToken('')
+                                }}
+                                variant='secondary'
+                                className='w-fit px-6'
+                            >
+                                {t('setting.cancel')}
+                            </Button>
+                            <Button
+                                onClick={handleDisableTwoFactor}
+                                className='w-fit px-6'
+                                disabled={token.length !== 6}
+                            >
+                                {t('setting.confirm_disable')}
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Enabled

src/pages/setting/components/TwoFactor.tsx

@@ -8,6 +8,7 @@ import { ErrorType } from '../../../helpers/types'
 import { TickCircle, Scan, Key } from 'iconsax-react'
 import { TwoFactorSetupResponseType } from '../types/SettingTypes'
 import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
+import Enabled from './Enabled'
 
 const TwoFactor: FC = () => {
 
@@ -68,16 +69,7 @@ const TwoFactor: FC = () => {
 
     if (isEnabled) {
         return (
-            <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
+            <Enabled />
-                <div className='text-center py-8'>
-                    <div className='inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4'>
-                        <TickCircle size={32} color='#22c55e' />
-                    </div>
-                    <h2 className='text-lg font-semibold text-green-600 mb-2'>
-                        {t('setting.2fa_enabled_successfully')}
-                    </h2>
-                </div>
-            </div>
         )
     }
 

src/pages/setting/hooks/useSettingData.ts

@@ -38,3 +38,9 @@ export const useEnableTwoFactor = () => {
     mutationFn: (token: string) => api.enableTwoFactor(token),
   });
 };
+
+export const useDisableTwoFactor = () => {
+  return useMutation<TwoFactorEnableResponseType, Error, string>({
+    mutationFn: (token: string) => api.disableTwoFactor(token),
+  });
+};

src/pages/setting/service/SettingService.ts

@@ -30,3 +30,10 @@ export const enableTwoFactor = async (
   const { data } = await axios.post(`/auth/2fa/enable`, { token });
   return data;
 };
+
+export const disableTwoFactor = async (
+  token: string
+): Promise<TwoFactorEnableResponseType> => {
+  const { data } = await axios.post(`/auth/2fa/disable  `, { token });
+  return data;
+};