From d5bc377e3db148c892edc6488b5a957a2988e74b Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sun, 19 Feb 2023 20:11:24 -0800
Subject: [PATCH] Added notifications to 2FA and fixed state

---
 frontend/src/components/login/MFAStep.tsx         |  8 ++++++--
 .../SecuritySection/SecuritySection.tsx           | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/login/MFAStep.tsx b/frontend/src/components/login/MFAStep.tsx
index 0bd3a8927..5628b1a87 100644
--- a/frontend/src/components/login/MFAStep.tsx
+++ b/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>
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx
index 5a1e965a1..0d7902c60 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx
+++ b/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>