Added notifications to 2FA and fixed state

frontend/src/components/login/MFAStep.tsx

@@ -60,6 +60,7 @@ export default function MFAStep({
 }): JSX.Element {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingResend, setIsLoadingResend] = useState(false);
   const [mfaCode, setMfaCode] = useState('');
   const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
 
@@ -103,9 +104,12 @@ export default function MFAStep({
   
   const handleResendMfaCode = async () => {
     try {
+      setIsLoadingResend(true);
       await sendMfaToken.mutateAsync({ email });
+      setIsLoadingResend(false);
     } catch (err) {
       console.error(err);
+      setIsLoadingResend(false);
     }
   }
 
@@ -137,13 +141,13 @@ export default function MFAStep({
           <span className="text-bunker-400">{t('mfa:step2-resend-alert')}</span>
           <u
             className={`font-normal ${
-              isLoading
+              isLoadingResend
                 ? 'text-bunker-400'
                 : 'text-primary-700 hover:text-primary duration-200'
             }`}
           >
             <button disabled={isLoading} onClick={() => handleResendMfaCode()} type="button">
-              {isLoading
+              {isLoadingResend
                 ? t('mfa:step2-resend-progress')
                 : t('mfa:step2-resend-submit')}
             </button>

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') {
@@ -25,14 +27,23 @@ export const SecuritySection = () => {
       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>