Login

1// Login page (`/login`) — composes the shipped LoginForm (credential state machine) with
2// SocialButtons (Google/Facebook redirect). On credential SUCCESS it returns the member to where
3// they came from (RequireAuth stashes it in location.state.from) or home. Social login returns via
4// /callback instead. Styled with base44 design tokens (shadcn Tailwind classes) — don't rewrite this page to add chrome
5// (the Header/Footer live in the Layout).
6import { useNavigate, useLocation } from "react-router-dom";
7import LoginForm from "@/components/LoginForm";
8import SocialButtons from "@/components/SocialButtons";
9
10export default function Login() {
11  const navigate = useNavigate();
12  const location = useLocation();
13  const from = location.state?.from || "/";
14
15  return (
16    <main className="max-w-[420px] mx-auto py-8 px-4 flex flex-col gap-5">
17      <h1 className="font-display text-center m-0">Welcome</h1>
18
19      <LoginForm onSuccess={() => navigate(from, { replace: true })} />
20
21      <Divider>or</Divider>
22      <SocialButtons />
23    </main>
24  );
25}
26
27function Divider({ children }) {
28  return (
29    <div className="flex items-center gap-3 text-muted-foreground text-[13px]">
30      <span className="flex-1 h-px bg-border" />
31      {children}
32      <span className="flex-1 h-px bg-border" />
33    </div>
34  );
35}