feat(auth): replace Google login with credentials

2026-08-29 07:54:15 +00:00
parent c5a3fed1f0
commit 659a57fb4a
12 changed files with 413 additions and 57 deletions
@@ -1,33 +1,62 @@
 "use client";

-import { KeyRoundIcon, LogInIcon } from "lucide-react";
-import { useState } from "react";
+import { CircleAlertIcon, LogInIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { type FormEvent, useState } from "react";

-import { Button } from "@/components/ui/button";
+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";

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

-  async function signIn() {
+  async function signIn(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
    setLoading(true);
    setError(null);
-    const result = await authClient.signIn.social({
-      provider: "google",
-      callbackURL: "/admin",
-      errorCallbackURL: "/admin/login?error=oauth",
-    });
-    if (result.error) {
-      setError("เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง");
+
+    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,
+      });
+      if (result.error) {
+        setError(
+          result.error.code === "INVALID_EMAIL_OR_PASSWORD"
+            ? "อีเมลหรือรหัสผ่านไม่ถูกต้อง"
+            : "เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง",
+        );
+        return;
+      }
+      router.push("/admin");
+      router.refresh();
+    } catch {
+      setError("เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง");
+    } finally {
      setLoading(false);
    }
  }
@@ -35,21 +64,64 @@ export function LoginCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
-        <div className="mb-3 grid size-11 place-items-center rounded-xl bg-primary text-primary-foreground">
-          <LogInIcon aria-hidden="true" />
-        </div>
        <CardTitle className="text-xl">เข้าสู่ระบบผู้ดูแล</CardTitle>
        <CardDescription>
-          ใช้บัญชี Google ที่ได้รับอนุญาตให้จัดการคู่มือ
+          ใช้อีเมลและรหัสผ่านของบัญชีผู้ดูแล Better Auth
        </CardDescription>
      </CardHeader>
-      <CardContent className="space-y-3">
-        <Button className="w-full" size="lg" onClick={signIn} disabled={loading}>
-          {loading ? <Spinner /> : <KeyRoundIcon aria-hidden="true" />}
-          {loading ? "กำลังเชื่อมต่อ…" : "ดำเนินการต่อด้วย Google"}
-        </Button>
-        {error ? <p role="alert" className="text-sm text-destructive">{error}</p> : null}
+      <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>
+            {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" />
+              ) : (
+                <LogInIcon data-icon="inline-start" aria-hidden="true" />
+              )}
+              {loading ? "กำลังเข้าสู่ระบบ…" : "เข้าสู่ระบบ"}
+            </Button>
+          </FieldGroup>
+        </form>
      </CardContent>
+      <CardFooter className="justify-center">
+        <Link
+          href="/register"
+          className={buttonVariants({ variant: "link", size: "sm" })}
+        >
+          สร้างบัญชีผู้ดูแลชั่วคราว
+        </Link>
+      </CardFooter>
    </Card>
  );
 }
@@ -0,0 +1,190 @@
+"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>
+  );
+}