login-seiten neu designt, homepage neu designt. "so funktioniert's" ergänzt und Demo-Seite hinzugefügt. Paketansicht in mobile verbessert.
This commit is contained in:
Codex Agent
@@ -35,17 +35,20 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
});
|
||||
};
|
||||
|
||||
const errorKeys = Object.keys(errors);
|
||||
const hasErrors = errorKeys.length > 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasTriedSubmit) {
|
||||
return;
|
||||
}
|
||||
|
||||
const errorKeys = Object.keys(errors);
|
||||
if (errorKeys.length === 0) {
|
||||
const keys = Object.keys(errors);
|
||||
if (keys.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${errorKeys[0]}"]`);
|
||||
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${keys[0]}"]`);
|
||||
|
||||
if (field) {
|
||||
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
@@ -57,10 +60,17 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
<AuthLayout title={t('login.title')} description={t('login.description')}>
|
||||
<Head title={t('login.title')} />
|
||||
|
||||
<form onSubmit={submit} className="flex flex-col gap-6">
|
||||
<div className="grid gap-6">
|
||||
<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">{t('login.email')}</Label>
|
||||
<Label htmlFor="email" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
||||
{t('login.email')}
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
@@ -77,15 +87,26 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
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"
|
||||
/>
|
||||
<InputError key={`error-email`} message={errors.email} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center">
|
||||
<Label htmlFor="password">{t('login.password')}</Label>
|
||||
<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" tabIndex={5}>
|
||||
<TextLink
|
||||
href={request()}
|
||||
className="ml-auto text-sm font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
|
||||
tabIndex={5}
|
||||
>
|
||||
{t('login.forgot')}
|
||||
</TextLink>
|
||||
)}
|
||||
@@ -105,44 +126,69 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
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"
|
||||
/>
|
||||
<InputError key={`error-password`} message={errors.password} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<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">{t('login.remember')}</Label>
|
||||
<Label htmlFor="remember" className="cursor-pointer select-none font-semibold text-gray-700 dark:text-gray-200">
|
||||
{t('login.remember')}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing}>
|
||||
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
|
||||
{t('login.submit')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
<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}>
|
||||
<TextLink
|
||||
href={register()}
|
||||
tabIndex={5}
|
||||
className="font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
|
||||
>
|
||||
{t('login.sign_up')}
|
||||
</TextLink>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{status && <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>}
|
||||
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="p-4 bg-red-50 border border-red-200 rounded-md mb-4">
|
||||
<p className="text-sm text-red-800">
|
||||
{Object.values(errors).join(' ')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user