83 lines
3.8 KiB
TypeScript
83 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState, type FormEvent } from "react";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { authClient } from "@/lib/auth/client";
|
|
|
|
export function PasswordForm() {
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
async function changePassword(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (busy) return;
|
|
const form = new FormData(event.currentTarget);
|
|
const currentPassword = String(form.get("currentPassword") ?? "");
|
|
const newPassword = String(form.get("newPassword") ?? "");
|
|
const confirmPassword = String(form.get("confirmPassword") ?? "");
|
|
setError("");
|
|
setSuccess(false);
|
|
if (newPassword !== confirmPassword) {
|
|
setError("รหัสผ่านใหม่ไม่ตรงกัน");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
const result = await authClient.changePassword({ currentPassword, newPassword });
|
|
if (result.error) {
|
|
setError(result.error.code === "INVALID_PASSWORD"
|
|
? "รหัสผ่านปัจจุบันไม่ถูกต้อง"
|
|
: "เปลี่ยนรหัสผ่านไม่สำเร็จ กรุณาลองอีกครั้ง");
|
|
return;
|
|
}
|
|
formRef.current?.reset();
|
|
setSuccess(true);
|
|
} catch {
|
|
setError("เปลี่ยนรหัสผ่านไม่สำเร็จ กรุณาลองอีกครั้ง");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return <Card>
|
|
<CardHeader>
|
|
<CardTitle>เปลี่ยนรหัสผ่าน</CardTitle>
|
|
<CardDescription>กรอกรหัสผ่านปัจจุบันและรหัสผ่านใหม่</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form id="password-form" ref={formRef} onSubmit={changePassword}>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="current-password">รหัสผ่านปัจจุบัน</FieldLabel>
|
|
<Input id="current-password" name="currentPassword" type="password"
|
|
autoComplete="current-password" required disabled={busy} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="new-password">รหัสผ่านใหม่</FieldLabel>
|
|
<Input id="new-password" name="newPassword" type="password"
|
|
autoComplete="new-password" minLength={6} maxLength={128} required disabled={busy} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="confirm-password">ยืนยันรหัสผ่านใหม่</FieldLabel>
|
|
<Input id="confirm-password" name="confirmPassword" type="password"
|
|
autoComplete="new-password" minLength={6} maxLength={128} required disabled={busy} />
|
|
</Field>
|
|
{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
|
|
{success && <Alert><AlertDescription>เปลี่ยนรหัสผ่านเรียบร้อยแล้ว</AlertDescription></Alert>}
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit" form="password-form" disabled={busy}>
|
|
{busy ? "กำลังเปลี่ยนรหัสผ่าน..." : "เปลี่ยนรหัสผ่าน"}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>;
|
|
}
|