Implement MFA Enforcement

src/components/auth/MFARequiredAlert.tsx

@@ -0,0 +1,24 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Shield } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+export function MFARequiredAlert() {
+  const navigate = useNavigate();
+
+  return (
+    <Alert variant="destructive" className="my-4">
+      <Shield className="h-4 w-4" />
+      <AlertTitle>Two-Factor Authentication Required</AlertTitle>
+      <AlertDescription className="mt-2 space-y-3">
+        <p>Your role requires two-factor authentication to access this area.</p>
+        <Button 
+          onClick={() => navigate('/settings?tab=security')}
+          size="sm"
+        >
+          Set up MFA
+        </Button>
+      </AlertDescription>
+    </Alert>
+  );
+}