feat(auth): redesign auth pages with glass UI and motion animations

- error page: replace Card with glass-strong panel, add AlertTriangle icon
- signin page: add framer-motion entrance animation, CalendarDays branding,
  Loader2 spinner while loading, merge isPending/session checks
- signout page: replace Card with glass-strong panel, add LogOut icon,
  tighten user identity display
This commit is contained in:
2026-04-08 00:56:08 -04:00
parent c6086bdcc7
commit 59bc8fee38
3 changed files with 89 additions and 94 deletions

View File

@@ -1,16 +1,10 @@
"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 {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { signOut, useSession } from "@/lib/auth-client";
export default function SignOutPage() {
@@ -33,37 +27,38 @@ export default function SignOutPage() {
}
return (
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<CardTitle className="text-2xl font-bold">Sign Out</CardTitle>
<CardDescription>Are you sure you want to sign out?</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="text-center p-3 bg-muted rounded-lg">
<div className="text-sm text-muted-foreground">
Currently signed in as
</div>
<div className="font-medium">
{session.user?.name || session.user?.email}
</div>
</div>
<div className="flex items-center justify-center py-20">
<div className="glass-strong rounded-2xl p-8 w-full max-w-sm space-y-6">
<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="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 className="rounded-lg bg-muted/40 px-4 py-3 text-center">
<div className="text-xs text-muted-foreground mb-0.5">
Signed in as
</div>
</CardContent>
</Card>
<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>
);
}