feat: update

2026-10-02 18:28:23 +07:00
parent 6bbeb79551
commit 1ed9ea29eb
14 changed files with 1356 additions and 368 deletions
@@ -10,8 +10,14 @@ import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth/client";

-export function AccountForm({ mode, siteKey, nextPath }: {
-  mode: "login" | "register"; siteKey: string; nextPath: string;
+export function AccountForm({
+  mode,
+  siteKey,
+  nextPath,
+}: {
+  mode: "login" | "register";
+  siteKey: string;
+  nextPath: string;
 }) {
  const router = useRouter();
  const register = mode === "register";
@@ -24,50 +30,149 @@ export function AccountForm({ mode, siteKey, nextPath }: {
  useEffect(() => {
    if (!captcha) return;
    const script = document.createElement("script");
-    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    script.src =
+      "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
    script.async = true;
    script.onload = () => {
-      if (container.current && window.turnstile && !widget.current) widget.current = window.turnstile.render(container.current, {
-        sitekey: siteKey, callback: (value: string) => setToken(value),
-        "expired-callback": () => setToken(""), "error-callback": () => setToken(""),
-      });
+      if (container.current && window.turnstile && !widget.current)
+        widget.current = window.turnstile.render(container.current, {
+          sitekey: siteKey,
+          callback: (value: string) => setToken(value),
+          "expired-callback": () => setToken(""),
+          "error-callback": () => setToken(""),
+        });
    };
    document.head.append(script);
-    return () => { script.remove(); };
+    return () => {
+      script.remove();
+    };
  }, [captcha, siteKey]);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (captcha && !token) return;
-    setBusy(true); setError("");
+    setBusy(true);
+    setError("");
    const form = new FormData(event.currentTarget);
    const email = String(form.get("email") ?? "").trim();
    const password = String(form.get("password") ?? "");
-    const fetchOptions = { headers: captcha ? { "x-captcha-response": token } : undefined };
+    const image = register ? form.get("image") : null;
+    const fetchOptions = {
+      headers: captcha ? { "x-captcha-response": token } : undefined,
+    };
    try {
+      if (image instanceof File && image.size > 0 &&
+        (image.size > 6 * 1024 * 1024 || !["image/png", "image/jpeg", "image/webp"].includes(image.type))) {
+        throw new Error("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
+      }
      const result = register
-        ? await authClient.signUp.email({ name: String(form.get("name") ?? "").trim(), email, password, fetchOptions })
+        ? await authClient.signUp.email({
+            name: String(form.get("name") ?? "").trim(),
+            email,
+            password,
+            fetchOptions,
+          })
        : await authClient.signIn.email({ email, password, fetchOptions });
-      if (result.error) throw new Error(result.error.message ?? "เข้าสู่ระบบไม่สำเร็จ");
-      router.push(nextPath); router.refresh();
+      if (result.error)
+        throw new Error(result.error.message ?? "เข้าสู่ระบบไม่สำเร็จ");
+      if (register && image instanceof File && image.size > 0) {
+        const profile = new FormData();
+        profile.set("name", String(form.get("name") ?? "").trim());
+        profile.set("image", image);
+        const uploaded = await fetch("/api/profile", { method: "POST", body: profile })
+          .then((response) => response.ok).catch(() => false);
+        if (!uploaded) {
+          router.push(`/profile?setup=1&upload=failed&next=${encodeURIComponent(nextPath)}`);
+          router.refresh();
+          return;
+        }
+      }
+      router.push(nextPath);
+      router.refresh();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
      setToken("");
      if (widget.current) window.turnstile?.reset(widget.current);
-    } finally { setBusy(false); }
+    } finally {
+      setBusy(false);
+    }
  }

-  return <Card className="w-full max-w-sm"><CardHeader><CardTitle>{register ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}</CardTitle></CardHeader>
-    <CardContent className="flex flex-col gap-4"><form onSubmit={submit}><FieldGroup>
-      {register && <Field><FieldLabel htmlFor="name">ชื่อ</FieldLabel><Input id="name" name="name" required maxLength={100} /></Field>}
-      <Field><FieldLabel htmlFor="email">อีเมล</FieldLabel><Input id="email" name="email" type="email" required autoComplete="email" /></Field>
-      <Field><FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel><Input id="password" name="password" type="password" required minLength={6} autoComplete={register ? "new-password" : "current-password"} /></Field>
-      {captcha && <div ref={container} />}
-      <Button type="submit" disabled={busy || (captcha && !token)}>{busy ? "กำลังดำเนินการ..." : register ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}</Button>
-    </FieldGroup></form>
-      <Button variant="link" nativeButton={false} render={<Link href={`${register ? "/login" : "/register"}${nextPath === "/" ? "" : `?next=${encodeURIComponent(nextPath)}`}`} />}>
-        {register ? "มีบัญชีแล้ว? เข้าสู่ระบบ" : "ยังไม่มีบัญชี? สมัครสมาชิก"}
-      </Button>
-      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
-    </CardContent></Card>;
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>{register ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <form onSubmit={submit}>
+          <FieldGroup>
+            {register && (
+              <Field>
+                <FieldLabel htmlFor="name">ชื่อที่แสดง</FieldLabel>
+                <Input
+                  id="name"
+                  name="name"
+                  required
+                  minLength={2}
+                  maxLength={80}
+                  autoComplete="name"
+                />
+              </Field>
+            )}
+            {register && (
+              <Field>
+                <FieldLabel htmlFor="register-image">รูปโปรไฟล์ (ไม่บังคับ)</FieldLabel>
+                <Input id="register-image" name="image" type="file" accept="image/png,image/jpeg,image/webp" />
+              </Field>
+            )}
+            <Field>
+              <FieldLabel htmlFor="email">อีเมล</FieldLabel>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                autoComplete="email"
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                minLength={6}
+                autoComplete={register ? "new-password" : "current-password"}
+              />
+            </Field>
+            {captcha && <div ref={container} />}
+            <Button type="submit" disabled={busy || (captcha && !token)}>
+              {busy
+                ? "กำลังดำเนินการ..."
+                : register
+                  ? "สมัครสมาชิก"
+                  : "เข้าสู่ระบบ"}
+            </Button>
+          </FieldGroup>
+        </form>
+        <Button
+          variant="link"
+          nativeButton={false}
+          render={
+            <Link
+              href={`${register ? "/login" : "/register"}${nextPath === "/" ? "" : `?next=${encodeURIComponent(nextPath)}`}`}
+            />
+          }
+        >
+          {register ? "มีบัญชีแล้ว? เข้าสู่ระบบ" : "ยังไม่มีบัญชี? สมัครสมาชิก"}
+        </Button>
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+    </Card>
+  );
 }
@@ -1,15 +1,31 @@
 "use client";

 import { useEffect, useState, type FormEvent } from "react";
+import Link from "next/link";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";

-export function ProfileForm({ name: initialName, email, image: initialImage }: {
-  name: string; email: string; image: string | null;
+export function ProfileForm({
+  name: initialName,
+  email,
+  image: initialImage,
+  nextPath,
+}: {
+  name: string;
+  email: string;
+  image: string | null;
+  nextPath?: string;
 }) {
  const [name, setName] = useState(initialName);
  const [file, setFile] = useState<File | null>(null);
@@ -17,11 +33,20 @@ export function ProfileForm({ name: initialName, email, image: initialImage }: {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

-  useEffect(() => () => { if (preview) URL.revokeObjectURL(preview); }, [preview]);
+  useEffect(
+    () => () => {
+      if (preview) URL.revokeObjectURL(preview);
+    },
+    [preview],
+  );

  function chooseFile(next: File | null) {
    setError("");
-    if (next && (next.size > 6 * 1024 * 1024 || !["image/png", "image/jpeg", "image/webp"].includes(next.type))) {
+    if (
+      next &&
+      (next.size > 6 * 1024 * 1024 ||
+        !["image/png", "image/jpeg", "image/webp"].includes(next.type))
+    ) {
      setError("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
      return;
    }
@@ -32,46 +57,109 @@ export function ProfileForm({ name: initialName, email, image: initialImage }: {
  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy) return;
-    setBusy(true); setError("");
+    setBusy(true);
+    setError("");
    try {
      const form = new FormData();
      form.set("name", name.trim());
      if (file) form.set("image", file);
-      const response = await fetch("/api/profile", { method: "POST", body: form });
-      if (!response.ok) throw new Error("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
-      window.location.reload();
+      const response = await fetch("/api/profile", {
+        method: "POST",
+        body: form,
+      });
+      if (!response.ok)
+        throw new Error("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
+      if (nextPath) window.location.assign(nextPath);
+      else window.location.reload();
    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "บันทึกโปรไฟล์ไม่สำเร็จ");
+      setError(
+        cause instanceof Error ? cause.message : "บันทึกโปรไฟล์ไม่สำเร็จ",
+      );
      setBusy(false);
    }
  }

-  return <Card>
-    <CardHeader><CardTitle>ข้อมูลบัญชี</CardTitle><CardDescription>{email}</CardDescription></CardHeader>
-    <CardContent><form id="profile-form" onSubmit={save}><FieldGroup>
-      <Field><FieldLabel htmlFor="profile-image">รูปโปรไฟล์</FieldLabel>
-        <div className="flex items-center gap-4">
-          <Avatar size="lg" className="size-16">
-            {(preview || initialImage) && <AvatarImage src={preview || initialImage || ""} alt="รูปโปรไฟล์" />}
-            <AvatarFallback>{name.trim().charAt(0).toUpperCase() || "?"}</AvatarFallback>
-          </Avatar>
-          <Input id="profile-image" type="file" accept="image/png,image/jpeg,image/webp"
-            onChange={(event) => {
-              const selected = event.target.files?.[0] ?? null;
-              chooseFile(selected);
-              if (selected && (selected.size > 6 * 1024 * 1024 ||
-                !["image/png", "image/jpeg", "image/webp"].includes(selected.type))) event.target.value = "";
-            }} disabled={busy} />
-        </div>
-      </Field>
-      <Field><FieldLabel htmlFor="profile-name">ชื่อที่แสดง</FieldLabel>
-        <Input id="profile-name" value={name} onChange={(event) => setName(event.target.value)}
-          minLength={2} maxLength={80} required disabled={busy} />
-      </Field>
-      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
-    </FieldGroup></form></CardContent>
-    <CardFooter><Button type="submit" form="profile-form" disabled={busy || name.trim().length < 2 || name.trim().length > 80}>
-      {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
-    </Button></CardFooter>
-  </Card>;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>ข้อมูลบัญชี</CardTitle>
+        <CardDescription>{email}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="profile-form" onSubmit={save}>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="profile-image">รูปโปรไฟล์</FieldLabel>
+              <div className="flex items-center gap-4">
+                <Avatar size="lg" className="size-16">
+                  {(preview || initialImage) && (
+                    <AvatarImage
+                      src={preview || initialImage || ""}
+                      alt="รูปโปรไฟล์"
+                    />
+                  )}
+                  <AvatarFallback>
+                    {name.trim().charAt(0).toUpperCase() || "?"}
+                  </AvatarFallback>
+                </Avatar>
+                <Input
+                  id="profile-image"
+                  type="file"
+                  accept="image/png,image/jpeg,image/webp"
+                  onChange={(event) => {
+                    const selected = event.target.files?.[0] ?? null;
+                    chooseFile(selected);
+                    if (
+                      selected &&
+                      (selected.size > 6 * 1024 * 1024 ||
+                        !["image/png", "image/jpeg", "image/webp"].includes(
+                          selected.type,
+                        ))
+                    )
+                      event.target.value = "";
+                  }}
+                  disabled={busy}
+                />
+              </div>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="profile-name">ชื่อที่แสดง</FieldLabel>
+              <Input
+                id="profile-name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                minLength={2}
+                maxLength={80}
+                required
+                disabled={busy}
+              />
+            </Field>
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-wrap gap-2">
+        <Button
+          type="submit"
+          form="profile-form"
+          disabled={busy || name.trim().length < 2 || name.trim().length > 80}
+        >
+          {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
+        </Button>
+        {nextPath && (
+          <Button
+            variant="ghost"
+            nativeButton={false}
+            render={<Link href={nextPath} />}
+          >
+            ไว้ก่อน
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  );
 }