91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { PasswordField } from '@/components/form';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { AuthBackground } from '@/components/auth/AuthBackground';
|
|
import { GuestGuard } from '@/guards';
|
|
import { useLoginForm } from '@/hooks/useLoginForm';
|
|
import { ROUTES } from '@/utils/routes';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
export default function LoginPage() {
|
|
const { register, handleSubmit, errors, isLoading } = useLoginForm();
|
|
|
|
return (
|
|
<GuestGuard>
|
|
<div className="flex min-h-screen w-full">
|
|
<AuthBackground />
|
|
<div className="flex flex-1 md:w-1/2 items-center justify-center p-6 border-l border-border h-screen">
|
|
<section className="w-full max-w-sm space-y-7">
|
|
<header className="space-y-2 text-center md:text-left">
|
|
<p className="text-sm font-medium text-muted-foreground">
|
|
VisionRoad
|
|
</p>
|
|
<h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Use your email and password to continue.
|
|
</p>
|
|
</header>
|
|
|
|
<form className="space-y-5" onSubmit={handleSubmit}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="admin@visionroad.ai"
|
|
autoComplete="email"
|
|
disabled={isLoading}
|
|
aria-invalid={!!errors.email}
|
|
{...register('email', {
|
|
required: 'Email is required',
|
|
})}
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.email.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<PasswordField
|
|
id="password"
|
|
label="Password"
|
|
required
|
|
labelEnd={
|
|
<Link href={ROUTES.FORGOT_PASSWORD} className="text-primary">
|
|
Forgot password?
|
|
</Link>
|
|
}
|
|
placeholder="Enter password"
|
|
autoComplete="current-password"
|
|
disabled={isLoading}
|
|
aria-invalid={!!errors.password}
|
|
error={errors.password?.message}
|
|
{...register('password', {
|
|
required: 'Password is required',
|
|
})}
|
|
/>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="size-4 animate-spin" />
|
|
Signing in
|
|
</>
|
|
) : (
|
|
'Sign in'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</GuestGuard>
|
|
);
|
|
}
|