feat(i18n): Complete localization of marketing frontend with react-i18next, prefixed URLs, JSON migrations, and automation
This commit is contained in:
Codex Agent
@@ -1,5 +1,6 @@
|
||||
import { FormEvent, useEffect, useState } from 'react';
|
||||
import { Head, useForm } 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';
|
||||
@@ -18,6 +19,7 @@ interface LoginProps {
|
||||
|
||||
export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
||||
const { t } = useTranslation('auth');
|
||||
|
||||
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
||||
email: '',
|
||||
@@ -52,13 +54,13 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
}, [errors, hasTriedSubmit]);
|
||||
|
||||
return (
|
||||
<AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
|
||||
<Head title="Log in" />
|
||||
<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">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email address</Label>
|
||||
<Label htmlFor="email">{t('login.email')}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
@@ -67,7 +69,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
autoFocus
|
||||
tabIndex={1}
|
||||
autoComplete="email"
|
||||
placeholder="email@example.com"
|
||||
placeholder={t('login.email_placeholder')}
|
||||
value={data.email}
|
||||
onChange={(e) => {
|
||||
setData('email', e.target.value);
|
||||
@@ -81,10 +83,10 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Label htmlFor="password">{t('login.password')}</Label>
|
||||
{canResetPassword && (
|
||||
<TextLink href={request()} className="ml-auto text-sm" tabIndex={5}>
|
||||
Forgot password?
|
||||
{t('login.forgot')}
|
||||
</TextLink>
|
||||
)}
|
||||
</div>
|
||||
@@ -95,7 +97,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
required
|
||||
tabIndex={2}
|
||||
autoComplete="current-password"
|
||||
placeholder="Password"
|
||||
placeholder={t('login.password_placeholder')}
|
||||
value={data.password}
|
||||
onChange={(e) => {
|
||||
setData('password', e.target.value);
|
||||
@@ -115,19 +117,19 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
checked={data.remember}
|
||||
onCheckedChange={(checked) => setData('remember', Boolean(checked))}
|
||||
/>
|
||||
<Label htmlFor="remember">Remember me</Label>
|
||||
<Label htmlFor="remember">{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" />}
|
||||
Log in
|
||||
{t('login.submit')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{' '}
|
||||
{t('login.no_account')}{' '}
|
||||
<TextLink href={register()} tabIndex={5}>
|
||||
Sign up
|
||||
{t('login.sign_up')}
|
||||
</TextLink>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
|
||||
@@ -18,6 +19,7 @@ import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||||
export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
|
||||
const [privacyOpen, setPrivacyOpen] = useState(false);
|
||||
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
||||
const { t } = useTranslation('auth');
|
||||
|
||||
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
||||
username: '',
|
||||
@@ -60,23 +62,23 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}, [errors, hasTriedSubmit]);
|
||||
|
||||
return (
|
||||
<MarketingLayout title="Registrieren">
|
||||
<MarketingLayout title={t('register.title')}>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl w-full space-y-8">
|
||||
<div className="bg-white rounded-lg shadow-md p-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold text-gray-900 font-display">
|
||||
Willkommen bei Fotospiel – Erstellen Sie Ihren Account
|
||||
{t('register.welcome')}
|
||||
</h2>
|
||||
<p className="mt-4 text-center text-gray-600 font-sans-marketing">
|
||||
Registrierung ermöglicht Zugriff auf Events, Galerien und personalisierte Features.
|
||||
{t('register.description')}
|
||||
</p>
|
||||
{initialPackage && (
|
||||
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
|
||||
<p className="text-blue-800 mb-2">{initialPackage.description}</p>
|
||||
<p className="text-sm text-blue-700">
|
||||
{initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
|
||||
{initialPackage.price === 0 ? t('register.package_price_free') : t('register.package_price', { price: initialPackage.price })}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -85,7 +87,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Vorname *
|
||||
{t('register.first_name')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -102,7 +104,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Vorname"
|
||||
placeholder={t('register.first_name_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.first_name && <p key={`error-first_name`} className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
|
||||
@@ -110,7 +112,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nachname *
|
||||
{t('register.last_name')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -127,7 +129,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Nachname"
|
||||
placeholder={t('register.last_name_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.last_name && <p key={`error-last_name`} className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
|
||||
@@ -135,7 +137,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
E-Mail-Adresse *
|
||||
{t('register.email')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -152,7 +154,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="email@example.com"
|
||||
placeholder={t('register.email_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && <p key={`error-email`} className="text-sm text-red-600 mt-1">{errors.email}</p>}
|
||||
@@ -160,7 +162,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Adresse *
|
||||
{t('register.address')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -177,7 +179,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Adresse"
|
||||
placeholder={t('register.address_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.address && <p key={`error-address`} className="text-sm text-red-600 mt-1">{errors.address}</p>}
|
||||
@@ -185,7 +187,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Telefon *
|
||||
{t('register.phone')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -202,7 +204,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Telefonnummer"
|
||||
placeholder={t('register.phone_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.phone && <p key={`error-phone`} className="text-sm text-red-600 mt-1">{errors.phone}</p>}
|
||||
@@ -210,7 +212,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Benutzername *
|
||||
{t('register.username')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -227,7 +229,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Benutzername"
|
||||
placeholder={t('register.username_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.username && <p key={`error-username`} className="text-sm text-red-600 mt-1">{errors.username}</p>}
|
||||
@@ -235,7 +237,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Passwort *
|
||||
{t('register.password')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -255,7 +257,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Passwort"
|
||||
placeholder={t('register.password_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.password && <p key={`error-password`} className="text-sm text-red-600 mt-1">{errors.password}</p>}
|
||||
@@ -263,7 +265,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Passwort bestätigen *
|
||||
{t('register.confirm_password')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
@@ -283,7 +285,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Passwort bestätigen"
|
||||
placeholder={t('register.confirm_password_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
{errors.password_confirmation && <p key={`error-password_confirmation`} className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
|
||||
@@ -305,15 +307,14 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
|
||||
Ich stimme der{' '}
|
||||
{t('register.privacy_consent')}{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPrivacyOpen(true)}
|
||||
className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
|
||||
>
|
||||
Datenschutzerklärung
|
||||
</button>{' '}
|
||||
zu.
|
||||
{t('register.privacy_policy')}
|
||||
</button>.
|
||||
</label>
|
||||
{errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
|
||||
</div>
|
||||
@@ -321,7 +322,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
|
||||
{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-6">
|
||||
<h4 className="text-sm font-medium text-red-800 mb-2">Fehler bei der Registrierung:</h4>
|
||||
<h4 className="text-sm font-medium text-red-800 mb-2">{t('register.errors_title')}</h4>
|
||||
<ul className="text-sm text-red-800 space-y-1">
|
||||
{Object.entries(errors).map(([key, value]) => (
|
||||
<li key={key} className="flex items-start">
|
||||
@@ -338,14 +339,14 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
|
||||
>
|
||||
{processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
|
||||
Account erstellen
|
||||
{t('register.submit')}
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Bereits registriert?{' '}
|
||||
{t('register.has_account')}{' '}
|
||||
<a href="/login" className="font-medium text-[#FFB6C1] hover:text-[#FF69B4]">
|
||||
Anmelden
|
||||
{t('register.login')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user