import { Form, Head } from '@inertiajs/react'; import { Sparkles } from 'lucide-react'; import InputError from '@/components/input-error'; import PasswordInput from '@/components/password-input'; 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 { Spinner } from '@/components/ui/spinner'; import { useT } from '@/lib/i18n'; import { authCheckboxClass, authHelperTextClass, authInputClass, authLabelClass, authLinkClass, authNoticeClass, authPrimaryButtonClass, } from '@/pages/auth/styles'; import { register } from '@/routes'; import { store } from '@/routes/login'; import { request } from '@/routes/password'; type DemoCredential = { role: string; email: string; password: string; description?: string; }; type Props = { status?: string; canResetPassword: boolean; canRegister: boolean; demoCredentials?: DemoCredential[]; }; /** * Click-to-fill helper. Walks the rendered form to the email + password * inputs by name attribute and sets their values via the native input * setter so React/Preact sees the change, then dispatches an `input` * event so Inertia's
picks up the new value on submit. */ function fillCredentials(email: string, password: string): void { const setValue = (name: string, value: string): void => { const el = document.querySelector( `input[name="${name}"]`, ); if (!el) { return; } const setter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, 'value', )?.set; if (setter) { setter.call(el, value); } else { el.value = value; } el.dispatchEvent(new Event('input', { bubbles: true })); }; setValue('email', email); setValue('password', password); document.querySelector('input[name="email"]')?.focus(); } export default function Login({ status, canResetPassword, canRegister, demoCredentials = [], }: Props) { const { t } = useT(); return ( <> {demoCredentials.length > 0 && ( // Solid colours throughout — the auth layout uses a // hardcoded cream palette and ignores the `dark` class, // so opacity-tinted backgrounds (bg-white/80) bleed // through and wash out the text. Stick to fully-opaque // amber-tinted backgrounds + slate text for guaranteed // contrast.
{t('Demo credentials — click to autofill')}
{demoCredentials.map((c) => ( ))}
)} {({ processing, errors }) => ( <> {status && (
{status}
)}
{canResetPassword && ( {t('Forgot password?')} )}
{canRegister && (
{t("Don't have an account?")}{' '} {t('Sign up')}
)} )} ); } Login.layout = { title: 'Log in to your account', description: 'Enter your email and password below to log in', };