317 lines
14 KiB
TypeScript
317 lines
14 KiB
TypeScript
import { FormEvent, useEffect, useMemo, useState } from 'react';
|
|
import type { ReactNode } from 'react';
|
|
import { Head, useForm, usePage } 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 AppLayout from '@/layouts/app/AppLayout';
|
|
import { register } from '@/routes';
|
|
import { request } from '@/routes/password';
|
|
import { LoaderCircle } from 'lucide-react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
interface LoginProps {
|
|
status?: string;
|
|
canResetPassword: boolean;
|
|
}
|
|
|
|
export default function Login({ status, canResetPassword }: LoginProps) {
|
|
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
|
const [rawReturnTo, setRawReturnTo] = useState<string | null>(null);
|
|
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
|
|
const { t } = useTranslation('auth');
|
|
const page = usePage<{ flash?: { verification?: { status: string; title?: string; message?: string } } }>();
|
|
const verificationFlash = page.props.flash?.verification;
|
|
|
|
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
|
login: '',
|
|
password: '',
|
|
remember: false,
|
|
return_to: '',
|
|
});
|
|
|
|
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 (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
setRawReturnTo(searchParams.get('return_to'));
|
|
|
|
if (searchParams.get('verified') === '1') {
|
|
toast.success(t('verification.toast_success', 'Email verified successfully.'));
|
|
searchParams.delete('verified');
|
|
const nextQuery = searchParams.toString();
|
|
const nextUrl = `${window.location.pathname}${nextQuery ? `?${nextQuery}` : ''}`;
|
|
window.history.replaceState({}, '', nextUrl);
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
setData('return_to', rawReturnTo ?? '');
|
|
}, [rawReturnTo, setData]);
|
|
|
|
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]);
|
|
|
|
const googleHref = useMemo(() => {
|
|
if (!rawReturnTo) {
|
|
return '/event-admin/auth/google';
|
|
}
|
|
|
|
const params = new URLSearchParams({
|
|
return_to: rawReturnTo,
|
|
});
|
|
|
|
return `/event-admin/auth/google?${params.toString()}`;
|
|
}, [rawReturnTo]);
|
|
|
|
const handleGoogleLogin = () => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
setIsRedirectingToGoogle(true);
|
|
window.location.href = googleHref;
|
|
};
|
|
|
|
return (
|
|
<AuthLayout
|
|
title={t('login.title')}
|
|
description={t('login.description')}
|
|
name={t('login.brand', t('login.title'))}
|
|
logoSrc="/logo-transparent-lg.png"
|
|
logoAlt={t('login.logo_alt', 'Die Fotospiel App')}
|
|
>
|
|
<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"
|
|
>
|
|
<input type="hidden" name="return_to" value={data.return_to ?? ''} />
|
|
<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="login" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
|
{t('login.email')}
|
|
</Label>
|
|
<Input
|
|
id="login"
|
|
type="text"
|
|
name="login"
|
|
required
|
|
autoFocus
|
|
tabIndex={1}
|
|
autoComplete="username"
|
|
placeholder={t('login.email_placeholder')}
|
|
value={data.login}
|
|
onChange={(e) => {
|
|
setData('login', e.target.value);
|
|
if (errors.login) {
|
|
clearErrors('login');
|
|
}
|
|
}}
|
|
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-login`}
|
|
message={errors.login}
|
|
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>
|
|
)}
|
|
|
|
{verificationFlash && (
|
|
<div
|
|
className={[
|
|
'rounded-2xl border p-3 text-center font-medium shadow-sm',
|
|
verificationFlash.status === 'success'
|
|
? 'border-emerald-200/70 bg-emerald-50/90 text-emerald-700'
|
|
: 'border-rose-200/70 bg-rose-50/90 text-rose-700',
|
|
].join(' ')}
|
|
>
|
|
<div className="font-semibold">{verificationFlash.title ?? ''}</div>
|
|
<div className="text-sm">{verificationFlash.message}</div>
|
|
</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="space-y-3">
|
|
<div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
|
|
<span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
|
|
{t('login.oauth_divider', 'oder')}
|
|
<span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleGoogleLogin}
|
|
disabled={processing || isRedirectingToGoogle}
|
|
className="flex h-12 w-full items-center justify-center gap-3 rounded-xl border-gray-200/80 bg-white/90 text-sm font-semibold text-gray-700 shadow-inner shadow-gray-200/40 transition hover:bg-white dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80"
|
|
>
|
|
{isRedirectingToGoogle ? (
|
|
<LoaderCircle className="h-5 w-5 animate-spin" aria-hidden />
|
|
) : (
|
|
<GoogleIcon className="h-5 w-5" />
|
|
)}
|
|
<span>{t('login.google_cta')}</span>
|
|
</Button>
|
|
<p className="text-center text-xs text-muted-foreground dark:text-gray-300">
|
|
{t('login.google_helper', 'Nutze dein Google-Konto, um dich sicher bei der Eventverwaltung anzumelden.')}
|
|
</p>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
Login.layout = (page: ReactNode) => <AppLayout header={<></>}>{page}</AppLayout>;
|
|
|
|
function GoogleIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" aria-hidden>
|
|
<path
|
|
fill="#4285F4"
|
|
d="M23.52 12.272c0-.851-.076-1.67-.217-2.455H12v4.639h6.44a5.51 5.51 0 0 1-2.393 3.622v3.01h3.88c2.271-2.093 3.593-5.18 3.593-8.816Z"
|
|
/>
|
|
<path
|
|
fill="#34A853"
|
|
d="M12 24c3.24 0 5.957-1.073 7.943-2.912l-3.88-3.01c-1.073.72-2.446 1.147-4.063 1.147-3.124 0-5.773-2.111-6.717-4.954H1.245v3.11C3.221 21.64 7.272 24 12 24Z"
|
|
/>
|
|
<path
|
|
fill="#FBBC05"
|
|
d="M5.283 14.27a7.2 7.2 0 0 1 0-4.54V6.62H1.245a11.996 11.996 0 0 0 0 10.76l4.038-3.11Z"
|
|
/>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M12 4.75c1.761 0 3.344.606 4.595 1.794l3.447-3.447C17.957 1.012 15.24 0 12 0 7.272 0 3.221 2.36 1.245 6.62l4.038 3.11C6.227 6.861 8.876 4.75 12 4.75Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|