65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { LogOut } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { signOut, useSession } from "@/lib/auth-client";
|
|
|
|
export default function SignOutPage() {
|
|
const { data: session, isPending } = useSession();
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (!session?.user) {
|
|
router.push("/");
|
|
}
|
|
}, [session, router]);
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
router.push("/");
|
|
};
|
|
|
|
if (isPending || !session?.user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center px-4 py-20">
|
|
<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]">
|
|
<div className="text-center">
|
|
<LogOut className="h-8 w-8 text-muted-foreground mx-auto mb-3" />
|
|
<h1 className="text-lg font-semibold">Sign Out</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Are you sure you want to sign out?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-[8px] bg-muted px-4 py-3 text-center shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]">
|
|
<div className="text-xs text-muted-foreground mb-0.5">
|
|
Signed in as
|
|
</div>
|
|
<div className="text-sm font-medium">
|
|
{session.user?.name || session.user?.email}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Button
|
|
onClick={handleSignOut}
|
|
variant="destructive"
|
|
className="w-full"
|
|
>
|
|
Sign Out
|
|
</Button>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/">Cancel</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|