feat : update
This commit is contained in:
@@ -1,216 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { CircleAlertIcon, LogInIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Script from "next/script";
|
||||
import { type FormEvent, useCallback, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/components/ui/alert";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { authClient } from "@/lib/auth/client";
|
||||
|
||||
interface TurnstileApi {
|
||||
render(
|
||||
container: HTMLElement,
|
||||
options: {
|
||||
sitekey: string;
|
||||
callback: (token: string) => void;
|
||||
"expired-callback": () => void;
|
||||
"error-callback": () => void;
|
||||
},
|
||||
): string;
|
||||
reset(widgetId: string): void;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
turnstile?: TurnstileApi;
|
||||
}
|
||||
}
|
||||
|
||||
interface LoginCardProps {
|
||||
turnstileSiteKey: string;
|
||||
}
|
||||
|
||||
export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
|
||||
const router = useRouter();
|
||||
const turnstileEnabled = process.env.NODE_ENV !== "development";
|
||||
const turnstileContainerRef = useRef<HTMLDivElement>(null);
|
||||
const turnstileWidgetIdRef = useRef<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
|
||||
|
||||
const renderTurnstile = useCallback(() => {
|
||||
if (
|
||||
!turnstileEnabled ||
|
||||
!window.turnstile ||
|
||||
!turnstileContainerRef.current ||
|
||||
turnstileWidgetIdRef.current
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
turnstileWidgetIdRef.current = window.turnstile.render(
|
||||
turnstileContainerRef.current,
|
||||
{
|
||||
sitekey: turnstileSiteKey,
|
||||
callback: (token) => {
|
||||
setTurnstileToken(token);
|
||||
setError(null);
|
||||
},
|
||||
"expired-callback": () => setTurnstileToken(null),
|
||||
"error-callback": () => {
|
||||
setTurnstileToken(null);
|
||||
setError("ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
|
||||
},
|
||||
},
|
||||
);
|
||||
}, [turnstileEnabled, turnstileSiteKey]);
|
||||
|
||||
function resetTurnstile() {
|
||||
setTurnstileToken(null);
|
||||
if (window.turnstile && turnstileWidgetIdRef.current) {
|
||||
window.turnstile.reset(turnstileWidgetIdRef.current);
|
||||
}
|
||||
}
|
||||
|
||||
async function signIn(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (turnstileEnabled && !turnstileToken) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const email = String(formData.get("email") ?? "").trim();
|
||||
const password = String(formData.get("password") ?? "");
|
||||
|
||||
try {
|
||||
const result = await authClient.signIn.email({
|
||||
email,
|
||||
password,
|
||||
rememberMe: true,
|
||||
fetchOptions: {
|
||||
headers: turnstileEnabled && turnstileToken
|
||||
? { "x-captcha-response": turnstileToken }
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
if (result.error) {
|
||||
setError(
|
||||
result.error.code === "INVALID_EMAIL_OR_PASSWORD"
|
||||
? "อีเมลหรือรหัสผ่านไม่ถูกต้อง"
|
||||
: "เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง",
|
||||
);
|
||||
return;
|
||||
}
|
||||
router.push("/admin");
|
||||
router.refresh();
|
||||
} catch {
|
||||
setError("เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง");
|
||||
} finally {
|
||||
resetTurnstile();
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">เข้าสู่ระบบผู้ดูแล</CardTitle>
|
||||
<CardDescription>
|
||||
ใช้อีเมลและรหัสผ่านของบัญชีผู้
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={signIn}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="login-email">อีเมล</FieldLabel>
|
||||
<Input
|
||||
id="login-email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
autoCapitalize="none"
|
||||
spellCheck={false}
|
||||
disabled={loading}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="login-password">รหัสผ่าน</FieldLabel>
|
||||
<Input
|
||||
id="login-password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
disabled={loading}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
{turnstileEnabled ? (
|
||||
<Field>
|
||||
<div ref={turnstileContainerRef} className="min-h-16.25" />
|
||||
<Script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
|
||||
strategy="afterInteractive"
|
||||
onLoad={renderTurnstile}
|
||||
onReady={renderTurnstile}
|
||||
onError={() => {
|
||||
setTurnstileToken(null);
|
||||
setError("โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<CircleAlertIcon aria-hidden="true" />
|
||||
<AlertTitle>เข้าสู่ระบบไม่สำเร็จ</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
<Button
|
||||
className="w-full"
|
||||
size="lg"
|
||||
type="submit"
|
||||
disabled={loading || (turnstileEnabled && !turnstileToken)}
|
||||
>
|
||||
{loading ? (
|
||||
<Spinner data-icon="inline-start" />
|
||||
) : (
|
||||
<LogInIcon data-icon="inline-start" aria-hidden="true" />
|
||||
)}
|
||||
{loading ? "กำลังเข้าสู่ระบบ…" : "เข้าสู่ระบบ"}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter className="justify-center">
|
||||
<div>
|
||||
ยังไม่มีบัญชี? {" "}
|
||||
<Link href="https://file.gunshiz.top/api/raw/flRCGwLA" className={buttonVariants({ variant: "link", size: "sm" })}>
|
||||
สร้างบัญชีเลย
|
||||
</Link>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user