feat:add registration management with token-based access

Add management tokens to registrations allowing users to view, edit, and cancel their registration via a unique URL. Implement email notifications for confirmations, updates, and cancellations using nodemailer. Simplify art forms grid from 6 to 4 items and remove trajectory links. Translate footer links to Dutch and fix matzah spelling in info section.
2026-03-02 22:27:21 +01:00
parent 37d9a415eb
commit 3c439649f9
18 changed files with 2092 additions and 627 deletions
--- a/apps/web/src/components/homepage/ArtForms.tsx
+++ b/apps/web/src/components/homepage/ArtForms.tsx
@@ -1,4 +1,4 @@
-import { Camera, Drama, Mic2, Music, Palette, PenTool } from "lucide-react";
+import { Drama, Music, Palette, PersonStanding } from "lucide-react";

 const artForms = [
 	{
@@ -6,15 +6,13 @@ const artForms = [
 		title: "Muziek",
 		description:
 			"Van akoestische singer-songwriter sets tot volledige band optredens. Ontdek je sound en deel je muziek met een warm publiek.",
-		trajectory: "Muziek Traject",
 		color: "#d82560",
 	},
 	{
-		icon: Drama,
-		title: "Theater",
+		icon: PersonStanding,
+		title: "Dans",
 		description:
-			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
-		trajectory: "Theater Traject",
+			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
 		color: "#52979b",
 	},
 	{
@@ -22,33 +20,15 @@ const artForms = [
 		title: "Beeldende Kunst",
 		description:
 			"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
-		trajectory: "Beeldende Kunst Traject",
 		color: "#d09035",
 	},
 	{
-		icon: PenTool,
-		title: "Woordkunst",
+		icon: Drama,
+		title: "Drama",
 		description:
-			"Poëzie, spoken word, storytelling of rap. Laat je woorden dansen en raak het publiek met de kracht van taal.",
-		trajectory: "Woordkunst Traject",
+			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
 		color: "#214e51",
 	},
-	{
-		icon: Camera,
-		title: "Dans",
-		description:
-			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
-		trajectory: "Dans Traject",
-		color: "#d82560",
-	},
-	{
-		icon: Mic2,
-		title: "Comedy",
-		description:
-			"Stand-up, improv of cabaret. Maak het publiek aan het lachen met je unieke kijk op de wereld.",
-		trajectory: "Comedy Traject",
-		color: "#52979b",
-	},
 ];

 export default function ArtForms() {
@@ -64,18 +44,18 @@ export default function ArtForms() {
 					ervaringsdeskundigen.
 				</p>

-				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
 					{artForms.map((art, index) => {
 						const IconComponent = art.icon;
 						return (
 							<article
 								key={art.title}
-								className="group relative overflow-hidden bg-white p-8 transition-all focus-within:ring-2 focus-within:ring-[#214e51] focus-within:ring-offset-2 hover:-translate-y-2 hover:shadow-xl motion-reduce:transition-none"
+								className="relative overflow-hidden bg-white p-8"
 								aria-labelledby={`art-title-${index}`}
 							>
 								{/* Color bar at top */}
 								<div
-									className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2 motion-reduce:transition-none"
+									className="absolute top-0 left-0 h-1 w-full"
 									style={{ backgroundColor: art.color }}
 									aria-hidden="true"
 								/>
@@ -102,21 +82,6 @@ export default function ArtForms() {
 								<p className="mb-6 text-gray-600 leading-relaxed">
 									{art.description}
 								</p>
-
-								<div className="flex items-center justify-between border-gray-100 border-t pt-4">
-									<span
-										className="font-medium text-sm"
-										style={{ color: art.color }}
-									>
-										{art.trajectory}
-									</span>
-									<span
-										className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600 motion-reduce:transition-none"
-										aria-hidden="true"
-									>
-										→
-									</span>
-								</div>
 							</article>
 						);
 					})}
--- a/apps/web/src/components/homepage/EventRegistrationForm.tsx
+++ b/apps/web/src/components/homepage/EventRegistrationForm.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useMutation } from "@tanstack/react-query";
+
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { orpc } from "@/utils/orpc";
@@ -27,6 +28,7 @@ export default function EventRegistrationForm() {
 	});
 	const [errors, setErrors] = useState<FormErrors>({});
 	const [touched, setTouched] = useState<Record<string, boolean>>({});
+	const [successToken, setSuccessToken] = useState<string | null>(null);

 	const validateField = useCallback(
 		(
@@ -67,10 +69,10 @@ export default function EventRegistrationForm() {

 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: () => {
-			toast.success(
-				"Registratie succesvol! We nemen binnenkort contact met je op.",
-			);
+		onSuccess: (data) => {
+			if (data.managementToken) {
+				setSuccessToken(data.managementToken);
+			}
 			setFormData({
 				firstName: "",
 				lastName: "",
@@ -89,6 +91,10 @@ export default function EventRegistrationForm() {
 		},
 	});

+	const handleReset = useCallback(() => {
+		setSuccessToken(null);
+	}, []);
+
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 			const { name, value, type } = e.target;
@@ -191,6 +197,76 @@ export default function EventRegistrationForm() {
 		return `${baseClasses} ${errorClasses}`;
 	};

+	const manageUrl = successToken
+		? `${typeof window !== "undefined" ? window.location.origin : ""}/manage/${successToken}`
+		: "";
+
+	if (successToken) {
+		return (
+			<section
+				id="registration"
+				className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
+			>
+				<div className="mx-auto flex w-full max-w-6xl flex-col">
+					<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
+						<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
+							<svg
+								className="h-8 w-8"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								strokeWidth={2}
+								aria-label="Succes"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						</div>
+						<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
+							Gelukt!
+						</h2>
+						<p className="mb-6 max-w-2xl text-lg text-white/80">
+							Je inschrijving is bevestigd. We sturen je zo dadelijk een
+							bevestigingsmail met alle details.
+						</p>
+
+						<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
+							<p className="mb-2 text-sm text-white/60">
+								Geen mail ontvangen? Controleer je spam-map of gebruik deze
+								link:
+							</p>
+							<a
+								href={manageUrl}
+								className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
+							>
+								{manageUrl}
+							</a>
+						</div>
+
+						<div className="flex flex-wrap items-center gap-4">
+							<a
+								href={manageUrl}
+								className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+							>
+								Bekijk mijn inschrijving
+							</a>
+							<button
+								type="button"
+								onClick={handleReset}
+								className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+							>
+								Nog een inschrijving
+							</button>
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+
 	return (
 		<section
 			id="registration"
--- a/apps/web/src/components/homepage/Footer.tsx
+++ b/apps/web/src/components/homepage/Footer.tsx
@@ -31,14 +31,14 @@ export default function Footer() {
 						href="/privacy"
 						className="link-hover transition-colors hover:text-white"
 					>
-						Privacy Policy
+						Privacy Beleid
 					</a>
 					<span className="text-white/40">|</span>
 					<a
 						href="/terms"
 						className="link-hover transition-colors hover:text-white"
 					>
-						Terms of Service
+						Algemene Voorwaarden
 					</a>
 					<span className="text-white/40">|</span>
 					<a
@@ -64,7 +64,12 @@ export default function Footer() {
 					© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
 				</div>
 				<div className="text-white/50 text-xs transition-colors hover:text-white">
-					<a href="https://zias.be" className="link-hover">
+					<a
+						href="https://zias.be"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="link-hover"
+					>
 						Gemaakt met ♥ door zias.be
 					</a>
 				</div>
--- a/apps/web/src/components/homepage/Info.tsx
+++ b/apps/web/src/components/homepage/Info.tsx
@@ -124,7 +124,7 @@ export default function Info() {
 							<div className="flex flex-col gap-4">
 								<p className="text-lg text-white/90 leading-relaxed">
 									In de Bijbel staat ongedesemd brood (ook wel{" "}
-									<em className="text-white">matze</em> genoemd) symbool voor
+									<em className="text-white">matzah</em> genoemd) symbool voor
 									eenvoud en zuiverheid, zonder de &apos;ballast&apos; van
 									desem.
 								</p>