Add Turnstile protection to user actions

components/meeting/JoinForm.tsx

@@ -3,6 +3,7 @@
 import { useState, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import { fieldClass, TextField, FormError } from "@/components/FormField";
+import { TurnstileWidget } from "@/components/TurnstileWidget";
 
 export const MEETING_SESSION_KEY = "anouma-meeting-session";
 const MEETING_CLIENT_ID_KEY = "anouma-meeting-client-id";
@@ -37,13 +38,15 @@ export type StoredMeetingSession = {
   eventSlug: string;
 };
 
-export function JoinForm({ slug }: { slug: string }) {
+export function JoinForm({ slug, siteKey }: { slug: string; siteKey: string }) {
   const router = useRouter();
   const [name, setName] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [token, setToken] = useState<string | null>(null);
+  const [resetKey, setResetKey] = useState(0);
 
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -53,7 +56,7 @@ export function JoinForm({ slug }: { slug: string }) {
       const res = await fetch(`/api/meetings/${slug}/join`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, password, clientId: getOrCreateClientId() }),
+        body: JSON.stringify({ name, password, clientId: getOrCreateClientId(), token }),
         credentials: "include",
       });
       const data = await res.json();
@@ -78,6 +81,8 @@ export function JoinForm({ slug }: { slug: string }) {
     } catch {
       setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
       setLoading(false);
+    } finally {
+      setResetKey((key) => key + 1);
     }
   }
 
@@ -118,10 +123,11 @@ export function JoinForm({ slug }: { slug: string }) {
           autoComplete="off"
         />
       </div>
+      <TurnstileWidget siteKey={siteKey} action="meeting-join" resetKey={resetKey} onTokenChange={setToken} />
       {error && <FormError>{error}</FormError>}
       <button
         type="submit"
-        disabled={loading}
+        disabled={loading || !token}
         className="w-full 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 disabled:opacity-60"
       >
         {loading ? "Wird geprüft …" : "Meeting betreten"}