feat: Implement TOTP and update settings page

This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 20:33:19 +00:00
parent fa13ab772c
commit 2353084c28
4 changed files with 360 additions and 23 deletions

View File

@@ -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>
<CardHeader>
<CardDescription>
Add an extra layer of security to your account with two-factor authentication.
</CardDescription>
</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
</Button>
</div>
</CardContent>
</Card>
{/* Two-Factor Authentication */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<Smartphone className="w-5 h-5" />
<h3 className="text-lg font-medium">Two-Factor Authentication</h3>
</div>
<TOTPSetup />
</div>
</div>
<Separator />