feat : update

2026-10-03 00:56:31 +07:00
parent f71c00d2ab
commit f23b69a280
36 changed files with 766 additions and 376 deletions
@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import { useState, type FormEvent } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, 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";
+
+type Mode = "forgot" | "reset";
+
+export function EmailActionForm({ mode, token = "", invalidToken = false }: {
+  mode: Mode; token?: string; invalidToken?: boolean;
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [sent, setSent] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (busy) return;
+    const form = new FormData(event.currentTarget);
+    const address = String(form.get("email") ?? "").trim();
+    setBusy(true);
+    setError("");
+    try {
+      if (mode === "forgot") {
+        const result = await authClient.requestPasswordReset({ email: address, redirectTo: "/reset-password" });
+        if (result.error) throw new Error("ส่งลิงก์รีเซ็ตไม่สำเร็จ กรุณาลองอีกครั้ง");
+      } else {
+        const password = String(form.get("password") ?? "");
+        if (password !== String(form.get("confirmPassword") ?? "")) {
+          setError("รหัสผ่านใหม่ไม่ตรงกัน");
+          return;
+        }
+        const result = await authClient.resetPassword({ newPassword: password, token });
+        if (result.error) throw new Error("รีเซ็ตรหัสผ่านไม่สำเร็จ ลิงก์อาจหมดอายุแล้ว");
+      }
+      setSent(true);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const title = mode === "forgot" ? "ลืมรหัสผ่าน" : "ตั้งรหัสผ่านใหม่";
+  return <Card className="w-full max-w-sm">
+    <CardHeader><CardTitle>{title}</CardTitle></CardHeader>
+    <CardContent className="flex flex-col gap-4">
+      {sent && <Alert><AlertDescription>{mode === "reset"
+        ? "ตั้งรหัสผ่านใหม่แล้ว กรุณาเข้าสู่ระบบ"
+        : "หากอีเมลนี้มีบัญชีอยู่ โปรดตรวจสอบกล่องจดหมายและโฟลเดอร์สแปม"}</AlertDescription></Alert>}
+      {invalidToken && <Alert variant="destructive"><AlertDescription>
+        ลิงก์รีเซ็ตไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่
+      </AlertDescription></Alert>}
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+      {(mode !== "reset" || (!sent && token)) && <form onSubmit={submit}>
+        <FieldGroup>
+          {mode !== "reset" ? <Field>
+            <FieldLabel htmlFor="auth-email">อีเมล</FieldLabel>
+            <Input id="auth-email" name="email" type="email" autoComplete="email" required disabled={busy} />
+          </Field> : <>
+            <Field><FieldLabel htmlFor="new-password">รหัสผ่านใหม่</FieldLabel>
+              <Input id="new-password" name="password" type="password" minLength={6} maxLength={128}
+                autoComplete="new-password" required disabled={busy} /></Field>
+            <Field><FieldLabel htmlFor="confirm-password">ยืนยันรหัสผ่านใหม่</FieldLabel>
+              <Input id="confirm-password" name="confirmPassword" type="password" minLength={6} maxLength={128}
+                autoComplete="new-password" required disabled={busy} /></Field>
+          </>}
+          <Button type="submit" disabled={busy}>{busy ? "กำลังดำเนินการ..." :
+            mode === "forgot" ? "ส่งลิงก์รีเซ็ต" : "ตั้งรหัสผ่าน"}</Button>
+        </FieldGroup>
+      </form>}
+      {mode === "reset" && !token && <Button variant="link" nativeButton={false} render={<Link href="/forgot-password" />}>
+        ขอลิงก์รีเซ็ตใหม่
+      </Button>}
+      <Button variant="link" nativeButton={false} render={<Link href="/login" />}>กลับไปเข้าสู่ระบบ</Button>
+    </CardContent>
+  </Card>;
+}