174 lines
7.8 KiB
TypeScript
174 lines
7.8 KiB
TypeScript
import React from 'react';
|
|
import { Head, Link, useForm, usePage } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
|
import MarketingLayout from '@/layouts/mainWebsite';
|
|
import { Loader2, CheckCircle2 } from 'lucide-react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
|
|
interface HoneypotPayload {
|
|
enabled: boolean;
|
|
nameFieldName: string;
|
|
validFromFieldName: string;
|
|
encryptedValidFrom: string;
|
|
}
|
|
|
|
type ContactFormData = {
|
|
name: string;
|
|
email: string;
|
|
message: string;
|
|
[key: string]: string;
|
|
};
|
|
|
|
const Kontakt: React.FC = () => {
|
|
const { honeypot, flash } = usePage<{ flash?: { success?: string }; honeypot?: HoneypotPayload }>().props;
|
|
const honeypotDefaults = React.useMemo(() => {
|
|
if (!honeypot?.enabled) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
[honeypot.nameFieldName]: '',
|
|
[honeypot.validFromFieldName]: honeypot.encryptedValidFrom,
|
|
};
|
|
}, [honeypot?.enabled, honeypot?.encryptedValidFrom, honeypot?.nameFieldName, honeypot?.validFromFieldName]);
|
|
|
|
const { data, setData, post, processing, errors, reset } = useForm<ContactFormData>({
|
|
name: '',
|
|
email: '',
|
|
message: '',
|
|
...honeypotDefaults,
|
|
});
|
|
|
|
const { t } = useTranslation('marketing');
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
post(localizedPath('/kontakt'), {
|
|
onSuccess: () => reset(),
|
|
});
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (Object.keys(errors).length > 0) {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
}, [errors]);
|
|
|
|
return (
|
|
<MarketingLayout title={t('kontakt.title')}>
|
|
<Head title={t('kontakt.title')} />
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
className="max-w-2xl mx-auto"
|
|
initial={shouldReduceMotion ? false : { opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
<h1 className="text-3xl font-bold text-center mb-8 font-display text-gray-900 dark:text-gray-100">{t('kontakt.title')}</h1>
|
|
<p className="text-center text-gray-600 dark:text-gray-300 mb-8 font-sans-marketing">{t('kontakt.description')}</p>
|
|
{flash?.success && (
|
|
<div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200/70 bg-emerald-50 px-3 py-2 text-sm text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-100">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
<span>{flash.success}</span>
|
|
</div>
|
|
)}
|
|
<form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
|
|
{honeypot?.enabled ? (
|
|
<div className="hidden" aria-hidden>
|
|
<input
|
|
type="text"
|
|
name={honeypot.nameFieldName}
|
|
id={honeypot.nameFieldName}
|
|
value={data[honeypot.nameFieldName] ?? ''}
|
|
onChange={(event) => setData(honeypot.nameFieldName, event.target.value)}
|
|
autoComplete="off"
|
|
tabIndex={-1}
|
|
/>
|
|
<input
|
|
type="text"
|
|
name={honeypot.validFromFieldName}
|
|
value={data[honeypot.validFromFieldName] ?? honeypot.encryptedValidFrom}
|
|
readOnly
|
|
tabIndex={-1}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.name')}</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
value={data.name}
|
|
onChange={(e) => setData('name', e.target.value)}
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
aria-invalid={Boolean(errors.name)}
|
|
aria-describedby={errors.name ? 'kontakt-name-error' : undefined}
|
|
/>
|
|
{errors.name && <p id="kontakt-name-error" key="error-name" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.email')}</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
aria-invalid={Boolean(errors.email)}
|
|
aria-describedby={errors.email ? 'kontakt-email-error' : undefined}
|
|
/>
|
|
{errors.email && <p id="kontakt-email-error" key="error-email" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.message')}</label>
|
|
<textarea
|
|
id="message"
|
|
value={data.message}
|
|
onChange={(e) => setData('message', e.target.value)}
|
|
rows={4}
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
aria-invalid={Boolean(errors.message)}
|
|
aria-describedby={errors.message ? 'kontakt-message-error' : undefined}
|
|
></textarea>
|
|
{errors.message && <p id="kontakt-message-error" key="error-message" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
|
|
</div>
|
|
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
|
|
{processing ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
{t('kontakt.sending')}
|
|
</span>
|
|
) : (
|
|
t('kontakt.send')
|
|
)}
|
|
</button>
|
|
</form>
|
|
{flash?.success && <p className="mt-4 text-green-600 dark:text-green-400 text-center font-serif-custom">{flash.success}</p>}
|
|
{Object.keys(errors).length > 0 && (
|
|
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-600 rounded-md">
|
|
<ul className="list-disc list-inside">
|
|
{Object.values(errors).map((error, index) => (
|
|
<li key={`error-${index}`} className="font-serif-custom text-red-700 dark:text-red-300">{error}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
<div className="mt-8 text-center">
|
|
<Link href={localizedPath('/')} className="text-[#FFB6C1] hover:underline font-sans-marketing">{t('kontakt.back_home')}</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
Kontakt.layout = (page: React.ReactNode) => page;
|
|
|
|
export default Kontakt;
|