feat : updae
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user