99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Navigate, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Gift, Loader2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { loginSchema, type LoginInput } from '@family-wishlist/shared';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Label } from '@/components/ui/Label';
|
|
import { useAuthStore } from '@/features/auth/authStore';
|
|
import { ApiError } from '@/lib/api';
|
|
import { Footer } from '@/components/Layout/Footer';
|
|
|
|
export function LoginPage() {
|
|
const { user, login } = useAuthStore();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<LoginInput>({
|
|
resolver: zodResolver(loginSchema),
|
|
defaultValues: { username: '', password: '' },
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (user) navigate(from, { replace: true });
|
|
}, [user, from, navigate]);
|
|
|
|
if (user) return <Navigate to={from} replace />;
|
|
|
|
const submit = handleSubmit(async (values) => {
|
|
try {
|
|
await login(values.username, values.password);
|
|
navigate(from, { replace: true });
|
|
} catch (err) {
|
|
if (err instanceof ApiError) toast.error(err.message);
|
|
else toast.error('Login failed');
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<div className="container-page flex flex-1 items-center justify-center py-12">
|
|
<div className="w-full max-w-md animate-fade-in-up">
|
|
<div className="mb-6 flex items-center justify-center gap-2">
|
|
<span className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
|
|
<Gift className="h-5 w-5" />
|
|
</span>
|
|
<h1 className="font-display text-3xl">Family Wishlist</h1>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-border bg-surface p-6 shadow-card sm:p-8">
|
|
<h2 className="mb-1 text-xl font-semibold">Welcome back</h2>
|
|
<p className="mb-6 text-sm text-muted">
|
|
Sign in to manage your wishlist. Credentials are set up via the server environment.
|
|
</p>
|
|
<form className="grid gap-4" onSubmit={submit}>
|
|
<div className="field">
|
|
<Label htmlFor="username">Username</Label>
|
|
<Input
|
|
id="username"
|
|
autoComplete="username"
|
|
autoFocus
|
|
{...register('username')}
|
|
/>
|
|
{errors.username && (
|
|
<span className="field__error">{errors.username.message}</span>
|
|
)}
|
|
</div>
|
|
<div className="field">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
{...register('password')}
|
|
/>
|
|
{errors.password && (
|
|
<span className="field__error">{errors.password.message}</span>
|
|
)}
|
|
</div>
|
|
<Button type="submit" size="lg" disabled={isSubmitting}>
|
|
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
Sign in
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|