feat(ui) : improve guide navigation, signup, and commissions

2026-10-07 04:39:57 +07:00
parent b35c1a4471
commit 22f5f96231
31 changed files with 737 additions and 400 deletions
@@ -4,13 +4,11 @@ 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldGroup, FieldLabel, FieldDescription } 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 {
@@ -44,20 +42,21 @@ 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 [showPassword, setShowPassword] = useState(false);
+  const [resendSeconds, setResendSeconds] = useState(0);
  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;
+    if (!resendSeconds) return;
+    const timer = window.setTimeout(() => setResendSeconds((seconds) => seconds - 1), 1000);
+    return () => window.clearTimeout(timer);
+  }, [resendSeconds]);
+  useEffect(() => {
+    if (!captcha || pendingEmail) return;
    const script = document.createElement("script");
    script.src =
      "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
@@ -75,10 +74,10 @@ export function AccountForm({
    return () => {
      script.remove();
    };
-  }, [captcha, siteKey]);
+  }, [captcha, siteKey, pendingEmail]);

  async function sendRegistrationOtp() {
-    if (!register || busy) return;
+    if (!register || busy || (pendingEmail && resendSeconds > 0)) return;
    if (pendingEmail) {
      setBusy(true);
      setError("");
@@ -89,6 +88,7 @@ export function AccountForm({
        });
        if (result.error) throw new Error("ส่งรหัสใหม่ไม่สำเร็จ กรุณาลองอีกครั้ง");
        setNotice("ส่งรหัสใหม่แล้ว กรุณาตรวจสอบอีเมลของคุณ");
+        setResendSeconds(60);
      } catch (cause) {
        setError(cause instanceof Error ? cause.message : "ส่งรหัสใหม่ไม่สำเร็จ");
      } finally { setBusy(false); }
@@ -111,7 +111,7 @@ export function AccountForm({
      });
      if (result.error) throw new Error(result.error.message ?? "ส่งรหัสไม่สำเร็จ กรุณาลองอีกครั้ง");
      setPendingEmail(email);
-      setPendingName(name);
+      setResendSeconds(60);
      setNotice("ส่งรหัส 6 หลักแล้ว กรุณาตรวจสอบอีเมลและกรอกรหัสภายใน 5 นาที");
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
@@ -135,18 +135,7 @@ export function AccountForm({
          email: pendingEmail, otp: String(form.get("otp") ?? "").trim(),
        });
        if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
-        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.replace(`/profile?setup=1&next=${encodeURIComponent(nextPath)}`);
        router.refresh();
        return;
      }
@@ -175,89 +164,57 @@ export function AccountForm({
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
-        <CardTitle>{register ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}</CardTitle>
+        <CardTitle>{register ? pendingEmail ? "ยืนยันอีเมล" : "สร้างบัญชี Buzz Guide" : "เข้าสู่ระบบ"}</CardTitle>
+        {register && <CardDescription>ขั้นตอน {pendingEmail ? "2 จาก 2 · ยืนยันอีเมล" : "1 จาก 2 · ข้อมูลบัญชี"}</CardDescription>}
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {verified && <Alert><AlertDescription>ยืนยันอีเมลแล้ว กรุณาเข้าสู่ระบบ</AlertDescription></Alert>}
        {verificationError && <Alert variant="destructive"><AlertDescription>ลิงก์ยืนยันไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่</AlertDescription></Alert>}
-        {notice && <Alert><AlertDescription>{notice}</AlertDescription></Alert>}
-        {register && !pendingEmail && <p className="text-sm text-muted-foreground">
-          กรอกชื่อ อีเมล และรหัสผ่าน แล้วกดส่ง OTP
-        </p>}
+        {notice && <Alert role="status"><AlertDescription>{notice}</AlertDescription></Alert>}
        <form ref={formRef} onSubmit={submit}>
          <FieldGroup>
-            {register && (
-              <Field>
+            {!pendingEmail ? <>
+              {register && <Field>
                <FieldLabel htmlFor="name">ชื่อที่แสดง</FieldLabel>
-                <Input
-                  id="name"
-                  name="name"
-                  required
-                  minLength={2}
-                  maxLength={80}
-                  autoComplete="name"
-                  disabled={busy || Boolean(pendingEmail)}
-                />
+                <Input id="name" name="name" required minLength={2} maxLength={80}
+                  autoComplete="name" disabled={busy} />
+              </Field>}
+              <Field>
+                <FieldLabel htmlFor="email">อีเมล</FieldLabel>
+                <Input id="email" name="email" type="email" required
+                  autoComplete="email" disabled={busy} />
              </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">
-                <Input
-                  id="email"
-                  name="email"
-                  type="email"
-                  className="min-w-0 flex-1"
-                  required
-                  autoComplete="email"
-                  disabled={busy || Boolean(pendingEmail)}
-                />
-                {register && <Button type="button" variant="outline" className="shrink-0"
-                  onClick={sendRegistrationOtp} disabled={busy || (captcha && !token && !pendingEmail)}>
-                  {busy ? "กำลังส่ง..." : pendingEmail ? "ส่งอีกครั้ง" : "ส่ง OTP"}
-                </Button>}
-              </div>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
-              <Input
-                id="password"
-                name="password"
-                type="password"
-                required
-                minLength={6}
-                autoComplete={register ? "new-password" : "current-password"}
-                disabled={busy || Boolean(pendingEmail)}
-              />
-            </Field>
-            {register && <Field>
-              <FieldLabel htmlFor="otp">รหัส OTP</FieldLabel>
-              <Input id="otp" name="otp" inputMode="numeric" autoComplete="one-time-code"
-                pattern="[0-9]{6}" minLength={6} maxLength={6} required={Boolean(pendingEmail)}
-                placeholder="กดส่ง OTP ก่อน" disabled={busy || !pendingEmail} />
-            </Field>}
-            {captcha && !pendingEmail && <div ref={container} />}
-            <Button type="submit" disabled={busy || (register && !pendingEmail) || (!register && captcha && !token)}>
-              {busy
-                ? "กำลังดำเนินการ..."
-                : register
-                  ? "สมัครสมาชิก"
-                  : "เข้าสู่ระบบ"}
+              <Field>
+                <div className="flex items-center justify-between gap-2">
+                  <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
+                  <Button type="button" variant="ghost" size="sm" disabled={busy}
+                    aria-pressed={showPassword} onClick={() => setShowPassword((current) => !current)}>
+                    {showPassword ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
+                  </Button>
+                </div>
+                <Input id="password" name="password" type={showPassword ? "text" : "password"}
+                  required minLength={6} autoComplete={register ? "new-password" : "current-password"}
+                  aria-describedby={register ? "password-help" : undefined} disabled={busy} />
+                {register && <FieldDescription id="password-help">ใช้รหัสผ่านอย่างน้อย 6 ตัวอักษร</FieldDescription>}
+              </Field>
+              {captcha && <div ref={container} />}
+            </> : <>
+              <p className="text-sm">ส่งรหัสไปที่ <strong className="break-all">{pendingEmail}</strong></p>
+              <Field>
+                <FieldLabel htmlFor="otp">รหัสยืนยัน 6 หลัก</FieldLabel>
+                <Input id="otp" name="otp" inputMode="numeric" autoComplete="one-time-code"
+                  pattern="[0-9]{6}" minLength={6} maxLength={6} required autoFocus
+                  placeholder="000000" aria-describedby="otp-help" disabled={busy} />
+                <FieldDescription id="otp-help">รหัสมีอายุ 5 นาที หากไม่พบอีเมล ลองดูในโฟลเดอร์สแปม</FieldDescription>
+              </Field>
+              <Button type="button" variant="outline" onClick={() => void sendRegistrationOtp()}
+                disabled={busy || resendSeconds > 0}>
+                {resendSeconds > 0 ? `ส่งรหัสใหม่ได้ใน ${resendSeconds} วินาที` : "ส่งรหัสอีกครั้ง"}
+              </Button>
+            </>}
+            {error && <Alert variant="destructive" role="alert"><AlertDescription>{error}</AlertDescription></Alert>}
+            <Button type="submit" disabled={busy || (captcha && !token && !pendingEmail)}>
+              {busy ? "กำลังดำเนินการ…" : register ? pendingEmail ? "ยืนยันและสร้างบัญชี" : "ถัดไป · ส่งรหัสยืนยัน" : "เข้าสู่ระบบ"}
            </Button>
          </FieldGroup>
        </form>
@@ -274,11 +231,6 @@ export function AccountForm({
            ลืมรหัสผ่าน?
          </Button>
        </div>}
-        {error && (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
      </CardContent>
    </Card>
  );
@@ -1,9 +1,10 @@
 "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 { Button, buttonVariants } from "@/components/ui/button";
 import {
  Card,
  CardContent,
@@ -128,6 +129,7 @@ export function ProfileForm({
        >
          {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
        </Button>
+        {nextPath && <Link href={nextPath} className={buttonVariants({ variant: "outline" })}>ข้ามและเริ่มใช้งาน</Link>}
      </CardFooter>
    </Card>
  );