Fix: Implement MFA removal protection

src/components/auth/TOTPSetup.tsx

@@ -8,8 +8,9 @@ import { Badge } from '@/components/ui/badge';
 import { handleError, handleSuccess, handleInfo, AppError, getErrorMessage } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
 import { useAuth } from '@/hooks/useAuth';
+import { useRequireMFA } from '@/hooks/useRequireMFA';
 import { supabase } from '@/integrations/supabase/client';
-import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2, AlertTriangle } from 'lucide-react';
 import { MFARemovalDialog } from './MFARemovalDialog';
 import { setStepUpRequired, getAuthMethod } from '@/lib/sessionFlags';
 import { useNavigate } from 'react-router-dom';
@@ -17,6 +18,7 @@ import type { MFAFactor } from '@/types/auth';
 
 export function TOTPSetup() {
   const { user } = useAuth();
+  const { requiresMFA } = useRequireMFA();
   const navigate = useNavigate();
   const [factors, setFactors] = useState<MFAFactor[]>([]);
   const [loading, setLoading] = useState(false);
@@ -274,6 +276,16 @@ export function TOTPSetup() {
               </AlertDescription>
             </Alert>
 
+            {/* Phase 2: Warning for role-required users */}
+            {requiresMFA && (
+              <Alert variant="default" className="border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950">
+                <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+                <AlertDescription className="text-amber-800 dark:text-amber-200">
+                  Your role requires MFA. You cannot disable two-factor authentication.
+                </AlertDescription>
+              </Alert>
+            )}
+
             <div className="flex items-center justify-between p-4 border rounded-lg">
               <div className="flex items-center gap-3">
                 <div className="w-8 h-8 bg-green-50 dark:bg-green-950 rounded-full flex items-center justify-center">