Checkpoint weaving frontend and backend MFA

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -1,14 +1,35 @@
+import { useEffect, useState } from 'react';
+
 import { Checkbox } from '@app/components/v2';
 
-type Props = {
-  isTwoFAEnabled?: boolean;
-  onIsTwoFAEnabledChange: (state: boolean) => void;
-};
+import { useGetUser } from '../../../../hooks/api';
+import { User } from '../../../../hooks/api/types';
+import updateMyMfaEnabled from '../../../../pages/api/user/updateMyMfaEnabled';
 
-export const SecuritySection = ({
-  isTwoFAEnabled,
-  onIsTwoFAEnabledChange
-}: Props) => {
+export const SecuritySection = () => {
+  const [isMfaEnabled, setIsMfaEnabled] = useState(false);
+  const { data: user } = useGetUser();
+  
+  useEffect(() => {
+    if (user && typeof user.isMfaEnabled !== 'undefined') {
+      setIsMfaEnabled(user.isMfaEnabled);
+    }
+  }, [user]);
+  
+  const toggleMfa = async (state: boolean) => {
+    try {
+      const newUser: User = await updateMyMfaEnabled({
+        isMfaEnabled: state
+      });
+      
+      if (newUser) {
+        setIsMfaEnabled(newUser.isMfaEnabled);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
   return (
     <form>
       <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
@@ -18,9 +39,9 @@ export const SecuritySection = ({
         <Checkbox
           className="data-[state=checked]:bg-primary"
           id="isTwoFAEnabled"
-          isChecked={isTwoFAEnabled}
+          isChecked={isMfaEnabled}
           onCheckedChange={(state) => {
-            onIsTwoFAEnabledChange(state as boolean);
+            toggleMfa(state as boolean);
           }}
         >
           Enable 2-factor authentication via your personal email.