Initial commit: ANOUMA website with Payload CMS, WebRTC meetings, and booking system

- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
2026-08-25 16:40:51 +02:00
commit 45261a0461
138 changed files with 23263 additions and 0 deletions
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+
+const fieldClass =
+  "w-full rounded-2xl border border-anouma-taupe/30 bg-white px-5 py-3 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
+
+export function RegisterForm({ slug }: { slug: 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);
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus("loading");
+    setError(null);
+    try {
+      const res = await fetch(`/api/meetings/${slug}/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Anmeldung leider nicht möglich.");
+        setStatus("error");
+        return;
+      }
+      setStatus("done");
+    } catch {
+      setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
+      setStatus("error");
+    }
+  }
+
+  if (status === "done") {
+    return (
+      <p className="rounded-2xl bg-anouma-cream-light p-5 text-sm leading-relaxed text-anouma-plum" role="status">
+        Danke für deine Anmeldung — wir freuen uns auf dich!
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="reg-name" className="mb-1.5 block text-sm font-medium text-anouma-plum">
+          Name
+        </label>
+        <input
+          id="reg-name"
+          type="text"
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className={fieldClass}
+          autoComplete="name"
+        />
+      </div>
+      <div>
+        <label htmlFor="reg-email" className="mb-1.5 block text-sm font-medium text-anouma-plum">
+          E-Mail
+        </label>
+        <input
+          id="reg-email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className={fieldClass}
+          autoComplete="email"
+        />
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          {error}
+        </p>
+      )}
+      <button
+        type="submit"
+        disabled={status === "loading"}
+        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"}
+      </button>
+    </form>
+  );
+}