Adds front-end set-up

2026-06-20 17:04:17 +02:00
parent efd1569c26
commit 7dfc3a9692
62 changed files with 6875 additions and 3 deletions
@@ -0,0 +1,133 @@
+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>
+    );
+}