fix: actually inject Change Password UI into settings page

This commit is contained in:
2026-09-24 21:00:11 +05:30
parent 05f2c2c34e
commit c290fb689b

View File

@@ -360,6 +360,56 @@ export default function SettingsPage() {
</Button> */}
</CardContent>
</Card>
<Card className="border-border bg-background shadow-sm">
<CardHeader>
<CardTitle>Change Password</CardTitle>
<CardDescription>Update your account password</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<label className="text-sm font-bold">Current Password</label>
<input
type="password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
placeholder="Enter current password"
/>
</div>
<div className="hidden md:block"></div>
<div className="space-y-2">
<label className="text-sm font-bold">New Password</label>
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
placeholder="Enter new password"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-bold">Confirm New Password</label>
<input
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
placeholder="Confirm new password"
/>
</div>
</div>
<div className="flex pt-2 border-t border-border mt-6">
<Button
className="bg-foreground text-background hover:bg-foreground/90 font-bold px-6 rounded-xl"
onClick={handleChangePassword}
disabled={passwordSaving || !currentPassword || !newPassword || !confirmPassword}
>
{passwordSaving ? "Updating..." : "Update Password"}
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</div>