feat(auth): replace Google login with credentials

components/admin/login-card.tsx

@@ -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>
   );
 }