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,72 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+const fieldClass =
+  "w-full rounded-2xl border border-anouma-taupe/30 bg-white px-5 py-3.5 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
+
+export function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const data = new FormData(e.currentTarget);
+    const email = String(data.get("email") ?? "");
+    const password = String(data.get("password") ?? "");
+
+    try {
+      const res = await fetch("/api/customers/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        setError("E-Mail oder Passwort ist nicht korrekt.");
+        setLoading(false);
+        return;
+      }
+      router.push(searchParams.get("next") || "/konto");
+      router.refresh();
+    } catch {
+      setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div>
+        <label htmlFor="email" className="mb-2 block text-sm font-medium text-anouma-plum">
+          E-Mail
+        </label>
+        <input id="email" name="email" type="email" required className={fieldClass} autoComplete="email" />
+      </div>
+      <div>
+        <label htmlFor="password" className="mb-2 block text-sm font-medium text-anouma-plum">
+          Passwort
+        </label>
+        <input id="password" name="password" type="password" required className={fieldClass} autoComplete="current-password" />
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          {error}
+        </p>
+      )}
+      <button
+        type="submit"
+        disabled={loading}
+        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 …" : "Anmelden"}
+      </button>
+    </form>
+  );
+}
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function LogoutButton({ className }: { className?: string }) {
+  const router = useRouter();
+
+  async function handleLogout() {
+    await fetch("/api/customers/logout", { method: "POST", credentials: "include" });
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <button type="button" onClick={handleLogout} className={className}>
+      Abmelden
+    </button>
+  );
+}
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+
+const fieldClass =
+  "w-full rounded-2xl border border-anouma-taupe/30 bg-white px-5 py-3.5 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
+
+export function ProfileForm({ id, name, phone }: { id: number; name: string; phone: string }) {
+  const router = useRouter();
+  const [status, setStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus("saving");
+    const data = new FormData(e.currentTarget);
+
+    const res = await fetch(`/api/customers/${id}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: String(data.get("name") ?? ""),
+        phone: String(data.get("phone") ?? "") || null,
+      }),
+    });
+
+    if (res.ok) {
+      setStatus("saved");
+      router.refresh();
+    } else {
+      setStatus("error");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div>
+        <label htmlFor="name" className="mb-2 block text-sm font-medium text-anouma-plum">
+          Name
+        </label>
+        <input id="name" name="name" type="text" required defaultValue={name} className={fieldClass} />
+      </div>
+      <div>
+        <label htmlFor="phone" className="mb-2 block text-sm font-medium text-anouma-plum">
+          Telefonnummer (optional)
+        </label>
+        <input id="phone" name="phone" type="tel" defaultValue={phone} className={fieldClass} />
+      </div>
+      <button
+        type="submit"
+        disabled={status === "saving"}
+        className="rounded-full bg-anouma-mauve-dark px-7 py-3 text-sm font-medium text-white hover:bg-anouma-plum disabled:opacity-60"
+      >
+        {status === "saving" ? "Wird gespeichert …" : "Speichern"}
+      </button>
+      {status === "saved" && <p className="text-sm text-anouma-olive">Gespeichert.</p>}
+      {status === "error" && <p className="text-sm text-red-700">Speichern fehlgeschlagen.</p>}
+    </form>
+  );
+}
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+
+const fieldClass =
+  "w-full rounded-2xl border border-anouma-taupe/30 bg-white px-5 py-3.5 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
+
+export function RegisterForm() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const data = new FormData(e.currentTarget);
+    const name = String(data.get("name") ?? "");
+    const email = String(data.get("email") ?? "");
+    const password = String(data.get("password") ?? "");
+
+    try {
+      const createRes = await fetch("/api/customers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+      if (!createRes.ok) {
+        const body = await createRes.json().catch(() => null);
+        setError(body?.errors?.[0]?.message || "Die Registrierung ist fehlgeschlagen. Ist die E-Mail-Adresse schon vergeben?");
+        setLoading(false);
+        return;
+      }
+
+      const loginRes = await fetch("/api/customers/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ email, password }),
+      });
+      if (!loginRes.ok) {
+        router.push("/login");
+        return;
+      }
+      router.push("/konto");
+      router.refresh();
+    } catch {
+      setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div>
+        <label htmlFor="name" className="mb-2 block text-sm font-medium text-anouma-plum">
+          Name
+        </label>
+        <input id="name" name="name" type="text" required className={fieldClass} autoComplete="name" />
+      </div>
+      <div>
+        <label htmlFor="email" className="mb-2 block text-sm font-medium text-anouma-plum">
+          E-Mail
+        </label>
+        <input id="email" name="email" type="email" required className={fieldClass} autoComplete="email" />
+      </div>
+      <div>
+        <label htmlFor="password" className="mb-2 block text-sm font-medium text-anouma-plum">
+          Passwort
+        </label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          required
+          minLength={8}
+          className={fieldClass}
+          autoComplete="new-password"
+        />
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          {error}
+        </p>
+      )}
+      <button
+        type="submit"
+        disabled={loading}
+        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 erstellt …" : "Konto erstellen"}
+      </button>
+    </form>
+  );
+}