buzz-sheet/components/admin/login-card.tsx

"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 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 (
      !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("ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
        },
      },
    );
  }, [turnstileSiteKey]);

  function resetTurnstile() {
    setTurnstileToken(null);
    if (window.turnstile && turnstileWidgetIdRef.current) {
      window.turnstile.reset(turnstileWidgetIdRef.current);
    }
  }

  async function signIn(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!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: { "x-captcha-response": turnstileToken },
        },
      });
      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>
            <Field>
              <div ref={turnstileContainerRef} className="min-h-[65px]" />
              <Script
                src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
                strategy="afterInteractive"
                onLoad={renderTurnstile}
                onReady={renderTurnstile}
                onError={() => {
                  setTurnstileToken(null);
                  setError("โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
                }}
              />
            </Field>
            {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 || !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>
  );
}