56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { KeyRoundIcon, LogInIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { authClient } from "@/lib/auth/client";
|
|
|
|
export function LoginCard() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function signIn() {
|
|
setLoading(true);
|
|
setError(null);
|
|
const result = await authClient.signIn.social({
|
|
provider: "google",
|
|
callbackURL: "/admin",
|
|
errorCallbackURL: "/admin/login?error=oauth",
|
|
});
|
|
if (result.error) {
|
|
setError("เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง");
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
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 ที่ได้รับอนุญาตให้จัดการคู่มือ
|
|
</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>
|
|
</Card>
|
|
);
|
|
}
|