134 lines
5.5 KiB
TypeScript
134 lines
5.5 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useNavigate, useSearch } from '@tanstack/react-router';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { z } from 'zod';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useAuth } from '@/contexts/auth-context';
|
|
import { NetworkError, ProblemDetailsError } from '@/lib/api-client';
|
|
|
|
export function LoginPage() {
|
|
const { t } = useTranslation();
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
const search = useSearch({ strict: false }) as { redirect?: string };
|
|
const [serverError, setServerError] = useState<string | null>(null);
|
|
|
|
const schema = useMemo(
|
|
() =>
|
|
z.object({
|
|
email: z
|
|
.string()
|
|
.min(1, t('login.errors.emailRequired'))
|
|
.email(t('login.errors.emailInvalid')),
|
|
password: z.string().min(1, t('login.errors.passwordRequired')),
|
|
}),
|
|
[t],
|
|
);
|
|
|
|
type FormValues = z.infer<typeof schema>;
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<FormValues>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { email: '', password: '' },
|
|
});
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
setServerError(null);
|
|
try {
|
|
await login(values.email, values.password);
|
|
await navigate({ to: search.redirect ?? '/dashboard' });
|
|
} catch (err) {
|
|
if (err instanceof ProblemDetailsError && err.status === 401) {
|
|
setServerError(t('login.errors.invalidCredentials'));
|
|
} else if (err instanceof NetworkError) {
|
|
setServerError(t('errors.network'));
|
|
} else {
|
|
setServerError(t('login.errors.generic'));
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4">
|
|
<Card className="w-full max-w-sm">
|
|
<CardHeader>
|
|
<CardTitle>{t('login.title')}</CardTitle>
|
|
<CardDescription>{t('login.subtitle')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={onSubmit} noValidate className="space-y-4">
|
|
{serverError !== null && (
|
|
<div
|
|
role="alert"
|
|
data-testid="login-error"
|
|
className="rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
|
|
>
|
|
{serverError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">{t('login.email')}</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
placeholder={t('login.emailPlaceholder')}
|
|
data-testid="login-email-input"
|
|
aria-invalid={errors.email !== undefined}
|
|
{...register('email')}
|
|
/>
|
|
{errors.email && (
|
|
<p
|
|
className="text-sm text-destructive"
|
|
data-testid="login-email-error"
|
|
>
|
|
{errors.email.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">{t('login.password')}</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
data-testid="login-password-input"
|
|
aria-invalid={errors.password !== undefined}
|
|
{...register('password')}
|
|
/>
|
|
{errors.password && (
|
|
<p
|
|
className="text-sm text-destructive"
|
|
data-testid="login-password-error"
|
|
>
|
|
{errors.password.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={isSubmitting}
|
|
data-testid="login-form-submit-button"
|
|
>
|
|
{isSubmitting ? t('login.submitting') : t('login.submit')}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|