die tenant admin oauth authentifizierung wurde implementiert und funktioniert jetzt. Zudem wurde das marketing frontend dashboard implementiert.
This commit is contained in:
Codex Agent
@@ -1,4 +1,5 @@
|
||||
import { FormEvent, useEffect, useState } from 'react';
|
||||
import { FormEvent, useEffect, useMemo, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Head, useForm } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import InputError from '@/components/input-error';
|
||||
@@ -8,6 +9,7 @@ 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';
|
||||
@@ -19,12 +21,15 @@ interface LoginProps {
|
||||
|
||||
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 { data, setData, post, processing, errors, clearErrors } = useForm({
|
||||
email: '',
|
||||
login: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
return_to: '',
|
||||
});
|
||||
|
||||
const submit = (e: FormEvent<HTMLFormElement>) => {
|
||||
@@ -38,6 +43,19 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
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'));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setData('return_to', rawReturnTo ?? '');
|
||||
}, [rawReturnTo, setData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasTriedSubmit) {
|
||||
return;
|
||||
@@ -56,42 +74,70 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
}
|
||||
}, [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')}>
|
||||
<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="email" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
||||
<Label htmlFor="login" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
||||
{t('login.email')}
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
id="login"
|
||||
type="text"
|
||||
name="login"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={1}
|
||||
autoComplete="email"
|
||||
autoComplete="username"
|
||||
placeholder={t('login.email_placeholder')}
|
||||
value={data.email}
|
||||
value={data.login}
|
||||
onChange={(e) => {
|
||||
setData('email', e.target.value);
|
||||
if (errors.email) {
|
||||
clearErrors('email');
|
||||
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-email`}
|
||||
message={errors.email}
|
||||
key={`error-login`}
|
||||
message={errors.login}
|
||||
className="text-sm font-medium text-rose-600 dark:text-rose-400"
|
||||
/>
|
||||
</div>
|
||||
@@ -178,6 +224,32 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
)}
|
||||
</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
|
||||
@@ -192,3 +264,28 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user