Add Turnstile protection to user actions

components/meeting/RegisterForm.tsx

@@ -2,12 +2,15 @@
 
 import { useState, type FormEvent } from "react";
 import { TextField, FormError } from "@/components/FormField";
+import { TurnstileWidget } from "@/components/TurnstileWidget";
 
-export function RegisterForm({ slug }: { slug: string }) {
+export function RegisterForm({ slug, siteKey }: { slug: string; siteKey: string }) {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">("idle");
   const [error, setError] = useState<string | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [resetKey, setResetKey] = useState(0);
 
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -17,7 +20,7 @@ export function RegisterForm({ slug }: { slug: string }) {
       const res = await fetch(`/api/meetings/${slug}/register`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email }),
+        body: JSON.stringify({ name, email, token }),
       });
       const data = await res.json();
       if (!res.ok) {
@@ -29,6 +32,8 @@ export function RegisterForm({ slug }: { slug: string }) {
     } catch {
       setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
       setStatus("error");
+    } finally {
+      setResetKey((key) => key + 1);
     }
   }
 
@@ -60,10 +65,11 @@ export function RegisterForm({ slug }: { slug: string }) {
         onChange={(e) => setEmail(e.target.value)}
         autoComplete="email"
       />
+      <TurnstileWidget siteKey={siteKey} action="meeting-registration" resetKey={resetKey} onTokenChange={setToken} />
       {error && <FormError>{error}</FormError>}
       <button
         type="submit"
-        disabled={status === "loading"}
+        disabled={status === "loading" || !token}
         className="rounded-full bg-anouma-mauve-dark px-6 py-3 text-sm font-medium text-white transition-colors duration-300 hover:bg-anouma-plum disabled:opacity-60"
       >
         {status === "loading" ? "Wird gesendet …" : "Zum Termin anmelden"}