86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { TextField } from "@repo/rdx-ui/components";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
Form,
|
|
Spinner,
|
|
} from "@repo/shadcn-ui/components";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
|
|
import type { LoginForm } from "../entities";
|
|
|
|
interface LoginCardProps {
|
|
form: UseFormReturn<LoginForm>;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
export function LoginCard({ form, onSubmit }: LoginCardProps) {
|
|
const rootError = form.formState.errors.root?.message;
|
|
|
|
return (
|
|
<Card className="border-border/70 bg-card/95 shadow-lg backdrop-blur-sm">
|
|
<CardHeader className="space-y-2">
|
|
<CardTitle className="text-2xl font-semibold tracking-tight">Accede al ERP</CardTitle>
|
|
<CardDescription>Introduce tu email y contraseña para continuar.</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form className="flex flex-col gap-5" onSubmit={onSubmit}>
|
|
<TextField<LoginForm>
|
|
autoComplete="email"
|
|
id="login-email"
|
|
label="Email"
|
|
name="email"
|
|
placeholder="tu@email.com"
|
|
required
|
|
typePreset="email"
|
|
/>
|
|
|
|
<TextField<LoginForm>
|
|
autoComplete="current-password"
|
|
id="login-password"
|
|
label="Contraseña"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
required
|
|
typePreset="password"
|
|
/>
|
|
|
|
{rootError ? (
|
|
<p
|
|
aria-live="polite"
|
|
className="text-sm text-destructive"
|
|
id="login-error"
|
|
role="alert"
|
|
>
|
|
{rootError}
|
|
</p>
|
|
) : null}
|
|
|
|
<Button
|
|
className="mt-1 w-full"
|
|
disabled={form.formState.isSubmitting}
|
|
id="login-submit"
|
|
type="submit"
|
|
>
|
|
{form.formState.isSubmitting ? (
|
|
<>
|
|
<Spinner className="size-4" />
|
|
Iniciando sesión...
|
|
</>
|
|
) : (
|
|
"Entrar"
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|