195 lines
9.0 KiB
TypeScript
195 lines
9.0 KiB
TypeScript
import { FormEvent, useEffect, useState } from 'react';
|
|
import { Head, useForm } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
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 { t } = useTranslation('auth');
|
|
|
|
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setHasTriedSubmit(true);
|
|
post(window.location.pathname, {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const errorKeys = Object.keys(errors);
|
|
const hasErrors = errorKeys.length > 0;
|
|
|
|
useEffect(() => {
|
|
if (!hasTriedSubmit) {
|
|
return;
|
|
}
|
|
|
|
const keys = Object.keys(errors);
|
|
if (keys.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${keys[0]}"]`);
|
|
|
|
if (field) {
|
|
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
field.focus();
|
|
}
|
|
}, [errors, hasTriedSubmit]);
|
|
|
|
return (
|
|
<AuthLayout title={t('login.title')} description={t('login.description')}>
|
|
<Head title={t('login.title')} />
|
|
|
|
<form
|
|
onSubmit={submit}
|
|
className="relative flex flex-col gap-6 overflow-hidden rounded-3xl border border-gray-200/70 bg-white/80 p-6 shadow-xl shadow-rose-200/40 backdrop-blur-sm transition dark:border-gray-800/80 dark:bg-gray-900/70"
|
|
>
|
|
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pink-400/80 via-rose-400/70 to-sky-400/70" aria-hidden />
|
|
|
|
<div className="grid gap-6 pt-2 sm:pt-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
|
{t('login.email')}
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
autoFocus
|
|
tabIndex={1}
|
|
autoComplete="email"
|
|
placeholder={t('login.email_placeholder')}
|
|
value={data.email}
|
|
onChange={(e) => {
|
|
setData('email', e.target.value);
|
|
if (errors.email) {
|
|
clearErrors('email');
|
|
}
|
|
}}
|
|
className="h-12 rounded-xl border-gray-200/80 bg-white/90 px-4 text-base shadow-inner shadow-gray-200/40 focus-visible:ring-[#ff8bb1]/40 dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100"
|
|
/>
|
|
<InputError
|
|
key={`error-email`}
|
|
message={errors.email}
|
|
className="text-sm font-medium text-rose-600 dark:text-rose-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
|
{t('login.password')}
|
|
</Label>
|
|
{canResetPassword && (
|
|
<TextLink
|
|
href={request()}
|
|
className="ml-auto text-sm font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
|
|
tabIndex={5}
|
|
>
|
|
{t('login.forgot')}
|
|
</TextLink>
|
|
)}
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
name="password"
|
|
required
|
|
tabIndex={2}
|
|
autoComplete="current-password"
|
|
placeholder={t('login.password_placeholder')}
|
|
value={data.password}
|
|
onChange={(e) => {
|
|
setData('password', e.target.value);
|
|
if (errors.password) {
|
|
clearErrors('password');
|
|
}
|
|
}}
|
|
className="h-12 rounded-xl border-gray-200/80 bg-white/90 px-4 text-base shadow-inner shadow-gray-200/40 focus-visible:ring-[#ff8bb1]/40 dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100"
|
|
/>
|
|
<InputError
|
|
key={`error-password`}
|
|
message={errors.password}
|
|
className="text-sm font-medium text-rose-600 dark:text-rose-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 rounded-2xl border border-gray-200/60 bg-gray-50/70 px-4 py-3 text-sm font-medium text-gray-600 shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-200">
|
|
<Checkbox
|
|
id="remember"
|
|
name="remember"
|
|
tabIndex={3}
|
|
checked={data.remember}
|
|
className="size-5 rounded-lg border-gray-300 bg-white/90 data-[state=checked]:border-transparent data-[state=checked]:bg-[#ff5f87] data-[state=checked]:text-white dark:border-gray-700 dark:bg-gray-900/70"
|
|
onCheckedChange={(checked) => setData('remember', Boolean(checked))}
|
|
/>
|
|
<Label htmlFor="remember" className="cursor-pointer select-none font-semibold text-gray-700 dark:text-gray-200">
|
|
{t('login.remember')}
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="mt-2 h-12 w-full justify-center rounded-xl bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
|
|
tabIndex={4}
|
|
disabled={processing}
|
|
>
|
|
{processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
|
{t('login.submit')}
|
|
</Button>
|
|
|
|
<div className="space-y-4 text-sm">
|
|
{status && (
|
|
<div className="rounded-2xl border border-emerald-200/70 bg-emerald-50/90 p-3 text-center font-medium text-emerald-700 shadow-sm">
|
|
{status}
|
|
</div>
|
|
)}
|
|
|
|
{hasErrors && (
|
|
<div
|
|
key={`general-errors-${errorKeys.join('-')}`}
|
|
role="alert"
|
|
className="rounded-2xl border border-rose-200/80 bg-rose-50/90 p-3 text-center font-medium text-rose-700 shadow-sm dark:border-rose-900/50 dark:bg-rose-900/40 dark:text-rose-100"
|
|
>
|
|
{Object.values(errors).join(' ')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-gray-200/60 bg-gray-50/80 p-4 text-center text-sm text-muted-foreground shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60">
|
|
{t('login.no_account')}{' '}
|
|
<TextLink
|
|
href={register()}
|
|
tabIndex={5}
|
|
className="font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
|
|
>
|
|
{t('login.sign_up')}
|
|
</TextLink>
|
|
</div>
|
|
</form>
|
|
</AuthLayout>
|
|
);
|
|
}
|