photobooth funktionen im event admin verlinkt, gäste pwa zeigt photobooth nur noch an, wenn diese aktiviert ist. kontaktformular optimiert. teilen-link mit iMessage und whatsapp erweitert.

resources/js/pages/marketing/Kontakt.tsx

@@ -3,12 +3,14 @@ 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';
 
 const Kontakt: React.FC = () => {
   const { data, setData, post, processing, errors, reset } = useForm({
     name: '',
     email: '',
     message: '',
+    nickname: '',
   });
 
   const { flash } = usePage<{ flash?: { success?: string } }>().props;
@@ -35,7 +37,23 @@ const Kontakt: React.FC = () => {
         <div className="max-w-2xl mx-auto">
           <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">
+            <input
+              type="text"
+              name="nickname"
+              value={data.nickname}
+              onChange={(e) => setData('nickname', e.target.value)}
+              className="hidden"
+              tabIndex={-1}
+              autoComplete="off"
+              aria-hidden
+            />
             <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
@@ -45,8 +63,10 @@ const Kontakt: React.FC = () => {
                 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 key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
+              {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>
@@ -57,8 +77,10 @@ const Kontakt: React.FC = () => {
                 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 key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
+              {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>
@@ -69,11 +91,20 @@ const Kontakt: React.FC = () => {
                 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 key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
+              {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 ? t('kontakt.sending') : t('kontakt.send')}
+              {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>}