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

"use client";

import { CircleAlertIcon, UserPlusIcon } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { type FormEvent, 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,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Spinner } from "@/components/ui/spinner";
import { authClient } from "@/lib/auth/client";

function registrationError(code: string | undefined): string {
  switch (code) {
    case "ADMIN_REGISTRATION_FORBIDDEN":
      return "อีเมลนี้ไม่ได้รับอนุญาตให้สร้างบัญชีผู้ดูแล";
    case "USER_ALREADY_EXISTS_USE_ANOTHER_EMAIL":
      return "บัญชีนี้มีอยู่แล้ว โปรดกลับไปเข้าสู่ระบบ";
    case "PASSWORD_TOO_SHORT":
      return "รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร";
    case "PASSWORD_TOO_LONG":
      return "รหัสผ่านต้องไม่เกิน 128 ตัวอักษร";
    default:
      return "สร้างบัญชีไม่สำเร็จ โปรดตรวจสอบข้อมูลแล้วลองอีกครั้ง";
  }
}

export function RegisterCard() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function register(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);

    const formData = new FormData(event.currentTarget);
    const name = String(formData.get("name") ?? "").trim();
    const email = String(formData.get("email") ?? "").trim();
    const password = String(formData.get("password") ?? "");
    const confirmation = String(formData.get("passwordConfirmation") ?? "");

    if (!name) {
      setError("กรุณากรอกชื่อผู้ดูแล");
      return;
    }
    if (password !== confirmation) {
      setError("รหัสผ่านทั้งสองช่องไม่ตรงกัน");
      return;
    }

    setLoading(true);
    try {
      const result = await authClient.signUp.email({
        name,
        email,
        password,
      });
      if (result.error) {
        setError(registrationError(result.error.code));
        return;
      }
      router.push("/admin");
      router.refresh();
    } catch {
      setError("เชื่อมต่อระบบลงทะเบียนไม่ได้ โปรดลองอีกครั้ง");
    } finally {
      setLoading(false);
    }
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle className="text-xl">สร้างบัญชีผู้ดูแล</CardTitle>
        <CardDescription>
          ลงทะเบียนด้วยอีเมลและรหัสผ่านสำหรับ Better Auth
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={register}>
          <FieldGroup>
            <Alert>
              <CircleAlertIcon aria-hidden="true" />
              <AlertTitle>หน้าลงทะเบียนชั่วคราว</AlertTitle>
              <AlertDescription>
                ระบบรับเฉพาะอีเมลที่ระบุไว้ใน ADMIN_EMAIL เท่านั้น
                ควรนำหน้านี้ออกหลังสร้างบัญชีสำเร็จ
              </AlertDescription>
            </Alert>
            <Field>
              <FieldLabel htmlFor="register-name">ชื่อผู้ดูแล</FieldLabel>
              <Input
                id="register-name"
                name="name"
                autoComplete="name"
                disabled={loading}
                required
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="register-email">อีเมล</FieldLabel>
              <Input
                id="register-email"
                name="email"
                type="email"
                autoComplete="username"
                autoCapitalize="none"
                spellCheck={false}
                disabled={loading}
                required
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="register-password">รหัสผ่าน</FieldLabel>
              <Input
                id="register-password"
                name="password"
                type="password"
                autoComplete="new-password"
                minLength={8}
                maxLength={128}
                disabled={loading}
                required
              />
              <FieldDescription>อย่างน้อย 8 ตัวอักษร</FieldDescription>
            </Field>
            <Field>
              <FieldLabel htmlFor="register-password-confirmation">
                ยืนยันรหัสผ่าน
              </FieldLabel>
              <Input
                id="register-password-confirmation"
                name="passwordConfirmation"
                type="password"
                autoComplete="new-password"
                minLength={8}
                maxLength={128}
                disabled={loading}
                required
              />
            </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}>
              {loading ? (
                <Spinner data-icon="inline-start" />
              ) : (
                <UserPlusIcon data-icon="inline-start" aria-hidden="true" />
              )}
              {loading ? "กำลังสร้างบัญชี…" : "สร้างบัญชีผู้ดูแล"}
            </Button>
          </FieldGroup>
        </form>
      </CardContent>
      <CardFooter className="justify-center">
        <Link
          href="/admin/login"
          className={buttonVariants({ variant: "link", size: "sm" })}
        >
          กลับไปเข้าสู่ระบบ
        </Link>
      </CardFooter>
    </Card>
  );
}