feat: Implement TOTP and update settings page

src/components/auth/TOTPSetup.tsx

@@ -0,0 +1,328 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import { useToast } from '@/hooks/use-toast';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2, AlertCircle } from 'lucide-react';
+
+interface TOTPFactor {
+  id: string;
+  friendly_name?: string;
+  factor_type: string;
+  status: string;
+  created_at: string;
+}
+
+export function TOTPSetup() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [factors, setFactors] = useState<TOTPFactor[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [enrolling, setEnrolling] = useState(false);
+  const [qrCode, setQrCode] = useState('');
+  const [secret, setSecret] = useState('');
+  const [factorId, setFactorId] = useState('');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [showSecret, setShowSecret] = useState(false);
+
+  useEffect(() => {
+    fetchTOTPFactors();
+  }, [user]);
+
+  const fetchTOTPFactors = async () => {
+    if (!user) return;
+
+    try {
+      const { data, error } = await supabase.auth.mfa.listFactors();
+      if (error) throw error;
+      
+      const totpFactors = (data.totp || []).map(factor => ({
+        id: factor.id,
+        friendly_name: factor.friendly_name || 'Authenticator App',
+        factor_type: factor.factor_type || 'totp',
+        status: factor.status,
+        created_at: factor.created_at
+      }));
+      setFactors(totpFactors);
+    } catch (error: any) {
+      console.error('Error fetching TOTP factors:', error);
+    }
+  };
+
+  const startEnrollment = async () => {
+    if (!user) return;
+
+    setLoading(true);
+    try {
+      const { data, error } = await supabase.auth.mfa.enroll({
+        factorType: 'totp',
+        friendlyName: 'Authenticator App'
+      });
+
+      if (error) throw error;
+
+      setQrCode(data.totp.qr_code);
+      setSecret(data.totp.secret);
+      setFactorId(data.id);
+      setEnrolling(true);
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to start TOTP enrollment',
+        variant: 'destructive'
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const verifyAndEnable = async () => {
+    if (!factorId || !verificationCode.trim()) {
+      toast({
+        title: 'Error',
+        description: 'Please enter the verification code',
+        variant: 'destructive'
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const { error } = await supabase.auth.mfa.verify({
+        factorId,
+        challengeId: factorId, // For enrollment, challengeId is the same as factorId
+        code: verificationCode.trim()
+      });
+
+      if (error) throw error;
+
+      toast({
+        title: 'TOTP Enabled',
+        description: 'Two-factor authentication has been successfully enabled for your account.'
+      });
+
+      // Reset state and refresh factors
+      setEnrolling(false);
+      setQrCode('');
+      setSecret('');
+      setFactorId('');
+      setVerificationCode('');
+      fetchTOTPFactors();
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: error.message || 'Invalid verification code. Please try again.',
+        variant: 'destructive'
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const unenrollFactor = async (factorId: string) => {
+    setLoading(true);
+    try {
+      const { error } = await supabase.auth.mfa.unenroll({
+        factorId
+      });
+
+      if (error) throw error;
+
+      toast({
+        title: 'TOTP Disabled',
+        description: 'Two-factor authentication has been disabled for your account.'
+      });
+
+      fetchTOTPFactors();
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to disable TOTP',
+        variant: 'destructive'
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copySecret = () => {
+    navigator.clipboard.writeText(secret);
+    toast({
+      title: 'Copied',
+      description: 'Secret key copied to clipboard'
+    });
+  };
+
+  const cancelEnrollment = () => {
+    setEnrolling(false);
+    setQrCode('');
+    setSecret('');
+    setFactorId('');
+    setVerificationCode('');
+  };
+
+  const activeFactor = factors.find(f => f.status === 'verified');
+
+  if (enrolling) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Smartphone className="w-5 h-5" />
+            Set Up Authenticator App
+          </CardTitle>
+          <CardDescription>
+            Scan the QR code with your authenticator app, then enter the verification code below.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* QR Code */}
+          <div className="flex justify-center">
+            <div className="p-4 bg-white rounded-lg border">
+              <img src={qrCode} alt="TOTP QR Code" className="w-48 h-48" />
+            </div>
+          </div>
+
+          {/* Manual Entry */}
+          <div className="space-y-2">
+            <Label>Can't scan? Enter this key manually:</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                value={secret}
+                readOnly
+                type={showSecret ? 'text' : 'password'}
+                className="font-mono text-sm"
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSecret(!showSecret)}
+              >
+                {showSecret ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </Button>
+              <Button variant="outline" size="sm" onClick={copySecret}>
+                <Copy className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Verification */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="verificationCode">Enter verification code from your app:</Label>
+              <Input
+                id="verificationCode"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value)}
+                placeholder="000000"
+                maxLength={6}
+                className="text-center text-lg tracking-widest font-mono"
+              />
+            </div>
+
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={cancelEnrollment}>
+                Cancel
+              </Button>
+              <Button onClick={verifyAndEnable} disabled={loading || !verificationCode.trim()}>
+                {loading ? 'Verifying...' : 'Enable TOTP'}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardDescription>
+          Add an extra layer of security to your account with two-factor authentication.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {activeFactor ? (
+          <div className="space-y-4">
+            <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.
+              </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">
+                  <Smartphone className="w-4 h-4 text-green-600 dark:text-green-400" />
+                </div>
+                <div>
+                  <p className="font-medium">{activeFactor.friendly_name || 'Authenticator App'}</p>
+                  <p className="text-sm text-muted-foreground">
+                    Enabled {new Date(activeFactor.created_at).toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" className="bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300">
+                  Active
+                </Badge>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      Disable
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle className="flex items-center gap-2">
+                        <AlertCircle className="w-5 h-5 text-destructive" />
+                        Disable Two-Factor Authentication
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Are you sure you want to disable two-factor authentication? This will make your account less secure.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={() => unenrollFactor(activeFactor.id)}
+                        className="bg-destructive hover:bg-destructive/90"
+                      >
+                        Disable TOTP
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <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-muted rounded-full flex items-center justify-center">
+                <Smartphone className="w-4 h-4 text-muted-foreground" />
+              </div>
+              <div>
+                <p className="font-medium">Authenticator App</p>
+                <p className="text-sm text-muted-foreground">
+                  Use an authenticator app to generate verification codes
+                </p>
+              </div>
+            </div>
+            <Button onClick={startEnrollment} disabled={loading}>
+              {loading ? 'Setting up...' : 'Set Up'}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/icons/DiscordIcon.tsx

@@ -0,0 +1,7 @@
+export function DiscordIcon({ className = "w-5 h-5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="#5865F2">
+      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
+    </svg>
+  );
+}

src/components/icons/GoogleIcon.tsx

@@ -0,0 +1,10 @@
+export function GoogleIcon({ className = "w-5 h-5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+    </svg>
+  );
+}

src/components/settings/SecurityTab.tsx

@@ -12,6 +12,9 @@ import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { Shield, Key, Smartphone, Globe, ExternalLink } from 'lucide-react';
+import { TOTPSetup } from '@/components/auth/TOTPSetup';
+import { GoogleIcon } from '@/components/icons/GoogleIcon';
+import { DiscordIcon } from '@/components/icons/DiscordIcon';
 
 const passwordSchema = z.object({
   currentPassword: z.string().min(1, 'Current password is required'),
@@ -112,13 +115,13 @@ export function SecurityTab() {
       provider: 'google',
       connected: user?.identities?.some(identity => identity.provider === 'google') || false,
       email: user?.identities?.find(identity => identity.provider === 'google')?.identity_data?.email || user?.email,
-      icon: '🔍'
+      icon: <GoogleIcon className="w-5 h-5" />
     },
     {
       provider: 'discord',
       connected: user?.identities?.some(identity => identity.provider === 'discord') || false,
       email: user?.identities?.find(identity => identity.provider === 'discord')?.identity_data?.email,
-      icon: '🎮'
+      icon: <DiscordIcon className="w-5 h-5" />
     }
   ];
 
@@ -212,7 +215,7 @@ export function SecurityTab() {
             {connectedAccounts.map((account) => (
               <div key={account.provider} 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-muted rounded-full flex items-center justify-center text-lg">
+                  <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
                     {account.icon}
                   </div>
                   <div>
@@ -259,26 +262,15 @@ export function SecurityTab() {
           <h3 className="text-lg font-medium">Two-Factor Authentication</h3>
         </div>
         
-        <Card>
+      {/* Two-Factor Authentication */}
-          <CardHeader>
+      <div className="space-y-4">
-            <CardDescription>
+        <div className="flex items-center gap-2">
-              Add an extra layer of security to your account with two-factor authentication.
+          <Smartphone className="w-5 h-5" />
-            </CardDescription>
+          <h3 className="text-lg font-medium">Two-Factor Authentication</h3>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center justify-between p-4 border rounded-lg">
-              <div>
-                <p className="font-medium">Authenticator App</p>
-                <p className="text-sm text-muted-foreground">
-                  Use an authenticator app to generate verification codes
-                </p>
         </div>
-              <Button variant="outline" disabled>
+        
-                Coming Soon
+        <TOTPSetup />
-              </Button>
       </div>
-          </CardContent>
-        </Card>
       </div>
 
       <Separator />