feat : updae

2026-10-07 17:03:15 +07:00
parent 1fa2f80a83
commit 5d195968ec
43 changed files with 515 additions and 243 deletions
@@ -3,11 +3,15 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState, type FormEvent } from "react";
+import { EyeClosedIcon, EyeIcon } from "lucide-react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 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 { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
 import { authClient } from "@/lib/auth/client";

 declare global {
@@ -20,6 +24,7 @@ declare global {
        "error-callback": () => void;
      }): string;
      reset(widgetId: string): void;
+      remove(widgetId: string): void;
    };
  }
 }
@@ -44,6 +49,8 @@ export function AccountForm({
  const [pendingEmail, setPendingEmail] = useState("");
  const [notice, setNotice] = useState("");
  const [token, setToken] = useState("");
+  const [captchaError, setCaptchaError] = useState("");
+  const [captchaAttempt, setCaptchaAttempt] = useState(0);
  const [showPassword, setShowPassword] = useState(false);
  const [resendSeconds, setResendSeconds] = useState(0);
  const formRef = useRef<HTMLFormElement>(null);
@@ -57,24 +64,50 @@ export function AccountForm({
  }, [resendSeconds]);
  useEffect(() => {
    if (!captcha || pendingEmail) return;
+    let active = true;
    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;
+    const failed = () => {
+      if (!active) return;
+      window.clearTimeout(timeout);
+      setToken("");
+      setCaptchaError("โหลดการตรวจสอบความปลอดภัยไม่สำเร็จ กรุณาลองอีกครั้ง");
+    };
+    const timeout = window.setTimeout(failed, 15000);
+    script.onerror = failed;
    script.onload = () => {
-      if (container.current && window.turnstile && !widget.current)
+      if (!active) return;
+      if (!container.current || !window.turnstile) return failed();
+      try {
        widget.current = window.turnstile.render(container.current, {
          sitekey: siteKey,
-          callback: (value: string) => setToken(value),
-          "expired-callback": () => setToken(""),
-          "error-callback": () => setToken(""),
+          callback: (value: string) => {
+            if (!active) return;
+            window.clearTimeout(timeout);
+            setCaptchaError("");
+            setToken(value);
+          },
+          "expired-callback": () => {
+            if (!active) return;
+            setToken("");
+            setCaptchaError("การตรวจสอบหมดอายุ กรุณาตรวจสอบอีกครั้ง");
+          },
+          "error-callback": failed,
        });
+        window.clearTimeout(timeout);
+      } catch { failed(); }
    };
-    document.head.append(script);
+    if (window.turnstile) script.onload(new Event("load"));
+    else document.head.append(script);
    return () => {
+      active = false;
+      window.clearTimeout(timeout);
      script.remove();
+      if (widget.current) window.turnstile?.remove(widget.current);
+      widget.current = null;
    };
-  }, [captcha, siteKey, pendingEmail]);
+  }, [captcha, siteKey, pendingEmail, captchaAttempt]);

  async function sendRegistrationOtp() {
    if (!register || busy || (pendingEmail && resendSeconds > 0)) return;
@@ -165,7 +198,8 @@ export function AccountForm({
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>{register ? pendingEmail ? "ยืนยันอีเมล" : "สร้างบัญชี Buzz Guide" : "เข้าสู่ระบบ"}</CardTitle>
-        {register && <CardDescription>ขั้นตอน {pendingEmail ? "2 จาก 2 · ยืนยันอีเมล" : "1 จาก 2 · ข้อมูลบัญชี"}</CardDescription>}
+        {nextPath.startsWith("/commission") && <CardDescription>เข้าสู่ระบบเพื่อบันทึกคำขอ รับผล และพูดคุยกับทีมงาน</CardDescription>}
+        {register && <CardDescription>ขั้นตอน {pendingEmail ? "2 จาก 2 - ยืนยันอีเมล" : "1 จาก 2 - ข้อมูลบัญชี"}</CardDescription>}
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {verified && <Alert><AlertDescription>ยืนยันอีเมลแล้ว กรุณาเข้าสู่ระบบ</AlertDescription></Alert>}
@@ -185,26 +219,46 @@ export function AccountForm({
                  autoComplete="email" disabled={busy} />
              </Field>
              <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} />
+                <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
+                <InputGroup>
+                  <InputGroupInput 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} />
+                  <InputGroupAddon align="inline-end" className="py-0">
+                    <InputGroupButton size="icon-xs" disabled={busy}
+                      aria-label={showPassword ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
+                      aria-controls="password" aria-pressed={showPassword}
+                      onClick={() => setShowPassword((current) => !current)}>
+                      {showPassword ? <EyeIcon aria-hidden="true" /> : <EyeClosedIcon aria-hidden="true" />}
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
                {register && <FieldDescription id="password-help">ใช้รหัสผ่านอย่างน้อย 6 ตัวอักษร</FieldDescription>}
              </Field>
-              {captcha && <div ref={container} />}
+              {captcha && <Field>
+                <p className="text-sm text-muted-foreground">ตรวจสอบความปลอดภัยก่อนดำเนินการ</p>
+                <div ref={container} />
+                {captchaError && <Alert variant="destructive" role="alert"><AlertDescription>{captchaError}</AlertDescription></Alert>}
+                {captchaError && <Button type="button" variant="outline" disabled={busy} onClick={() => {
+                  setToken(""); setCaptchaError(""); setCaptchaAttempt((attempt) => attempt + 1);
+                }}>ลองตรวจสอบอีกครั้ง</Button>}
+              </Field>}
            </> : <>
              <p className="text-sm">ส่งรหัสไปที่ <strong className="break-all">{pendingEmail}</strong></p>
+              <p className="text-sm text-muted-foreground">หากกรอกอีเมลผิด ให้เริ่มสมัครด้วยอีเมลที่ใช้งานได้ บัญชีเดิมจะยังไม่ยืนยันอีเมล</p>
+              <Button type="button" variant="outline" disabled={busy} onClick={() => {
+                setPendingEmail(""); setNotice(""); setError(""); setToken("");
+                setCaptchaError(""); setResendSeconds(0); setCaptchaAttempt((attempt) => attempt + 1);
+              }}>ใช้อีเมลอื่น</Button>
              <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} />
+                <InputOTP id="otp" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
+                  pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required autoFocus
+                  aria-describedby="otp-help" disabled={busy}>
+                  <InputOTPGroup className="w-full">
+                    {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
+                  </InputOTPGroup>
+                </InputOTP>
                <FieldDescription id="otp-help">รหัสมีอายุ 5 นาที หากไม่พบอีเมล ลองดูในโฟลเดอร์สแปม</FieldDescription>
              </Field>
              <Button type="button" variant="outline" onClick={() => void sendRegistrationOtp()}
@@ -214,7 +268,7 @@ export function AccountForm({
            </>}
            {error && <Alert variant="destructive" role="alert"><AlertDescription>{error}</AlertDescription></Alert>}
            <Button type="submit" disabled={busy || (captcha && !token && !pendingEmail)}>
-              {busy ? "กำลังดำเนินการ…" : register ? pendingEmail ? "ยืนยันและสร้างบัญชี" : "ถัดไป · ส่งรหัสยืนยัน" : "เข้าสู่ระบบ"}
+              {busy ? "กำลังดำเนินการ…" : register ? pendingEmail ? "ยืนยันและสร้างบัญชี" : "ถัดไป - ส่งรหัสยืนยัน" : "เข้าสู่ระบบ"}
            </Button>
          </FieldGroup>
        </form>
@@ -73,7 +73,7 @@ export function EmailActionForm({ mode, token = "", invalidToken = false, nextPa
              <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 ? "กำลังดำเนินการ..." :
+          <Button type="submit" className="min-h-11" disabled={busy}>{busy ? "กำลังดำเนินการ..." :
            mode === "forgot" ? "ส่งลิงก์รีเซ็ต" : "ตั้งรหัสผ่าน"}</Button>
        </FieldGroup>
      </form>}
@@ -3,11 +3,13 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState, type FormEvent } from "react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 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 { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { authClient } from "@/lib/auth/client";

 export function RegistrationOtpForm({ email, nextPath, setup }: {
@@ -66,8 +68,12 @@ export function RegistrationOtpForm({ email, nextPath, setup }: {
            <Input ref={emailRef} id="otp-email" name="email" type="email" defaultValue={email} autoComplete="email" required disabled={busy || sending} />
          </Field>
          <Field><FieldLabel htmlFor="otp-code">รหัส OTP</FieldLabel>
-            <Input id="otp-code" name="otp" inputMode="numeric" autoComplete="one-time-code"
-              pattern="[0-9]{6}" minLength={6} maxLength={6} required disabled={busy || sending} />
+            <InputOTP id="otp-code" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
+              pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required disabled={busy || sending}>
+              <InputOTPGroup className="w-full">
+                {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
+              </InputOTPGroup>
+            </InputOTP>
          </Field>
          <Button type="submit" disabled={busy || sending}>{busy ? "กำลังยืนยัน..." : "ยืนยันอีเมล"}</Button>
        </FieldGroup>
@@ -2,11 +2,18 @@

 import { useRouter } from "next/navigation";
 import { LogOutIcon } from "lucide-react";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/client";
 import { unsubscribeCommissionPush } from "@/components/commission/push-client";

-export function SignOutButton({ admin = false }: { admin?: boolean }) {
+export function SignOutButton({
+  admin = false,
+  menuItem = false,
+}: {
+  admin?: boolean;
+  menuItem?: boolean;
+}) {
  const router = useRouter();
  const { data } = authClient.useSession();
  if (!admin && !data?.user) return null;
@@ -14,11 +21,27 @@ export function SignOutButton({ admin = false }: { admin?: boolean }) {
  async function signOut() {
    await unsubscribeCommissionPush().catch(() => undefined);
    await authClient.signOut();
-    router.push(admin ? "/auth/login?next=%2Fadmin" : "/commission");
+    router.push(admin ? "/auth/login?next=%2Fadmin" : "/");
    router.refresh();
  }

-  return <Button type="button" variant="ghost" size="icon-sm" aria-label="ออกจากระบบ" onClick={() => void signOut()}>
-    <LogOutIcon />
-  </Button>;
+  if (menuItem)
+    return (
+      <DropdownMenuItem onClick={() => void signOut()}>
+        <LogOutIcon/>
+       <span className="text-red-400">ออกจากระบบ</span>
+      </DropdownMenuItem>
+    );
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label="ออกจากระบบ"
+      onClick={() => void signOut()}
+    >
+      <LogOutIcon />
+    </Button>
+  );
 }