From fe2148730a65aee5f189e3ec8ed5ad7d6e8a2617 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Sun, 13 Oct 2024 09:32:05 +0800
Subject: [PATCH] MFA: Fix factors dialog closing when factors re-render.
 Removed debugging line setting the popup to Infinite

---
 .../mfa/multi-factor-auth-list.tsx            |  4 +-
 .../mfa/multi-factor-auth-setup-dialog.tsx    | 55 ++++++++++---------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx
index 598cbcf57..cf74b4d61 100644
--- a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx
@@ -168,7 +168,6 @@ function ConfirmUnenrollFactorModal(
         error: (error: string) => {
           return error;
         },
-        duration: Infinity
       });
     },
     [props, t, unEnroll],
@@ -245,9 +244,8 @@ function FactorsTable({
 
             <td>
               <Badge
-                variant={'info'}
                 className={'inline-flex capitalize'}
-                color={factor.status === 'verified' ? 'success' : 'normal'}
+                variant={factor.status === 'verified' ? 'success' : 'outline'}
               >
                 {factor.status}
               </Badge>
diff --git a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
index 10a27bc89..b3c02a559 100644
--- a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
@@ -23,6 +23,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@kit/ui/dialog';
 import {
   Form,
@@ -56,36 +57,36 @@ export function MultiFactorAuthSetupDialog(props: { userId: string }) {
   }, [t]);
 
   return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>
-        <Trans i18nKey={'account:setupMfaButtonLabel'} />
-      </Button>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Trans i18nKey={'account:setupMfaButtonLabel'} />
+        </Button>
+      </DialogTrigger>
 
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent
-          onInteractOutside={(e) => e.preventDefault()}
-          onEscapeKeyDown={(e) => e.preventDefault()}
-        >
-          <DialogHeader>
-            <DialogTitle>
-              <Trans i18nKey={'account:setupMfaButtonLabel'} />
-            </DialogTitle>
+      <DialogContent
+        onInteractOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'account:setupMfaButtonLabel'} />
+          </DialogTitle>
 
-            <DialogDescription>
-              <Trans i18nKey={'account:multiFactorAuthDescription'} />
-            </DialogDescription>
-          </DialogHeader>
+          <DialogDescription>
+            <Trans i18nKey={'account:multiFactorAuthDescription'} />
+          </DialogDescription>
+        </DialogHeader>
 
-          <div>
-            <MultiFactorAuthSetupForm
-              userId={props.userId}
-              onCancel={() => setIsOpen(false)}
-              onEnrolled={onEnrollSuccess}
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+        <div>
+          <MultiFactorAuthSetupForm
+            userId={props.userId}
+            onCancel={() => setIsOpen(false)}
+            onEnrolled={onEnrollSuccess}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }