Basic disabling of TFA

src/components/dashboard/sidebar/organization-selector.tsx

@@ -95,7 +95,7 @@ const OrganizationSelector = (): ReactElement => {
                     <ChevronsUpDownIcon className="ml-2 w-4 h-4 shrink-0 opacity-50" />
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="p-0 w-52">
+            <PopoverContent className="w-56 p-0">
                 <Command>
                     <CommandInput placeholder="Search organization..." />
                     <CommandList>

src/components/dashboard/user/profile/tier-setting.tsx

@@ -33,7 +33,7 @@ const TierSetting = (): ReactElement => {
                     {capitalizeWords(user?.tier)}
                 </span>
 
-                <Link href="/#pricing">
+                <Link href="/#pricing" draggable={false}>
                     <Button
                         className="bg-background/30"
                         size="sm"

src/components/dashboard/user/settings/tfa/tfa-setting.tsx

@@ -39,11 +39,28 @@ const TFASetting = (): ReactElement => {
     const user: User | undefined = useUserContext(
         (state: UserState) => state.user
     );
+    const router: AppRouterInstance = useRouter();
+
     const [tfaResponse, setTfaResponse] = useState<
         UserSetupTfaResponse | undefined
     >(undefined);
     const [enabledTfa, setEnabledTfa] = useState<boolean>(false);
-    const router: AppRouterInstance = useRouter();
+    const [disabling, setDisabling] = useState<boolean>(false);
+
+    const onDialogStateChange = async (open: boolean) => {
+        if (open) {
+            await setupTfa();
+        } else if (enabledTfa) {
+            toast("Two-Factor Auth", {
+                icon: "🎉",
+                description:
+                    "Successfully enabled two-factor auth on your account!",
+            });
+            setTimeout(() => {
+                window.location.reload();
+            }, 1500);
+        }
+    };
 
     /**
      * Start setting up two-factor auth.
@@ -57,6 +74,25 @@ const TFASetting = (): ReactElement => {
         setTfaResponse(data);
     };
 
+    /**
+     * Disable two-factor auth.
+     */
+    const disableTfa = async () => {
+        setDisabling(true);
+        await apiRequest<void>({
+            endpoint: "/user/disable-tfa",
+            method: "POST",
+            session,
+        });
+        toast("Two-Factor Auth", {
+            icon: "🔓",
+            description: "Two-factor auth has been disabled for your account.",
+        });
+        setTimeout(() => {
+            window.location.reload();
+        }, 1500);
+    };
+
     return (
         <div className="px-5 flex items-center">
             {/* Name & Description */}
@@ -71,24 +107,16 @@ const TFASetting = (): ReactElement => {
 
             {/* Setting */}
             {hasFlag(user as User, UserFlag.TFA_ENABLED) ? (
-                <Button size="sm" variant="destructive">
+                <Button
+                    size="sm"
+                    variant="destructive"
+                    onClick={disableTfa}
+                    disabled={disabling}
+                >
                     Disable
                 </Button>
             ) : (
-                <Dialog
+                <Dialog onOpenChange={onDialogStateChange}>
-                    onOpenChange={async (open: boolean) => {
-                        if (open) {
-                            setupTfa();
-                        } else if (enabledTfa) {
-                            toast("Two-Factor Auth", {
-                                icon: "🎉",
-                                description:
-                                    "Successfully enabled two-factor auth on your account!",
-                            });
-                            router.push("/dashboard");
-                        }
-                    }}
-                >
                     <DialogTrigger>
                         <Button
                             className="bg-background/30"

src/components/dashboard/user/user-settings-header.tsx

@@ -36,7 +36,7 @@ const UserSettingsHeader = ({ title }: { title: string }): ReactElement => {
             <Breadcrumb>
                 <BreadcrumbList>
                     <BreadcrumbItem>
-                        <BreadcrumbLink href="/dashboard">
+                        <BreadcrumbLink href="/dashboard" draggable={false}>
                             Dashboard
                         </BreadcrumbLink>
                     </BreadcrumbItem>