Add Turnstile protection to user actions

components/ContactForm.tsx

@@ -3,6 +3,7 @@
 import { useState, type FormEvent } from "react";
 import { track } from "@/lib/analytics/client";
 import { TextField, TextAreaField } from "@/components/FormField";
+import { TurnstileWidget } from "@/components/TurnstileWidget";
 
 type ContactFormProps = {
   toEmail?: string;
@@ -12,12 +13,15 @@ type ContactFormProps = {
 };
 
 export function ContactForm({
+  siteKey,
   subjectPrefix = "Allgemeine Anfrage",
   type = "contact",
   submitLabel = "Nachricht senden",
-}: ContactFormProps) {
+}: ContactFormProps & { siteKey: string }) {
   const [state, setState] = useState<{ sent: boolean; error?: string }>({ sent: false });
   const [submitting, setSubmitting] = useState(false);
+  const [token, setToken] = useState<string | null>(null);
+  const [resetKey, setResetKey] = useState(0);
 
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -31,7 +35,7 @@ export function ContactForm({
       const response = await fetch("/api/contact/inquiry", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email, message, subject: `${subjectPrefix} von ${name}`, type }),
+        body: JSON.stringify({ name, email, message, subject: `${subjectPrefix} von ${name}`, type, token }),
       });
       const result = await response.json().catch(() => ({}));
       if (!response.ok) {
@@ -46,6 +50,7 @@ export function ContactForm({
       setState({ sent: false, error: "Verbindung fehlgeschlagen. Bitte versuche es erneut." });
     } finally {
       setSubmitting(false);
+      setResetKey((key) => key + 1);
     }
   }
 
@@ -54,8 +59,10 @@ export function ContactForm({
       <TextField label="Name" id="name" name="name" type="text" required autoComplete="name" />
       <TextField label="E-Mail" id="email" name="email" type="email" required autoComplete="email" />
       <TextAreaField label="Deine Nachricht" id="message" name="message" required rows={5} />
+      <TurnstileWidget siteKey={siteKey} action="contact" resetKey={resetKey} onTokenChange={setToken} />
       <button
         type="submit"
+        disabled={submitting || !token}
         className="inline-flex items-center justify-center rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 hover:bg-anouma-plum"
       >
         {submitting ? "Wird gesendet …" : submitLabel}