From 3126b103b1c2ba3fd3c610100a747fa80bc3acf6 Mon Sep 17 00:00:00 2001
From: megaproxy <megaproxy@gmail.com>
Date: Thu, 23 Apr 2026 23:21:21 +0000
Subject: [PATCH] Disable 2FA setup/disable buttons in demo mode

Shows the 2FA section as normal but disables both the 'Set up 2FA' and
'Disable 2FA' buttons with opacity and cursor-not-allowed, plus a small
amber note explaining why, matching the pattern used for password changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/settings/SettingsPage.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/settings/SettingsPage.tsx b/frontend/src/pages/settings/SettingsPage.tsx
index c77bb34..44f2393 100644
--- a/frontend/src/pages/settings/SettingsPage.tsx
+++ b/frontend/src/pages/settings/SettingsPage.tsx
@@ -273,6 +273,7 @@ function PasswordCard() {
 
 function TotpCard() {
   const qc = useQueryClient();
+  const isDemo = useDemoMode();
   const totpEnabled = useAuthStore(s => s.totpEnabled);
   const { setToken, token, userId, displayName } = useAuthStore();
 
@@ -346,10 +347,14 @@ function TotpCard() {
       {step === "idle" && !totpEnabled && (
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground">Add an extra layer of security with an authenticator app.</p>
+          {isDemo && (
+            <p className="text-xs text-amber-400/80">2FA setup is disabled in demo mode.</p>
+          )}
           <button
             onClick={() => setupMutation.mutate()}
-            disabled={setupMutation.isPending}
-            className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+            disabled={isDemo || setupMutation.isPending}
+            title={isDemo ? "Disabled in demo mode" : undefined}
+            className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
           >
             {setupMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
             Set up 2FA
@@ -360,9 +365,14 @@ function TotpCard() {
       {step === "idle" && totpEnabled && (
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground">2FA is active. Your account is protected.</p>
+          {isDemo && (
+            <p className="text-xs text-amber-400/80">2FA changes are disabled in demo mode.</p>
+          )}
           <button
             onClick={() => setStep("disable")}
-            className="flex items-center gap-2 border border-destructive/40 text-destructive px-4 py-2 rounded-lg text-sm font-medium hover:bg-destructive/10 transition-colors"
+            disabled={isDemo}
+            title={isDemo ? "Disabled in demo mode" : undefined}
+            className="flex items-center gap-2 border border-destructive/40 text-destructive px-4 py-2 rounded-lg text-sm font-medium hover:bg-destructive/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
           >
             Disable 2FA
           </button>