pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 08:11:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Visual edit in Lovable

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 20:44:01 +00:00
parent 2353084c28
commit b72d99449e
1 changed files with 44 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/settings/SecurityTab.tsx
View File

@@ -15,23 +15,23 @@ import { Shield, Key, Smartphone, Globe, ExternalLink } from 'lucide-react';
import { TOTPSetup } from '@/components/auth/TOTPSetup'; import { TOTPSetup } from '@/components/auth/TOTPSetup';
import { GoogleIcon } from '@/components/icons/GoogleIcon'; import { GoogleIcon } from '@/components/icons/GoogleIcon';
import { DiscordIcon } from '@/components/icons/DiscordIcon'; import { DiscordIcon } from '@/components/icons/DiscordIcon';
const passwordSchema = z.object({ const passwordSchema = z.object({
currentPassword: z.string().min(1, 'Current password is required'), currentPassword: z.string().min(1, 'Current password is required'),
newPassword: z.string().min(8, 'Password must be at least 8 characters'), newPassword: z.string().min(8, 'Password must be at least 8 characters'),
confirmPassword: z.string() confirmPassword: z.string()
}).refine((data) => data.newPassword === data.confirmPassword, { }).refine(data => data.newPassword === data.confirmPassword, {
message: "Passwords don't match", message: "Passwords don't match",
path: ["confirmPassword"] path: ["confirmPassword"]
}); });
type PasswordFormData = z.infer<typeof passwordSchema>; type PasswordFormData = z.infer<typeof passwordSchema>;
export function SecurityTab() { export function SecurityTab() {
const { user } = useAuth(); const {
const { toast } = useToast(); user
} = useAuth();
const {
toast
} = useToast();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const form = useForm<PasswordFormData>({ const form = useForm<PasswordFormData>({
resolver: zodResolver(passwordSchema), resolver: zodResolver(passwordSchema),
defaultValues: { defaultValues: {
@@ -40,18 +40,16 @@ export function SecurityTab() {
confirmPassword: '' confirmPassword: ''
} }
}); });
const onSubmit = async (data: PasswordFormData) => { const onSubmit = async (data: PasswordFormData) => {
if (!user) return; if (!user) return;
setLoading(true); setLoading(true);
try { try {
const { error } = await supabase.auth.updateUser({ const {
error
} = await supabase.auth.updateUser({
password: data.newPassword password: data.newPassword
}); });
if (error) throw error; if (error) throw error;
form.reset(); form.reset();
toast({ toast({
title: 'Password updated', title: 'Password updated',
@@ -67,18 +65,17 @@ export function SecurityTab() {
setLoading(false); setLoading(false);
} }
}; };
const handleSocialLogin = async (provider: 'google' | 'discord') => { const handleSocialLogin = async (provider: 'google' | 'discord') => {
try { try {
const { error } = await supabase.auth.signInWithOAuth({ const {
error
} = await supabase.auth.signInWithOAuth({
provider: provider, provider: provider,
options: { options: {
redirectTo: `${window.location.origin}/settings` redirectTo: `${window.location.origin}/settings`
} }
}); });
if (error) throw error; if (error) throw error;
toast({ toast({
title: 'Redirecting...', title: 'Redirecting...',
description: `Redirecting to ${provider} to link your account.` description: `Redirecting to ${provider} to link your account.`
@@ -91,14 +88,13 @@ export function SecurityTab() {
}); });
} }
}; };
const handleUnlinkSocial = async (provider: 'google' | 'discord') => { const handleUnlinkSocial = async (provider: 'google' | 'discord') => {
try { try {
// For now, show a message that this feature requires manual action // For now, show a message that this feature requires manual action
// In a production app, this would typically be handled through the admin API // In a production app, this would typically be handled through the admin API
toast({ toast({
title: `${provider.charAt(0).toUpperCase() + provider.slice(1)} Account`, title: `${provider.charAt(0).toUpperCase() + provider.slice(1)} Account`,
description: `To unlink your ${provider} account, please sign in without using ${provider} and then you can remove this connection. For assistance, contact support.`, description: `To unlink your ${provider} account, please sign in without using ${provider} and then you can remove this connection. For assistance, contact support.`
}); });
} catch (error: any) { } catch (error: any) {
toast({ toast({
@@ -110,23 +106,18 @@ export function SecurityTab() {
}; };
// Get connected accounts from user identities // Get connected accounts from user identities
const connectedAccounts = [ const connectedAccounts = [{
{ provider: 'google',
provider: 'google', connected: user?.identities?.some(identity => identity.provider === 'google') || false,
connected: user?.identities?.some(identity => identity.provider === 'google') || false, email: user?.identities?.find(identity => identity.provider === 'google')?.identity_data?.email || user?.email,
email: user?.identities?.find(identity => identity.provider === 'google')?.identity_data?.email || user?.email, icon: <GoogleIcon className="w-5 h-5" />
icon: <GoogleIcon className="w-5 h-5" /> }, {
}, provider: 'discord',
{ connected: user?.identities?.some(identity => identity.provider === 'discord') || false,
provider: 'discord', email: user?.identities?.find(identity => identity.provider === 'discord')?.identity_data?.email,
connected: user?.identities?.some(identity => identity.provider === 'discord') || false, icon: <DiscordIcon className="w-5 h-5" />
email: user?.identities?.find(identity => identity.provider === 'discord')?.identity_data?.email, }];
icon: <DiscordIcon className="w-5 h-5" /> return <div className="space-y-8">
}
];
return (
<div className="space-y-8">
{/* Change Password */} {/* Change Password */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -144,47 +135,26 @@ export function SecurityTab() {
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="currentPassword">Current Password</Label> <Label htmlFor="currentPassword">Current Password</Label>
<Input <Input id="currentPassword" type="password" {...form.register('currentPassword')} placeholder="Enter your current password" />
id="currentPassword" {form.formState.errors.currentPassword && <p className="text-sm text-destructive">
type="password"
{...form.register('currentPassword')}
placeholder="Enter your current password"
/>
{form.formState.errors.currentPassword && (
<p className="text-sm text-destructive">
{form.formState.errors.currentPassword.message} {form.formState.errors.currentPassword.message}
</p> </p>}
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="newPassword">New Password</Label> <Label htmlFor="newPassword">New Password</Label>
<Input <Input id="newPassword" type="password" {...form.register('newPassword')} placeholder="Enter your new password" />
id="newPassword" {form.formState.errors.newPassword && <p className="text-sm text-destructive">
type="password"
{...form.register('newPassword')}
placeholder="Enter your new password"
/>
{form.formState.errors.newPassword && (
<p className="text-sm text-destructive">
{form.formState.errors.newPassword.message} {form.formState.errors.newPassword.message}
</p> </p>}
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm New Password</Label> <Label htmlFor="confirmPassword">Confirm New Password</Label>
<Input <Input id="confirmPassword" type="password" {...form.register('confirmPassword')} placeholder="Confirm your new password" />
id="confirmPassword" {form.formState.errors.confirmPassword && <p className="text-sm text-destructive">
type="password"
{...form.register('confirmPassword')}
placeholder="Confirm your new password"
/>
{form.formState.errors.confirmPassword && (
<p className="text-sm text-destructive">
{form.formState.errors.confirmPassword.message} {form.formState.errors.confirmPassword.message}
</p> </p>}
)}
</div> </div>
<Button type="submit" disabled={loading}> <Button type="submit" disabled={loading}>
@@ -212,43 +182,27 @@ export function SecurityTab() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{connectedAccounts.map((account) => ( {connectedAccounts.map(account => <div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
<div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
{account.icon} {account.icon}
</div> </div>
<div> <div>
<p className="font-medium capitalize">{account.provider}</p> <p className="font-medium capitalize">{account.provider}</p>
{account.connected && account.email && ( {account.connected && account.email && <p className="text-sm text-muted-foreground">{account.email}</p>}
<p className="text-sm text-muted-foreground">{account.email}</p>
)}
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{account.connected ? ( {account.connected ? <>
<>
<Badge variant="secondary">Connected</Badge> <Badge variant="secondary">Connected</Badge>
<Button <Button variant="outline" size="sm" onClick={() => handleUnlinkSocial(account.provider as 'google' | 'discord')}>
variant="outline"
size="sm"
onClick={() => handleUnlinkSocial(account.provider as 'google' | 'discord')}
>
Disconnect Disconnect
</Button> </Button>
</> </> : <Button variant="outline" size="sm" onClick={() => handleSocialLogin(account.provider as 'google' | 'discord')}>
) : (
<Button
variant="outline"
size="sm"
onClick={() => handleSocialLogin(account.provider as 'google' | 'discord')}
>
Connect Connect
</Button> </Button>}
)}
</div> </div>
</div> </div>)}
))}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -257,10 +211,7 @@ export function SecurityTab() {
{/* Two-Factor Authentication */} {/* Two-Factor Authentication */}
<div className="space-y-4"> <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>
{/* Two-Factor Authentication */} {/* Two-Factor Authentication */}
<div className="space-y-4"> <div className="space-y-4">
@@ -307,6 +258,5 @@ export function SecurityTab() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>;
);
} }