Module & Formulare im Frontend rendern

1{
2  "elements": [
3    { "id": 1, "type": "headline", "text": "Willkommen", "level": "h1" },
4    { "id": 2, "type": "text", "html": "<p>Das ist ein Text.</​p>" },
5    { "id": 3, "type": "image", "src": "/​files/​hero.jpg", "alt": "Strand" }
6  ]
7}

1import { ContaoContentElement } from '@/​types/​contao';
2
3export default function HeadlineBlock({ data }: { data: ContaoContentElement }) {
4  // Dynamisches Tag-Rendering (h1, h2, h3...)
5  const Tag = (data.level || 'h2') as keyof JSX.IntrinsicElements;
6  
7  return (
8    <Tag className="text-3xl md:text-5xl font-bold text-brand-dark mb-6">
9      {data.text}
10    </​Tag>
11  );
12}

1import { ContaoContentElement } from '@/​types/​contao';
2
3export default function TextBlock({ data }: { data: ContaoContentElement }) {
4  return (
5    // Wir rendern HTML (Achtung: Dazu im nächsten Abschnitt mehr!)
6    <div 
7      className="prose prose-slate max-w-none mb-8"
8      dangerouslySetInnerHTML={{ __html: data.html || '' }}
9    />
10  );
11}

1import { ContaoContentElement } from '@/​types/​contao';
2import HeadlineBlock from '@/​components/​blocks/​HeadlineBlock';
3import TextBlock from '@/​components/​blocks/​TextBlock';
4
5// Ein Dictionary, das Contao-Typen auf React-Komponenten mappt
6const componentMap: Record<string, React.ComponentType<{ data: ContaoContentElement }>> = {
7  'headline': HeadlineBlock,
8  'text': TextBlock,
9  // Hier fügst du später z.B. 'accordion': AccordionBlock, 'gallery': GalleryBlock hinzu
10};
11
12export default function BlockRenderer({ elements }: { elements: ContaoContentElement[] }) {
13  if (!elements || elements.length === 0) return null;
14
15  return (
16    <>
17      {elements.map((element) => {
18        // Die passende Komponente anhand des Contao 'type' Felds finden
19        const Component = componentMap[element.type];
20
21        // Wenn der Redakteur ein Element nutzt, für das wir noch keine React-Komponente gebaut haben
22        if (!Component) {
23          // In der lokalen Entwicklung zeigen wir eine Warnung
24          if (process.env.NODE_ENV === 'development') {
25            return (
26              <div key={element.id} className="p-4 border-2 border-dashed border-red-400 bg-red-50 text-red-700 my-4 rounded">
27                ⚠️ Fehlende Komponente für den Typ: <strong>{element.type}</​strong>
28              </​div>
29            );
30          }
31          // In Produktion ignorieren wir unbekannte Blöcke stillschweigend, um das Layout nicht zu zerstören
32          return null;
33        }
34
35        // Die Komponente rendern und die CMS-Daten als Prop übergeben
36        return <Component key={element.id} data={element} />;
37      })}
38    </>
39  );
40}

1// Datei: frontend/​src/​app/[[...slug]]/​page.tsx (Auszug)
2import BlockRenderer from '@/​components/​layout/​BlockRenderer';
3
4// ... (vorheriger Fetching-Code)
5
6  return (
7    <main className="container mx-auto py-12">
8      <h1 className="sr-only">{pageData.routing.tit​le}</​h1>
9      
10      {/* Das dynamische Rendering des Contao-Contents */}
11      {pageData.content.articles.map((article) => (
12        <article key={article.id}>
13          {/* Unser neuer Dispatcher übernimmt ab hier! */}
14          <BlockRenderer elements={article.elements} />
15        </​article>
16      ))}
17    </​main>
18  );

npm install isomorphic-dompurify

1import DOMPurify from 'isomorphic-dompurify';
2import { ContaoContentElement } from '@/​types/​contao';
3
4export default function TextBlock({ data }: { data: ContaoContentElement }) {
5  // 1. Wenn kein HTML vorhanden ist, rendern wir nichts
6  if (!data.html) return null;
7
8  // 2. Wir definieren strenge Regeln für DOMPurify
9  const cleanHtml = DOMPurify.sanitize(data.html, {
10    ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li', 'br', 'h2', 'h3', 'h4'],
11    ALLOWED_ATTR: ['href', 'target', 'rel', 'tit​le', 'class'],
12  });
13
14  // 3. Wir rendern ausschließlich das bereinigte HTML
15  return (
16    <div 
17      className="prose prose-slate max-w-none mb-8"
18      dangerouslySetInnerHTML={{ __html: cleanHtml }}
19    />
20  );
21}

npm install react-hook-form zod @hookform/​resolvers

1'use client'; // Formulare benötigen Interaktivität (State, onChange, onSubmit)
2
3import { useState } from 'react';
4import { useForm } from 'react-hook-form';
5import { zodResolver } from '@hookform/​resolvers/​zod';
6import * as z from 'zod';
7
8// Wir importieren die Server Action (die wir in Abschnitt 4 bauen werden)
9import { submitContactForm } from '@/​app/​actions/​contact';
10
11// 1. Zod Schema definieren: Wir spiegeln EXAKT die Regeln aus unserem Contao-Backend (Teil 6)
12export const contactSchema = z.object({
13  email: z.string().min(1, 'E-Mail ist ein Pflichtfeld.').email('Bitte eine gültige E-Mail-Adresse eingeben.'),
14  message: z.string().min(10, 'Ihre Nachricht muss mindestens 10 Zeichen lang sein.').max(5000, 'Nachricht ist zu lang.'),
15});
16
17// TypeScript Typ automatisch aus dem Zod-Schema extrahieren
18export type ContactFormData = z.infer<typeof contactSchema>;
19
20export default function ContactFormBlock() {
21  const [serverStatus, setServerStatus] = useState<'idle' | 'success' | 'error'>('idle');
22  const [errorMessage, setErrorMessage] = useState('');
23
24  // 2. React Hook Form mit dem Zod-Resolver initialisieren
25  const {
26    register,
27    handleSubmit,
28    formState: { errors, isSubmitting },
29    reset
30  } = useForm<ContactFormData>({
31    resolver: zodResolver(contactSchema),
32  });
33
34  // 3. Submit-Handler (wird nur aufgerufen, wenn Zod grünes Licht gibt!)
35  const onSubmit = async (data: ContactFormData) => {
36    // Die Server Action ausführen (Next.js leitet die Daten ans Backend weiter)
37    const result = await submitContactForm(data);
38    
39    if (result.success) {
40      setServerStatus('success');
41      reset(); // Formular leeren
42    } else {
43      setServerStatus('error');
44      setErrorMessage(result.error || 'Es ist ein Fehler aufgetreten.');
45    }
46  };
47
48  return (
49    <div className="bg-white p-6 rounded-lg shadow-sm border border-slate-100 max-w-lg mb-8">
50      <h3 className="text-2xl font-bold mb-4">Kontaktieren Sie uns</​h3>
51      
52      {serverStatus === 'success' && (
53        <div className="p-4 mb-4 bg-green-50 text-green-700 border border-green-200 rounded">
54          Vielen Dank! Ihre Nachricht wurde sicher verschickt.
55        </​div>
56      )}
57
58      {serverStatus === 'error' && (
59        <div className="p-4 mb-4 bg-red-50 text-red-700 border border-red-200 rounded">
60          {errorMessage}
61        </​div>
62      )}
63
64      {/* Das handleSubmit von RHF blockiert den echten Submit, bis Zod validiert hat */}
65      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
66        
67        {/* Feld: E-Mail */}
68        <div>
69          <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">E-Mail</​label>
70          <input
71            id="email"
72            type="email"
73            {...register('email')}
74            className={`w-full p-2 border rounded focus:ring-2 focus:ring-brand-primary outline-none transition-all ${
75              errors.email ? 'border-red-500 bg-red-50' : 'border-slate-300'
76            }`}
77          />
78          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email.message}</​p>}
79        </​div>
80
81        {/* Feld: Nachricht */}
82        <div>
83          <label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-1">Ihre Nachricht</​label>
84          <textarea
85            id="message"
86            rows={4}
87            {...register('message')}
88            className={`w-full p-2 border rounded focus:ring-2 focus:ring-brand-primary outline-none transition-all ${
89              errors.message ? 'border-red-500 bg-red-50' : 'border-slate-300'
90            }`}
91          />
92          {errors.message && <p className="text-red-500 text-sm mt-1">{errors.message.message}</​p>}
93        </​div>
94
95        {/* Submit Button */}
96        <button
97          type="submit"
98          disabled={isSubmitting}
99          className="bg-brand-primary text-white font-semibold py-2 px-6 rounded hover:bg-sky-600 transition-colors disabled:opacity-50 flex items-center justify-center min-w-[150px]"
100        >
101          {isSubmitting ? 'Wird gesendet...' : 'Nachricht senden'}
102        </​button>
103      </​form>
104    </​div>
105  );
106}

1'use server'; // Diese Direktive ist zwingend! Sie markiert die Datei als Server Action.
2
3import { contactSchema, ContactFormData } from '@/​components/​blocks/​ContactFormBlock';
4
5export async function submitContactForm(data: ContactFormData) {
6  // 1. Zod-Validierung auf dem SERVER wiederholen (Never trust the client!)
7  // Das schützt uns vor Angreifern, die den Browser umgehen und cURL/​Postman nutzen
8  const parsedData = contactSchema.safeParse(data);
9  
10  if (!parsedData.success) {
11    return { success: false, error: 'Ungültige Formulardaten.' };
12  }
13
14  try {
15    // 2. Den sicheren POST-Request an unsere Contao API senden (siehe Teil 6)
16    const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
17    const API_SECRET = process.env.CONTAO_API_KEY;
18
19    const res = await fetch(`${API_URL}/​api/​v1/​form/​contact`, {
20      method: 'POST',
21      headers: {
22        'Content-Type': 'application/​json',
23        // Der geheime Key verlässt den Next.js-Server nicht!
24        'Authorization': `Bearer ${API_SECRET}`,
25      },
26      body: JSON.stringify(parsedData.data),
27    });
28
29    if (!res.ok) {
30      const errorData = await res.json();
31      return { success: false, error: errorData.message || 'Contao hat die Anfrage abgelehnt.' };
32    }
33
34    return { success: true, message: 'Nachricht erfolgreich an Contao übermittelt.' };
35    
36  } catch (error) {
37    console.error('BFF Error:', error);
38    return { success: false, error: 'Serverfehler bei der Übermittlung.' };
39  }
40}