Visual edit in Lovable

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 {
-  const { toast } = useToast();
+    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 = [
+  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">
-
-  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
+                <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}
-                  </p>
+                  </p>}
-                )}
               </div>
 
               <div className="space-y-2">
                 <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}
-                  </p>
+                  </p>}
-                )}
               </div>
 
               <div className="space-y-2">
                 <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}
-                  </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) => (
+            {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="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 && (
+                    {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 className="flex items-center gap-2">
-                  {account.connected ? (
+                  {account.connected ? <>
-                    <>
                       <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
                       </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>;
-  );
 }