52 lines
2.7 KiB
TypeScript
52 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
import { TextField, TextAreaField } from "@/components/FormField";
|
|
import { TurnstileWidget } from "@/components/TurnstileWidget";
|
|
|
|
export function GroupRegistrationForm({ offerSlug, siteKey }: { offerSlug: string; siteKey: string }) {
|
|
const [state, setState] = useState<{ sent: boolean; error?: string }>({ sent: false });
|
|
const [busy, setBusy] = useState(false);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [resetKey, setResetKey] = useState(0);
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setBusy(true);
|
|
setState({ sent: false });
|
|
const data = new FormData(event.currentTarget);
|
|
try {
|
|
const response = await fetch("/api/group-registration", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
offerSlug,
|
|
name: data.get("name"),
|
|
email: data.get("email"),
|
|
phone: data.get("phone"),
|
|
message: data.get("message"),
|
|
token,
|
|
}),
|
|
});
|
|
const result = await response.json().catch(() => ({}));
|
|
if (!response.ok) setState({ sent: false, error: result.error || "Die Anmeldung konnte nicht gesendet werden." });
|
|
else { setState({ sent: true }); event.currentTarget.reset(); }
|
|
} catch { setState({ sent: false, error: "Verbindung fehlgeschlagen. Bitte versuche es erneut." }); }
|
|
finally { setBusy(false); setResetKey((key) => key + 1); }
|
|
}
|
|
|
|
if (state.sent) return <p className="rounded-2xl bg-anouma-cream-light p-5 text-sm leading-relaxed text-anouma-olive" role="status">Danke, deine Anmeldung ist angekommen. Anna meldet sich, sobald sie die Plätze geprüft hat.</p>;
|
|
|
|
return (
|
|
<form onSubmit={submit} className="space-y-5">
|
|
<TextField label="Name" id="group-name" name="name" type="text" required autoComplete="name" />
|
|
<TextField label="E-Mail" id="group-email" name="email" type="email" required autoComplete="email" />
|
|
<TextField label="Telefon (optional)" id="group-phone" name="phone" type="tel" autoComplete="tel" />
|
|
<TextAreaField label="Nachricht / Motivation (optional)" id="group-message" name="message" rows={4} />
|
|
<TurnstileWidget siteKey={siteKey} action="group-registration" resetKey={resetKey} onTokenChange={setToken} />
|
|
{state.error && <p className="text-sm text-red-700" role="alert">{state.error}</p>}
|
|
<button type="submit" disabled={busy || !token} className="rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium text-white transition-colors hover:bg-anouma-plum disabled:opacity-60">{busy ? "Wird gesendet …" : "Anmeldung senden"}</button>
|
|
</form>
|
|
);
|
|
}
|