Visual edit in Lovable

2025-12-20 12:31:26 -05:00 · 2025-09-28 20:44:01 +00:00
parent 2353084c28
commit b72d99449e
1 changed files with 44 additions and 94 deletions
--- a/src/components/settings/SecurityTab.tsx
+++ b/src/components/settings/SecurityTab.tsx
@@ -15,23 +15,23 @@ 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'),
  newPassword: z.string().min(8, 'Password must be at least 8 characters'),
  confirmPassword: z.string()
-}).refine((data) => data.newPassword === data.confirmPassword, {
+}).refine(data => data.newPassword === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"]
 });
-
 type PasswordFormData = z.infer<typeof passwordSchema>;
-
 export function SecurityTab() {
-  const { user } = useAuth();
-  const { toast } = useToast();
+  const {
+    user
+  } = useAuth();
+  const {
+    toast
+  } = useToast();
  const [loading, setLoading] = useState(false);
-
  const form = useForm<PasswordFormData>({
    resolver: zodResolver(passwordSchema),
    defaultValues: {
@@ -40,18 +40,16 @@ export function SecurityTab() {
      confirmPassword: ''
    }
  });
-
  const onSubmit = async (data: PasswordFormData) => {
    if (!user) return;
-    
    setLoading(true);
    try {
-      const { error } = await supabase.auth.updateUser({
+      const {
+        error
+      } = await supabase.auth.updateUser({
        password: data.newPassword
      });
-
      if (error) throw error;
-
      form.reset();
      toast({
        title: 'Password updated',
@@ -67,18 +65,17 @@ export function SecurityTab() {
      setLoading(false);
    }
  };
-
  const handleSocialLogin = async (provider: 'google' | 'discord') => {
    try {
-      const { error } = await supabase.auth.signInWithOAuth({
+      const {
+        error
+      } = await supabase.auth.signInWithOAuth({
        provider: provider,
        options: {
          redirectTo: `${window.location.origin}/settings`
        }
      });
-
      if (error) throw error;
-
      toast({
        title: 'Redirecting...',
        description: `Redirecting to ${provider} to link your account.`
@@ -91,14 +88,13 @@ export function SecurityTab() {
      });
    }
  };
-
  const handleUnlinkSocial = async (provider: 'google' | 'discord') => {
    try {
      // For now, show a message that this feature requires manual action
      // In a production app, this would typically be handled through the admin API
      toast({
        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) {
      toast({
@@ -110,23 +106,18 @@ export function SecurityTab() {
  };

  // Get connected accounts from user identities
-  const connectedAccounts = [
-    {
-      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: <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: <DiscordIcon className="w-5 h-5" />
-    }
-  ];
-
-  return (
-    <div className="space-y-8">
+  const connectedAccounts = [{
+    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: <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: <DiscordIcon className="w-5 h-5" />
+  }];
+  return <div className="space-y-8">
      {/* Change Password */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
@@ -144,47 +135,26 @@ export function SecurityTab() {
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="currentPassword">Current Password</Label>
-                <Input
-                  id="currentPassword"
-                  type="password"
-                  {...form.register('currentPassword')}
-                  placeholder="Enter your current password"
-                />
-                {form.formState.errors.currentPassword && (
-                  <p className="text-sm text-destructive">
+                <Input id="currentPassword" 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}
-                  </p>
-                )}
+                  </p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="newPassword">New Password</Label>
-                <Input
-                  id="newPassword"
-                  type="password"
-                  {...form.register('newPassword')}
-                  placeholder="Enter your new password"
-                />
-                {form.formState.errors.newPassword && (
-                  <p className="text-sm text-destructive">
+                <Input id="newPassword" 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}
-                  </p>
-                )}
+                  </p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm New Password</Label>
-                <Input
-                  id="confirmPassword"
-                  type="password"
-                  {...form.register('confirmPassword')}
-                  placeholder="Confirm your new password"
-                />
-                {form.formState.errors.confirmPassword && (
-                  <p className="text-sm text-destructive">
+                <Input id="confirmPassword" 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}
-                  </p>
-                )}
+                  </p>}
              </div>

              <Button type="submit" disabled={loading}>
@@ -212,43 +182,27 @@ export function SecurityTab() {
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
-            {connectedAccounts.map((account) => (
-              <div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
+            {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">
                    {account.icon}
                  </div>
                  <div>
                    <p className="font-medium capitalize">{account.provider}</p>
-                    {account.connected && account.email && (
-                      <p className="text-sm text-muted-foreground">{account.email}</p>
-                    )}
+                    {account.connected && account.email && <p className="text-sm text-muted-foreground">{account.email}</p>}
                  </div>
                </div>
                <div className="flex items-center gap-2">
-                  {account.connected ? (
-                    <>
+                  {account.connected ? <>
                      <Badge variant="secondary">Connected</Badge>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleUnlinkSocial(account.provider as 'google' | 'discord')}
-                      >
+                      <Button variant="outline" size="sm" onClick={() => handleUnlinkSocial(account.provider as 'google' | 'discord')}>
                        Disconnect
                      </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
-                      </Button>
-                  )}
+                      </Button>}
                </div>
-              </div>
-            ))}
+              </div>)}
          </CardContent>
        </Card>
      </div>
@@ -257,10 +211,7 @@ export function SecurityTab() {

      {/* 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>
+        
        
      {/* Two-Factor Authentication */}
      <div className="space-y-4">
@@ -307,6 +258,5 @@ export function SecurityTab() {
          </CardContent>
        </Card>
      </div>
-    </div>
-  );
+    </div>;
 }