Fix auth form errors and redirects: Add React keys/useEffects for error rendering and scroll, Inertia::location in controllers for SPA navigation, extend RegistrationTest and add E2E. Update docs (changes/2025-10-02-registration-fixes.md, prp/13-backend-authentication.md). Add new UI components (accordion, carousel, progress, table, tabs), marketing/legal pages (Blog, Kontakt, Datenschutz, etc.), fonts, user migration (remove_name), views/css/package updates, seeders/factories.

2025-10-02 11:40:48 +02:00
parent 1945f664c6
commit 7475210893
101 changed files with 3406 additions and 376 deletions
--- a/resources/js/pages/marketing/Kontakt.tsx
+++ b/resources/js/pages/marketing/Kontakt.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Head, Link, useForm, usePage } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+const Kontakt: React.FC = () => {
+  const { data, setData, post, processing, errors, reset } = useForm({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const { flash } = usePage().props as any;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    post('/kontakt', {
+      onSuccess: () => reset(),
+    });
+  };
+
+  return (
+    <MarketingLayout title="Kontakt - Fotospiel">
+      <Head title="Kontakt - Fotospiel" />
+      <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-3xl font-bold text-center mb-8 font-display">Kontakt</h1>
+          <p className="text-center text-gray-600 mb-8 font-sans-marketing">Haben Sie Fragen? Schreiben Sie uns!</p>
+          <form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">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 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              />
+              {errors.name && <p 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 mb-2 font-sans-marketing">E-Mail</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 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              />
+              {errors.email && <p 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 mb-2 font-sans-marketing">Nachricht</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 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              ></textarea>
+              {errors.message && <p 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 ? 'Sendet...' : 'Senden'}
+            </button>
+          </form>
+          {flash?.success && <p className="mt-4 text-green-600 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 border border-red-400 rounded-md">
+              <ul className="list-disc list-inside">
+                {Object.values(errors).map((error, index) => (
+                  <li key={`error-${index}`} className="font-serif-custom">{error}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          React.useEffect(() => {
+              if (Object.keys(errors).length > 0) {
+                  window.scrollTo({ top: 0, behavior: 'smooth' });
+              }
+          }, [errors]);
+          <div className="mt-8 text-center">
+            <Link href="/" className="text-[#FFB6C1] hover:underline font-sans-marketing">Zurück zur Startseite</Link>
+          </div>
+        </div>
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default Kontakt;