feat update

components/auth/account-form.tsx

@@ -4,11 +4,13 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState, type FormEvent } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 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";
+import { ProfileImageInput } from "./profile-image-input";
 
 declare global {
   interface Window {
@@ -42,12 +44,18 @@ export function AccountForm({
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   const [pendingEmail, setPendingEmail] = useState("");
+  const [pendingName, setPendingName] = useState("");
   const [notice, setNotice] = useState("");
   const [token, setToken] = useState("");
+  const [profileImage, setProfileImage] = useState<File | null>(null);
+  const [profilePreview, setProfilePreview] = useState<string | null>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const container = useRef<HTMLDivElement>(null);
   const widget = useRef<string | null>(null);
   const captcha = process.env.NODE_ENV !== "development";
+  useEffect(() => () => {
+    if (profilePreview) URL.revokeObjectURL(profilePreview);
+  }, [profilePreview]);
   useEffect(() => {
     if (!captcha) return;
     const script = document.createElement("script");
@@ -94,14 +102,16 @@ export function AccountForm({
     try {
       const fields = new FormData(form);
       const email = String(fields.get("email") ?? "").trim();
+      const name = String(fields.get("name") ?? "").trim();
       const result = await authClient.signUp.email({
-        name: String(fields.get("name") ?? "").trim(),
+        name,
         email,
         password: String(fields.get("password") ?? ""),
         fetchOptions: { headers: captcha ? { "x-captcha-response": token } : undefined },
       });
       if (result.error) throw new Error(result.error.message ?? "ส่งรหัสไม่สำเร็จ กรุณาลองอีกครั้ง");
       setPendingEmail(email);
+      setPendingName(name);
       setNotice("ส่งรหัส 6 หลักแล้ว กรุณาตรวจสอบอีเมลและกรอกรหัสภายใน 5 นาที");
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
@@ -125,8 +135,18 @@ export function AccountForm({
           email: pendingEmail, otp: String(form.get("otp") ?? "").trim(),
         });
         if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
-        const setupPath = `/profile?setup=1&next=${encodeURIComponent(nextPath)}`;
-        router.push(`/login?verified=1&next=${encodeURIComponent(setupPath)}`);
+        if (profileImage) {
+          const profile = new FormData();
+          profile.set("name", pendingName);
+          profile.set("image", profileImage);
+          const response = await fetch("/api/profile", { method: "POST", body: profile });
+          if (!response.ok) {
+            router.replace(`/profile?setup=1&upload=failed&next=${encodeURIComponent(nextPath)}`);
+            router.refresh();
+            return;
+          }
+        }
+        router.replace(nextPath);
         router.refresh();
         return;
       }
@@ -180,6 +200,21 @@ export function AccountForm({
                 />
               </Field>
             )}
+            {register && <Field>
+              <FieldLabel htmlFor="register-image">รูปโปรไฟล์ (ไม่บังคับ)</FieldLabel>
+              <div className="flex items-center gap-4">
+                <Avatar size="lg" className="size-16">
+                  {profilePreview && <AvatarImage src={profilePreview} alt="รูปโปรไฟล์" />}
+                  <AvatarFallback>?</AvatarFallback>
+                </Avatar>
+                <ProfileImageInput id="register-image" disabled={busy}
+                  onChange={(cropped) => {
+                    setProfileImage(cropped);
+                    setProfilePreview(URL.createObjectURL(cropped));
+                    setError("");
+                  }} onError={setError} />
+              </div>
+            </Field>}
             <Field>
               <FieldLabel htmlFor="email">อีเมล</FieldLabel>
               <div className="flex items-center gap-2">
@@ -217,13 +252,13 @@ export function AccountForm({
                 placeholder="กดส่ง OTP ก่อน" disabled={busy || !pendingEmail} />
             </Field>}
             {captcha && !pendingEmail && <div ref={container} />}
-            {(!register || pendingEmail) && <Button type="submit" disabled={busy || (!register && captcha && !token)}>
+            <Button type="submit" disabled={busy || (register && !pendingEmail) || (!register && captcha && !token)}>
               {busy
                 ? "กำลังดำเนินการ..."
                 : register
-                  ? "ยืนยันอีเมล"
+                  ? "สมัครสมาชิก"
                   : "เข้าสู่ระบบ"}
-            </Button>}
+            </Button>
           </FieldGroup>
         </form>
         {register ? <Button variant="link" nativeButton={false}