two factor authentication on fn

Author: Dawaic6

src/Mutations/2faMutation.tsx

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const EnableTwoFactorAuth = gql`
+  mutation EnableTwoFactorAuth($email: String!) {
+    enableTwoFactorAuth(email: $email)
+  }
+`;
+export const VerifyOneTimeCode = gql`
+  mutation VerifyOneTimeCode($email: String!, $code: String!) {
+    verifyOneTimeCode(email: $email, code: $code)
+  }
+`;
+export const DisableTwoFactorAuth = gql`
+  mutation DisableTwoFactorAuth($email: String!) {
+    disableTwoFactorAuth(email: $email)
+  }
+`;

src/pages/Settings.tsx

@@ -10,6 +10,10 @@ import {
   updatePushNotifications,
   updateEmailNotifications,
 } from '../Mutations/notificationMutation';
+import {
+  EnableTwoFactorAuth,
+  DisableTwoFactorAuth,
+} from '../Mutations/2faMutation';
 import {
   updatedEmailNotifications,
   updatedPushNotifications,
@@ -24,6 +28,10 @@ function Settings() {
   const lan = getLanguage();
   const { colorTheme, setTheme } = useContext(ThemeContext);
   const { user } = useContext(UserContext);
+  const [isTwoFactorEnabled, setIsTwoFactorEnabled] = useState(false);
+  const [otpCode, setOtpCode] = useState('');
+  const [enableTwoFactorAuth] = useMutation(EnableTwoFactorAuth);
+  const [disableTwoFactorAuth] = useMutation(DisableTwoFactorAuth);
   const [updateEmailNotificationsMutation] = useMutation(
     updateEmailNotifications,
   );
@@ -42,20 +50,29 @@ function Settings() {
   const [emailEnabled, setEmailEnabled] = useState(
     data?.getUpdatedEmailNotifications || false,
   );
-
+  const handleEnableTwoFactor = async () => {
+    try {
+      await enableTwoFactorAuth({ variables: { email: user?.email } });
+      setIsTwoFactorEnabled(true);
+    } catch (error) {}
+  };
+  const handleDisableTwoFactor = async () => {
+    try {
+      await disableTwoFactorAuth({ variables: { email: user?.email } });
+      setIsTwoFactorEnabled(false);
+    } catch (error) {}
+  };
   const handleThemeChange = (e: { target: { value: any } }) => {
     const { value } = e.target;
     setTheme(value);
     localStorage.setItem('color-theme', colorTheme);
   };
   const defaultTheme: any = colorTheme;
   const userLang = window.navigator.language;
-
   const handleLanChange = (e: { target: { value: any } }) => {
     const { value } = e.target;
     i18next.changeLanguage(value);
   };
-
   const handleEmailNotificationChange = async () => {
     try {
       const { data } = await updateEmailNotificationsMutation({
@@ -67,7 +84,6 @@ function Settings() {
       return `Error updating email notifications:${error}`;
     }
   };
-
   const handlePushNotificationChange = async () => {
     try {
       const { data: pushData } = await updatePushNotificationsMutation({
@@ -79,25 +95,21 @@ function Settings() {
       return `Error updating push notifications: ${error}`;
     }
   };
-
   useEffect(() => {
     if (data?.getUpdatedEmailNotifications !== undefined) {
       setEmailEnabled(data.getUpdatedEmailNotifications);
     }
   }, [data]);
-
   useEffect(() => {
     if (pushData?.getUpdatedPushNotifications !== undefined) {
       setPushEnabled(pushData.getUpdatedPushNotifications);
     }
   }, [pushData]);
-
   useEffect(() => {
     if (lanRef.current) {
       lanRef.current.value = lan;
     }
   }, []);
-
   return (
     <div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg">
       <div className="flex flex-row justify-center pt-10">
@@ -220,15 +232,28 @@ function Settings() {
                   {t('Privacy and Security')}
                 </h1>
                 <p className="text-sm text-gray-600 dark:text-dark-text-fill">
-                  {t('Privacy and Security')}
+                  {t('Secure your account with two-factor authentication')}
                 </p>
               </div>
-              <Link
-                className="ml-auto mt-2 text-xs md:text-base text-gray-600 dark:text-dark-text-fill"
-                to="#link"
+              <Switch
+                checked={isTwoFactorEnabled}
+                onChange={
+                  isTwoFactorEnabled
+                    ? handleDisableTwoFactor
+                    : handleEnableTwoFactor
+                }
+                className={`ml-auto border ${
+                  isTwoFactorEnabled ? 'dark:border-primary' : ''
+                } relative inline-flex h-6 w-12 items-center rounded-full`}
               >
-                <h4>{t('Change')}</h4>
-              </Link>
+                <span
+                  className={`${
+                    isTwoFactorEnabled
+                      ? 'bg-primary translate-x-6'
+                      : 'bg-gray-300 translate-x-1'
+                  } inline-block h-4 w-4 transform rounded-full`}
+                />
+              </Switch>
             </li>
             <li className="flex items-center pt-2 pb-1">
               <div className="w-[33vw]">
@@ -252,5 +277,4 @@ function Settings() {
     </div>
   );
 }
-
 export default Settings;