From ed75bbbc9d5acc285da70e3424cc94dc5b7b6599 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 1 Nov 2025 15:25:40 +0000
Subject: [PATCH] feat: Hide MFA for non-moderators

---
 src/components/homepage/FeaturedParks.tsx |  4 +--
 src/components/settings/SecurityTab.tsx   | 34 +++++++++++++----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/homepage/FeaturedParks.tsx b/src/components/homepage/FeaturedParks.tsx
index 750a729b..57d0e423 100644
--- a/src/components/homepage/FeaturedParks.tsx
+++ b/src/components/homepage/FeaturedParks.tsx
@@ -145,7 +145,7 @@ export function FeaturedParks() {
           </div>
           
           <div className="grid md:grid-cols-3 gap-6">
-            {topRated.data?.map((park) => (
+            {topRatedParks.map((park) => (
               <FeaturedParkCard 
                 key={park.id} 
                 park={park}
@@ -166,7 +166,7 @@ export function FeaturedParks() {
           </div>
           
           <div className="grid md:grid-cols-3 gap-6">
-            {mostRides.data?.map((park) => (
+            {mostRidesParks.map((park) => (
               <FeaturedParkCard 
                 key={park.id} 
                 park={park}
diff --git a/src/components/settings/SecurityTab.tsx b/src/components/settings/SecurityTab.tsx
index f257a654..b5600733 100644
--- a/src/components/settings/SecurityTab.tsx
+++ b/src/components/settings/SecurityTab.tsx
@@ -6,6 +6,7 @@ import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { handleError, handleSuccess } from '@/lib/errorHandler';
 import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
 import { Shield, Key, Smartphone, Globe, Loader2, Monitor, Tablet, Trash2 } from 'lucide-react';
 import { format } from 'date-fns';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -28,6 +29,7 @@ import { SessionRevokeConfirmDialog } from './SessionRevokeConfirmDialog';
 
 export function SecurityTab() {
   const { user } = useAuth();
+  const { isModerator } = useUserRole();
   const navigate = useNavigate();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const [identities, setIdentities] = useState<UserIdentity[]>([]);
@@ -370,21 +372,23 @@ export function SecurityTab() {
           </Card>
         </div>
 
-        {/* Two-Factor Authentication - Full Width */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-2">
-              <Smartphone className="w-5 h-5" />
-              <CardTitle>Two-Factor Authentication</CardTitle>
-            </div>
-            <CardDescription>
-              Add an extra layer of security to your account with TOTP authentication
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TOTPSetup />
-          </CardContent>
-        </Card>
+        {/* Two-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>
+              </div>
+              <CardDescription>
+                Add an extra layer of security to your account with TOTP authentication
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TOTPSetup />
+            </CardContent>
+          </Card>
+        )}
 
         {/* Active Sessions - Full Width */}
         <Card>