import { FormEvent, useEffect, useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import InputError from '@/components/input-error'; import TextLink from '@/components/text-link'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AuthLayout from '@/layouts/auth-layout'; import { register } from '@/routes'; import { request } from '@/routes/password'; import { LoaderCircle } from 'lucide-react'; interface LoginProps { status?: string; canResetPassword: boolean; } export default function Login({ status, canResetPassword }: LoginProps) { const [hasTriedSubmit, setHasTriedSubmit] = useState(false); const { data, setData, post, processing, errors, clearErrors } = useForm({ email: '', password: '', remember: false, }); const submit = (e: FormEvent) => { e.preventDefault(); setHasTriedSubmit(true); post('/login', { preserveScroll: true, }); }; useEffect(() => { if (!hasTriedSubmit) { return; } const errorKeys = Object.keys(errors); if (errorKeys.length === 0) { return; } const field = document.querySelector(`[name="${errorKeys[0]}"]`); if (field) { field.scrollIntoView({ behavior: 'smooth', block: 'center' }); field.focus(); } }, [errors, hasTriedSubmit]); return (
{ setData('email', e.target.value); if (errors.email) { clearErrors('email'); } }} />
{canResetPassword && ( Forgot password? )}
{ setData('password', e.target.value); if (errors.password) { clearErrors('password'); } }} />
setData('remember', Boolean(checked))} />
Don't have an account?{' '} Sign up
{status &&
{status}
} {Object.keys(errors).length > 0 && (

{Object.values(errors).join(' ')}

)} ); }