import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { ArrowRight, Briefcase, Shield, Sparkles, UserRound } from 'lucide-react'; import { useEffect, useMemo, useState } from 'react'; import type { FormEventHandler } from 'react'; import InputError from '@/components/input-error'; import PasswordInput from '@/components/password-input'; import TextLink from '@/components/text-link'; import AppLogoIcon from '@/components/app-logo-icon'; 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 { Spinner } from '@/components/ui/spinner'; import { home } from '@/routes'; import { store } from '@/routes/login'; import { request } from '@/routes/password'; import { useI18n } from '@/hooks/use-i18n'; import { cn } from '@/lib/utils'; type LoginPersona = 'employee' | 'client'; type Props = { status?: string; canResetPassword: boolean; }; type LoginFormData = { email: string; password: string; remember: boolean; login_persona: LoginPersona; }; export default function Login({ status, canResetPassword }: Props) { const { t, locale } = useI18n(); const { name } = usePage<{ name: string }>().props; const [persona, setPersona] = useState('employee'); const { data, setData, post, processing, errors, reset } = useForm({ email: '', password: '', remember: false, login_persona: 'employee', }); useEffect(() => { setData('login_persona', persona); }, [persona, setData]); const submit: FormEventHandler = (e) => { e.preventDefault(); post(store.url(), { preserveScroll: true, onSuccess: () => { reset('password'); }, }); }; const badgeDate = useMemo( () => new Intl.DateTimeFormat( locale === 'ro' ? 'ro-RO' : locale === 'bg' ? 'bg-BG' : 'en-GB', { month: 'long', year: 'numeric', }).format(new Date()), [locale], ); const year = new Date().getFullYear(); return (
{/* Marketing column */}
elevio one
{t('auth.login.brand.tagline')}
{t('auth.login.hero.badge', { date: badgeDate })}

{t('auth.login.hero.title_lead')}{' '} {t('auth.login.hero.title_accent')}

{t('auth.login.hero.description')}

{[ { value: t('auth.login.stats.users_value'), label: t('auth.login.stats.users_label') }, { value: t('auth.login.stats.uptime_value'), label: t('auth.login.stats.uptime_label') }, { value: t('auth.login.stats.security_value'), label: t('auth.login.stats.security_label') }, ].map((stat) => (

{stat.value}

{stat.label}

))}

{t('auth.login.footer.security_note')}

{/* Form column */}
{name}
{status ? (
{status}
) : null}

{t('auth.login.persona.heading')}

{persona === 'employee' ? t('auth.login.persona.context_employee') : t('auth.login.persona.context_client')}

setData('email', e.target.value)} />
{canResetPassword ? ( {t('auth.login.form.forgot_password')} ) : null}
setData('password', e.target.value)} />
setData('remember', v === true)} />

{t('auth.login.footer.copyright', { year, app: name })} {' · '} {t('auth.login.footer.terms')} {' · '} {t('auth.login.footer.privacy')}

); }