MichilisandClaude Opus 5
ae2ea20b7e
Monorepo (pnpm workspaces) with two deployable apps and three pure packages. apps/api (Hono on Node): Zod validated env that fails fast and names the problem, Kysely factories for SQLite and Postgres chosen by DATABASE_URL scheme, portable migrations covering the whole SPEC section 5 schema, Better Auth with the four roles and seeded demo accounts, localized error envelope, /healthz and /readyz, graceful SIGTERM drain. Dialect specific SQL is confined to the two factories. apps/web (Next.js App Router): locale routed shell in es and en with a language switcher, sign in screen, and a runtime /api proxy so the browser only ever sees one origin and cookies stay first party. packages/i18n ships both catalogs complete; es is generated from COPY.md and a test re-derives it from the document on every run so it cannot drift. packages/contracts holds the Zod schemas and the typed client the web app uses. Verified: 43 vitest tests, 14 Playwright tests on mobile and desktop, typecheck and lint clean, migrate and seed from a clean database, sign in through the proxy with CSRF rejection of foreign origins. Not verified here: docker compose. This user has no access to the docker socket. RULES.md is absent from docs/, so packages/rules exports only RULES_VERSION and no tax rule, check digit or deadline was invented. See DECISIONS.md. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { useRouter } from '@/i18n/navigation';
|
|
import { useT } from '@/i18n/t';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { authClient } from '@/lib/auth-client';
|
|
|
|
export function LoginForm() {
|
|
const t = useT();
|
|
const router = useRouter();
|
|
|
|
const signIn = useMutation({
|
|
mutationFn: async (form: { email: string; password: string }) => {
|
|
const { error } = await authClient.signIn.email(form);
|
|
if (error) throw new Error(error.message ?? 'sign_in_failed');
|
|
},
|
|
onSuccess: () => router.push('/inicio'),
|
|
});
|
|
|
|
return (
|
|
<Card className="space-y-6">
|
|
<h1 className="text-2xl font-semibold tracking-tight text-balance">{t('auth.login.title')}</h1>
|
|
|
|
<form
|
|
className="space-y-4"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
const data = new FormData(event.currentTarget);
|
|
signIn.mutate({
|
|
email: String(data.get('email') ?? ''),
|
|
password: String(data.get('password') ?? ''),
|
|
});
|
|
}}
|
|
>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="email">{t('auth.register.email')}</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
aria-invalid={signIn.isError}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="password">{t('auth.login.password')}</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
aria-invalid={signIn.isError}
|
|
/>
|
|
</div>
|
|
|
|
{signIn.isError ? (
|
|
<p role="alert" className="text-sm text-overdue">
|
|
{t('auth.login.failed')}
|
|
</p>
|
|
) : null}
|
|
|
|
<Button type="submit" size="lg" block disabled={signIn.isPending}>
|
|
{signIn.isPending ? t('common.loading') : t('auth.login.submit')}
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|