Added notifications to 2FA and fixed state

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import { Checkbox } from '@app/components/v2';
 
 import { useGetUser } from '../../../../hooks/api';
@@ -9,6 +10,7 @@ import updateMyMfaEnabled from '../../../../pages/api/user/updateMyMfaEnabled';
 export const SecuritySection = () => {
   const [isMfaEnabled, setIsMfaEnabled] = useState(false);
   const { data: user } = useGetUser();
+  const { createNotification } = useNotificationContext();
   
   useEffect(() => {
     if (user && typeof user.isMfaEnabled !== 'undefined') {
@@ -21,18 +23,27 @@ export const SecuritySection = () => {
       const newUser: User = await updateMyMfaEnabled({
         isMfaEnabled: state
       });
-      
+
       if (newUser) {
         setIsMfaEnabled(newUser.isMfaEnabled);
       }
+
+      createNotification({
+        text: `${newUser.isMfaEnabled ? 'Successfully turned on two-factor authentication.' : 'Successfully turned off two-factor authentication.'}`,
+        type: 'success'
+      });
     } catch (err) {
+      createNotification({
+        text: 'Something went wrong while toggling the two-factor authentication.',
+        type: 'error'
+      });
       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">
+      <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
         <p className="mb-4 mt-2 text-xl font-semibold">
           Two-factor Authentication
         </p>