Fix Permissions-Policy header

index.html

@@ -46,7 +46,6 @@
     <!-- Cloudflare Turnstile - Preconnect for faster captcha loading -->
     <link rel="dns-prefetch" href="https://challenges.cloudflare.com">
     <link rel="preconnect" href="https://challenges.cloudflare.com" crossorigin>
-    <link rel="modulepreload" href="https://challenges.cloudflare.com/turnstile/v0/api.js" as="script">
     <link rel="dns-prefetch" href="https://cloudflare.com">
     <link rel="preconnect" href="https://cloudflare.com" crossorigin>
     

src/App.tsx

@@ -9,7 +9,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/hooks/useAuth";
 import { AuthModalProvider } from "@/contexts/AuthModalContext";
 import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
-import { Analytics } from "@vercel/analytics/react";
+import { AnalyticsWrapper } from "@/components/analytics/AnalyticsWrapper";
 import { Footer } from "@/components/layout/Footer";
 import { PageLoader } from "@/components/loading/PageSkeletons";
 
@@ -162,7 +162,7 @@ const App = (): React.JSX.Element => (
       </AuthModalProvider>
     </AuthProvider>
     {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />}
-    <Analytics />
+    <AnalyticsWrapper />
   </QueryClientProvider>
 );
 

src/components/admin/AdminUserDeletionDialog.tsx

@@ -235,7 +235,7 @@ export function AdminUserDeletionDialog({
             <DialogHeader>
               <div className="flex items-center gap-2 justify-center mb-2">
                 <Shield className="h-6 w-6 text-primary" />
-                <DialogTitle>MFA Verification Required</DialogTitle>
+                <DialogTitle>Multi-Factor Authentication Verification Required</DialogTitle>
               </div>
               <DialogDescription className="text-center">
                 This is a critical action that requires additional verification

src/components/analytics/AnalyticsWrapper.tsx

@@ -0,0 +1,36 @@
+import { Analytics } from "@vercel/analytics/react";
+import { Component, ReactNode } from "react";
+
+class AnalyticsErrorBoundary extends Component<
+  { children: ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error) {
+    // Silently fail - analytics should never break the app
+    console.info('[Analytics] Failed to load, continuing without analytics');
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+export function AnalyticsWrapper() {
+  return (
+    <AnalyticsErrorBoundary>
+      <Analytics />
+    </AnalyticsErrorBoundary>
+  );
+}

src/components/auth/MFAChallenge.tsx

@@ -61,7 +61,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
     <div className="space-y-4">
       <div className="flex items-center gap-2 text-primary">
         <Shield className="w-5 h-5" />
-        <h3 className="font-semibold">Two-Factor Authentication</h3>
+        <h3 className="font-semibold">Multi-Factor Authentication</h3>
       </div>
       
       <p className="text-sm text-muted-foreground">

src/components/auth/MFARemovalDialog.tsx

@@ -45,8 +45,8 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
         
         if (currentAal !== 'aal2') {
           toast({
-            title: 'MFA Required',
+            title: 'Multi-Factor Authentication Required',
-            description: 'Please verify your identity with MFA before making security changes',
+            description: 'Please verify your identity with Multi-Factor Authentication before making security changes',
             variant: 'destructive'
           });
           onOpenChange(false);
@@ -161,8 +161,8 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
     // Phase 2: Check if user's role requires MFA
     if (requiresMFA) {
       toast({
-        title: 'MFA Required',
+        title: 'Multi-Factor Authentication Required',
-        description: 'Your role requires two-factor authentication and it cannot be disabled',
+        description: 'Your role requires Multi-Factor Authentication and it cannot be disabled',
         variant: 'destructive'
       });
       handleClose();
@@ -182,8 +182,8 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
       if (data?.error) throw new Error(data.error);
 
       toast({
-        title: 'MFA Disabled',
+        title: 'Multi-Factor Authentication Disabled',
-        description: 'Two-factor authentication has been disabled'
+        description: 'Multi-Factor Authentication has been disabled'
       });
       handleClose();
       onSuccess();
@@ -204,14 +204,14 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
         <AlertDialogHeader>
           <AlertDialogTitle className="flex items-center gap-2">
             <Shield className="h-5 w-5 text-destructive" />
-            Disable Two-Factor Authentication
+            Disable Multi-Factor Authentication
           </AlertDialogTitle>
           <AlertDialogDescription asChild>
             <div className="space-y-4">
               <Alert variant="destructive">
                 <AlertTriangle className="h-4 w-4" />
                 <AlertDescription>
-                  Disabling MFA will make your account less secure. You'll need to verify your identity first.
+                  Disabling Multi-Factor Authentication will make your account less secure. You'll need to verify your identity first.
                 </AlertDescription>
               </Alert>
 
@@ -235,9 +235,9 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
 
               {step === 'totp' && (
                 <div className="space-y-3">
-                  <p className="text-sm">Step 2 of 3: Enter your current TOTP code</p>
+                  <p className="text-sm">Step 2 of 3: Enter your current code</p>
                   <div className="space-y-2">
-                    <Label htmlFor="totp">Verification Code</Label>
+                    <Label htmlFor="totp">Code from Authenticator App</Label>
                     <Input
                       id="totp"
                       type="text"
@@ -257,10 +257,10 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
                 <div className="space-y-3">
                   <p className="text-sm font-semibold">Step 3 of 3: Final confirmation</p>
                   <p className="text-sm text-muted-foreground">
-                    Are you sure you want to disable two-factor authentication? This will:
+                    Are you sure you want to disable Multi-Factor Authentication? This will:
                   </p>
                   <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
-                    <li>Remove TOTP protection from your account</li>
+                    <li>Remove Multi-Factor Authentication protection from your account</li>
                     <li>Send a security notification email</li>
                     <li>Log this action in your security history</li>
                   </ul>
@@ -285,7 +285,7 @@ export function MFARemovalDialog({ open, onOpenChange, factorId, onSuccess }: MF
           )}
           {step === 'confirm' && (
             <AlertDialogAction onClick={handleMFARemoval} disabled={loading} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              {loading ? 'Disabling...' : 'Disable MFA'}
+              {loading ? 'Disabling...' : 'Disable Multi-Factor Authentication'}
             </AlertDialogAction>
           )}
         </AlertDialogFooter>

src/components/auth/MFARequiredAlert.tsx

@@ -30,18 +30,18 @@ export function MFARequiredAlert() {
   return (
     <Alert variant="destructive" className="my-4">
       <Shield className="h-4 w-4" />
-      <AlertTitle>Two-Factor Authentication Required</AlertTitle>
+      <AlertTitle>Multi-Factor Authentication Required</AlertTitle>
       <AlertDescription className="mt-2 space-y-3">
         <p>
           {needsVerification 
-            ? 'Please verify your identity with two-factor authentication to access this area.'
+            ? 'Please verify your identity with Multi-Factor Authentication to access this area.'
-            : 'Your role requires two-factor authentication to access this area.'}
+            : 'Your role requires Multi-Factor Authentication to access this area.'}
         </p>
         <Button 
           onClick={handleAction}
           size="sm"
         >
-          {needsVerification ? 'Verify Now' : 'Set up MFA'}
+          {needsVerification ? 'Verify Now' : 'Set up Multi-Factor Authentication'}
         </Button>
       </AlertDescription>
     </Alert>

src/components/auth/MFAStepUpModal.tsx

@@ -19,7 +19,7 @@ export function MFAStepUpModal({ open, factorId, onSuccess, onCancel }: MFAStepU
             <DialogTitle>Additional Verification Required</DialogTitle>
           </div>
           <DialogDescription className="text-center">
-            Your role requires two-factor authentication. Please verify your identity to continue.
+            Your role requires Multi-Factor Authentication. Please verify your identity to continue.
           </DialogDescription>
         </DialogHeader>
         

src/components/auth/TOTPSetup.tsx

@@ -131,10 +131,10 @@ export function TOTPSetup() {
       }
 
       handleSuccess(
-        'TOTP Enabled',
+        'Multi-Factor Authentication Enabled',
         isOAuthUser 
-          ? 'Please verify with your authenticator code to continue.' 
+          ? 'Please verify with your authenticator app to continue.' 
-          : 'Please sign in again to activate MFA protection.'
+          : 'Please sign in again to activate Multi-Factor Authentication protection.'
       );
 
       if (isOAuthUser) {
@@ -249,7 +249,7 @@ export function TOTPSetup() {
                 Cancel
               </Button>
               <Button onClick={verifyAndEnable} disabled={loading || !verificationCode.trim()}>
-                {loading ? 'Verifying...' : 'Enable TOTP'}
+                {loading ? 'Verifying...' : 'Enable Multi-Factor Authentication'}
               </Button>
             </div>
           </div>
@@ -262,7 +262,7 @@ export function TOTPSetup() {
     <Card>
       <CardHeader>
         <CardDescription>
-          Add an extra layer of security to your account with two-factor authentication.
+          Add an extra layer of security to your account with Multi-Factor Authentication.
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -271,7 +271,7 @@ export function TOTPSetup() {
             <Alert>
               <Shield className="w-4 h-4" />
               <AlertDescription>
-                Two-factor authentication is enabled for your account. You'll be prompted for a verification code when signing in.
+                Multi-Factor Authentication is enabled for your account. You'll be prompted for a code from your authenticator app when signing in.
               </AlertDescription>
             </Alert>
 
@@ -280,7 +280,7 @@ export function TOTPSetup() {
               <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.
+                  Your role requires Multi-Factor Authentication. You cannot disable it.
                 </AlertDescription>
               </Alert>
             )}

src/components/settings/PasswordUpdateDialog.tsx

@@ -463,7 +463,7 @@ export function PasswordUpdateDialog({ open, onOpenChange, onSuccess }: Password
 
             <div className="space-y-4 py-4">
               <div className="flex flex-col items-center gap-4">
-                <Label htmlFor="totp-code">Authentication Code</Label>
+                <Label htmlFor="totp-code">Code from Authenticator App</Label>
                 <InputOTP
                   maxLength={6}
                   value={totpCode}

src/components/settings/SecurityTab.tsx

@@ -372,16 +372,16 @@ export function SecurityTab() {
           </Card>
         </div>
 
-        {/* Two-Factor Authentication - Full Width (Moderators+ Only) */}
+        {/* Multi-Factor Authentication - Full Width (Moderators+ Only) */}
         {isModerator() && (
           <Card>
             <CardHeader>
               <div className="flex items-center gap-2">
                 <Smartphone className="w-5 h-5" />
-                <CardTitle>Two-Factor Authentication</CardTitle>
+                <CardTitle>Multi-Factor Authentication</CardTitle>
               </div>
               <CardDescription>
-                Add an extra layer of security to your account with TOTP authentication
+                Add an extra layer of security to your account with Multi-Factor Authentication
               </CardDescription>
             </CardHeader>
             <CardContent>
@@ -434,7 +434,7 @@ export function SecurityTab() {
                             </span>
                           )}
                           Last active: {format(new Date(session.refreshed_at || session.created_at), 'PPpp')}
-                          {session.aal === 'aal2' && ' • MFA'}
+                          {session.aal === 'aal2' && ' • Multi-Factor'}
                         </p>
                         {session.not_after && (
                           <p className="text-sm text-muted-foreground">

vercel.json

@@ -26,6 +26,10 @@
         {
           "key": "X-XSS-Protection",
           "value": "1; mode=block"
+        },
+        {
+          "key": "Permissions-Policy",
+          "value": "browsing-topics=()"
         }
       ]
     },