feat: Implement secure password update

src/components/settings/SecurityTab.tsx

@@ -1,70 +1,20 @@
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 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 { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 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 { Shield, Key, Smartphone, Globe } 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, {
-  message: "Passwords don't match",
-  path: ["confirmPassword"]
-});
-type PasswordFormData = z.infer<typeof passwordSchema>;
+import { PasswordUpdateDialog } from './PasswordUpdateDialog';
 export function SecurityTab() {
-  const {
-    user
-  } = useAuth();
-  const {
-    toast
-  } = useToast();
-  const [loading, setLoading] = useState(false);
-  const form = useForm<PasswordFormData>({
-    resolver: zodResolver(passwordSchema),
-    defaultValues: {
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: ''
-    }
-  });
-  const onSubmit = async (data: PasswordFormData) => {
-    if (!user) return;
-    setLoading(true);
-    try {
-      const {
-        error
-      } = await supabase.auth.updateUser({
-        password: data.newPassword
-      });
-      if (error) throw error;
-      form.reset();
-      toast({
-        title: 'Password updated',
-        description: 'Your password has been successfully changed.'
-      });
-    } catch (error: any) {
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to update password',
-        variant: 'destructive'
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const handleSocialLogin = async (provider: 'google' | 'discord') => {
     try {
       const {
@@ -117,53 +67,40 @@ export function SecurityTab() {
     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">
-          <Key className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Change Password</h3>
-        </div>
-        
-        <Card>
-          <CardHeader>
-            <CardDescription>
-              Update your password to keep your account secure.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <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">
-                    {form.formState.errors.currentPassword.message}
-                  </p>}
-              </div>
+  return (
+    <>
+      <PasswordUpdateDialog
+        open={passwordDialogOpen}
+        onOpenChange={setPasswordDialogOpen}
+        onSuccess={() => {
+          toast({
+            title: 'Password updated',
+            description: 'Your password has been successfully changed.'
+          });
+        }}
+      />
 
-              <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">
-                    {form.formState.errors.newPassword.message}
-                  </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">
-                    {form.formState.errors.confirmPassword.message}
-                  </p>}
-              </div>
-
-              <Button type="submit" disabled={loading}>
-                {loading ? 'Updating...' : 'Update Password'}
+      <div className="space-y-8">
+        {/* Change Password */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Key className="w-5 h-5" />
+            <h3 className="text-lg font-medium">Change Password</h3>
+          </div>
+          
+          <Card>
+            <CardHeader>
+              <CardDescription>
+                Update your password to keep your account secure. {user?.identities?.some(i => i.provider === 'totp') && 'Two-factor authentication will be required.'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button onClick={() => setPasswordDialogOpen(true)}>
+                Change Password
               </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
+            </CardContent>
+          </Card>
+        </div>
 
       <Separator />
 
@@ -258,5 +195,7 @@ export function SecurityTab() {
           </CardContent>
         </Card>
       </div>
-    </div>;
+    </div>
+    </>
+  );
 }