feat: Add Change Password functionality

2025-11-19 19:57:38 -05:00
parent 945b18ab3e
commit 70a28e53ee
4 changed files with 111 additions and 4 deletions
@@ -1,11 +1,74 @@
+import { useState } from 'react'
+import { Card } from '../components/ui/Card'
+import { Input } from '../components/ui/Input'
+import { Button } from '../components/ui/Button'
+import { toast } from '../components/Toast'
+import client from '../api/client'
+
 export default function Settings() {
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (newPassword !== confirmPassword) {
+      toast.error('New passwords do not match')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await client.post('/auth/change-password', {
+        old_password: oldPassword,
+        new_password: newPassword,
+      })
+      toast.success('Password updated successfully')
+      setOldPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Failed to update password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold text-white mb-6">Settings</h1>
-      <div className="bg-dark-card rounded-lg border border-gray-800 p-6">
-        <div className="text-gray-400">
-          Settings page coming soon...
-        </div>
+      <div className="grid gap-6">
+        <Card title="Change Password" className="max-w-md">
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <Input
+              label="Current Password"
+              type="password"
+              value={oldPassword}
+              onChange={e => setOldPassword(e.target.value)}
+              required
+            />
+            <Input
+              label="New Password"
+              type="password"
+              value={newPassword}
+              onChange={e => setNewPassword(e.target.value)}
+              required
+              minLength={8}
+            />
+            <Input
+              label="Confirm New Password"
+              type="password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              required
+              minLength={8}
+            />
+            <Button type="submit" isLoading={loading}>
+              Update Password
+            </Button>
+          </form>
+        </Card>
      </div>
    </div>
  )