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}

components/auth/email-settings.tsx

@@ -38,14 +38,15 @@ export function EmailSettings({ email, verified, callbackCompleted, callbackErro
     setError("");
     setMessage("");
     try {
-      const result = await authClient.changeEmail({ newEmail: newEmail.trim(), callbackURL: "/profile?emailAction=1" });
+      const targetEmail = newEmail.trim();
+      const result = await authClient.changeEmail({ newEmail: targetEmail, callbackURL: "/profile?emailAction=1" });
       if (result.error?.code === "SESSION_NOT_FRESH")
         throw new Error("กรุณาออกจากระบบและเข้าสู่ระบบอีกครั้งก่อนเปลี่ยนอีเมล");
       if (result.error) throw new Error("เปลี่ยนอีเมลไม่สำเร็จ กรุณาลองอีกครั้ง");
       setNewEmail("");
       setMessage(verified
-        ? "ตรวจสอบอีเมลปัจจุบันเพื่ออนุมัติ แล้วตรวจสอบอีเมลใหม่เพื่อยืนยัน"
-        : "ตรวจสอบอีเมลใหม่เพื่อยืนยันการเปลี่ยนแปลง");
+        ? `ตรวจสอบ ${email} เพื่ออนุมัติการเปลี่ยนแปลง`
+        : `ตรวจสอบ ${targetEmail} เพื่อยืนยันการเปลี่ยนแปลง`);
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "เปลี่ยนอีเมลไม่สำเร็จ");
     } finally { setBusy(false); }
@@ -54,7 +55,7 @@ export function EmailSettings({ email, verified, callbackCompleted, callbackErro
   return <Card>
     <CardHeader><CardTitle>อีเมล</CardTitle></CardHeader>
     <CardContent className="flex flex-col gap-4">
-      <p className="text-sm">{email} · {verified ? "ยืนยันแล้ว" : "ยังไม่ยืนยัน"}</p>
+      <p className="text-sm">{email} - {verified ? "ยืนยันแล้ว" : "ยังไม่ยืนยัน"}</p>
       {callbackCompleted && <Alert><AlertDescription>ยืนยันขั้นตอนแล้ว หากกำลังเปลี่ยนอีเมล โปรดตรวจสอบกล่องจดหมายสำหรับขั้นตอนถัดไป</AlertDescription></Alert>}
       {callbackError && <Alert variant="destructive"><AlertDescription>ลิงก์ยืนยันไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่</AlertDescription></Alert>}
       {message && <Alert><AlertDescription>{message}</AlertDescription></Alert>}

components/auth/profile-form.tsx

@@ -1,7 +1,6 @@
 "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";
@@ -129,15 +128,6 @@ export function ProfileForm({
         >
           {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
         </Button>
-        {nextPath && (
-          <Button
-            variant="ghost"
-            nativeButton={false}
-            render={<Link href={nextPath} />}
-          >
-            ไว้ก่อน
-          </Button>
-        )}
       </CardFooter>
     </Card>
   );

components/auth/registration-otp-form.tsx

@@ -32,7 +32,7 @@ export function RegistrationOtpForm({ email, nextPath, setup }: {
       const result = await authClient.emailOtp.verifyEmail({ email: address, otp });
       if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
       const returnPath = setup ? `/profile?setup=1&next=${encodeURIComponent(nextPath)}` : nextPath;
-      router.push(`/login?verified=1&next=${encodeURIComponent(returnPath)}`);
+      router.replace(returnPath);
       router.refresh();
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "ยืนยันอีเมลไม่สำเร็จ");