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>
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -15,6 +15,7 @@ import { Route as LoginRouteImport } from './routes/login'
 import { Route as ContactRouteImport } from './routes/contact'
 import { Route as AdminRouteImport } from './routes/admin'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ManageTokenRouteImport } from './routes/manage.$token'
 import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc/$'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'

@@ -48,6 +49,11 @@ const IndexRoute = IndexRouteImport.update({
  path: '/',
  getParentRoute: () => rootRouteImport,
 } as any)
+const ManageTokenRoute = ManageTokenRouteImport.update({
+  id: '/manage/$token',
+  path: '/manage/$token',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiRpcSplatRoute = ApiRpcSplatRouteImport.update({
  id: '/api/rpc/$',
  path: '/api/rpc/$',
@@ -66,6 +72,7 @@ export interface FileRoutesByFullPath {
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/manage/$token': typeof ManageTokenRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
 }
@@ -76,6 +83,7 @@ export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/manage/$token': typeof ManageTokenRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
 }
@@ -87,6 +95,7 @@ export interface FileRoutesById {
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/manage/$token': typeof ManageTokenRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
 }
@@ -99,6 +108,7 @@ export interface FileRouteTypes {
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/manage/$token'
    | '/api/auth/$'
    | '/api/rpc/$'
  fileRoutesByTo: FileRoutesByTo
@@ -109,6 +119,7 @@ export interface FileRouteTypes {
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/manage/$token'
    | '/api/auth/$'
    | '/api/rpc/$'
  id:
@@ -119,6 +130,7 @@ export interface FileRouteTypes {
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/manage/$token'
    | '/api/auth/$'
    | '/api/rpc/$'
  fileRoutesById: FileRoutesById
@@ -130,6 +142,7 @@ export interface RootRouteChildren {
  LoginRoute: typeof LoginRoute
  PrivacyRoute: typeof PrivacyRoute
  TermsRoute: typeof TermsRoute
+  ManageTokenRoute: typeof ManageTokenRoute
  ApiAuthSplatRoute: typeof ApiAuthSplatRoute
  ApiRpcSplatRoute: typeof ApiRpcSplatRoute
 }
@@ -178,6 +191,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/manage/$token': {
+      id: '/manage/$token'
+      path: '/manage/$token'
+      fullPath: '/manage/$token'
+      preLoaderRoute: typeof ManageTokenRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/api/rpc/$': {
      id: '/api/rpc/$'
      path: '/api/rpc/$'
@@ -202,6 +222,7 @@ const rootRouteChildren: RootRouteChildren = {
  LoginRoute: LoginRoute,
  PrivacyRoute: PrivacyRoute,
  TermsRoute: TermsRoute,
+  ManageTokenRoute: ManageTokenRoute,
  ApiAuthSplatRoute: ApiAuthSplatRoute,
  ApiRpcSplatRoute: ApiRpcSplatRoute,
 }
--- a/apps/web/src/routes/manage.$token.tsx
+++ b/apps/web/src/routes/manage.$token.tsx
@@ -0,0 +1,430 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, Link, useParams } from "@tanstack/react-router";
+import { useState } from "react";
+import { toast } from "sonner";
+import { orpc } from "@/utils/orpc";
+
+export const Route = createFileRoute("/manage/$token")({
+	component: ManageRegistrationPage,
+});
+
+function ManageRegistrationPage() {
+	const { token } = useParams({ from: "/manage/$token" });
+	const queryClient = useQueryClient();
+
+	const [isEditing, setIsEditing] = useState(false);
+	const [formData, setFormData] = useState({
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		wantsToPerform: false,
+		artForm: "",
+		experience: "",
+		extraQuestions: "",
+	});
+
+	const { data, isLoading, error } = useQuery({
+		...orpc.getRegistrationByToken.queryOptions({ input: { token } }),
+	});
+
+	const updateMutation = useMutation({
+		...orpc.updateRegistration.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Inschrijving bijgewerkt!");
+			queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
+			setIsEditing(false);
+		},
+		onError: (err) => {
+			toast.error(`Opslaan mislukt: ${err.message}`);
+		},
+	});
+
+	const cancelMutation = useMutation({
+		...orpc.cancelRegistration.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Inschrijving geannuleerd");
+			queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
+		},
+		onError: (err) => {
+			toast.error(`Annuleren mislukt: ${err.message}`);
+		},
+	});
+
+	const handleEdit = () => {
+		if (data) {
+			setFormData({
+				firstName: data.firstName,
+				lastName: data.lastName,
+				email: data.email,
+				phone: data.phone || "",
+				wantsToPerform: data.wantsToPerform ?? false,
+				artForm: data.artForm || "",
+				experience: data.experience || "",
+				extraQuestions: data.extraQuestions || "",
+			});
+			setIsEditing(true);
+		}
+	};
+
+	const handleSave = (e: React.FormEvent) => {
+		e.preventDefault();
+		updateMutation.mutate({
+			token,
+			firstName: formData.firstName.trim(),
+			lastName: formData.lastName.trim(),
+			email: formData.email.trim(),
+			phone: formData.phone.trim() || undefined,
+			wantsToPerform: formData.wantsToPerform,
+			artForm: formData.wantsToPerform
+				? formData.artForm.trim() || undefined
+				: undefined,
+			experience: formData.wantsToPerform
+				? formData.experience.trim() || undefined
+				: undefined,
+			extraQuestions: formData.extraQuestions.trim() || undefined,
+		});
+	};
+
+	const handleCancel = () => {
+		if (
+			confirm(
+				"Weet je zeker dat je je inschrijving wilt annuleren? Dit kan niet ongedaan worden gemaakt.",
+			)
+		) {
+			cancelMutation.mutate({ token });
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<div className="min-h-screen bg-[#214e51]">
+				<div className="mx-auto max-w-3xl px-6 py-16">
+					<div className="animate-pulse text-white/60">Laden...</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (error || !data || data.cancelledAt) {
+		return (
+			<div className="min-h-screen bg-[#214e51]">
+				<div className="mx-auto max-w-3xl px-6 py-16">
+					<Link
+						to="/"
+						className="link-hover mb-8 inline-block text-white/80 hover:text-white"
+					>
+						← Terug naar home
+					</Link>
+					<h1 className="mb-4 font-['Intro',sans-serif] text-4xl text-white">
+						Inschrijving niet gevonden
+					</h1>
+					<p className="mb-6 text-white/80">
+						Deze link is ongeldig of de inschrijving is geannuleerd.
+					</p>
+					<a
+						href="/#registration"
+						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"
+					>
+						Nieuwe inschrijving
+					</a>
+				</div>
+			</div>
+		);
+	}
+
+	if (isEditing) {
+		return (
+			<div className="min-h-screen bg-[#214e51]">
+				<div className="mx-auto max-w-3xl px-6 py-16">
+					<Link
+						to="/"
+						className="link-hover mb-8 inline-block text-white/80 hover:text-white"
+					>
+						← Terug naar home
+					</Link>
+					<h1 className="mb-8 font-['Intro',sans-serif] text-4xl text-white">
+						Bewerk inschrijving
+					</h1>
+
+					<form onSubmit={handleSave} className="space-y-6">
+						<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+							<div>
+								<label htmlFor="firstName" className="mb-2 block text-white">
+									Voornaam *
+								</label>
+								<input
+									id="firstName"
+									type="text"
+									required
+									value={formData.firstName}
+									onChange={(e) =>
+										setFormData((p) => ({ ...p, firstName: e.target.value }))
+									}
+									className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+								/>
+							</div>
+							<div>
+								<label htmlFor="lastName" className="mb-2 block text-white">
+									Achternaam *
+								</label>
+								<input
+									id="lastName"
+									type="text"
+									required
+									value={formData.lastName}
+									onChange={(e) =>
+										setFormData((p) => ({ ...p, lastName: e.target.value }))
+									}
+									className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+								/>
+							</div>
+						</div>
+
+						<div>
+							<label htmlFor="email" className="mb-2 block text-white">
+								E-mail *
+							</label>
+							<input
+								id="email"
+								type="email"
+								required
+								value={formData.email}
+								onChange={(e) =>
+									setFormData((p) => ({ ...p, email: e.target.value }))
+								}
+								className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+							/>
+						</div>
+
+						<div>
+							<label htmlFor="phone" className="mb-2 block text-white">
+								Telefoon
+							</label>
+							<input
+								id="phone"
+								type="tel"
+								value={formData.phone}
+								onChange={(e) =>
+									setFormData((p) => ({ ...p, phone: e.target.value }))
+								}
+								className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+							/>
+						</div>
+
+						<label
+							htmlFor="wantsToPerform"
+							className="flex cursor-pointer items-center gap-4"
+						>
+							<div className="relative flex shrink-0">
+								<input
+									id="wantsToPerform"
+									type="checkbox"
+									checked={formData.wantsToPerform}
+									onChange={(e) =>
+										setFormData((p) => ({
+											...p,
+											wantsToPerform: e.target.checked,
+											artForm: e.target.checked ? p.artForm : "",
+											experience: e.target.checked ? p.experience : "",
+										}))
+									}
+									className="peer sr-only"
+								/>
+								<div className="h-6 w-6 border-2 border-white/50 bg-transparent transition-colors peer-checked:border-white peer-checked:bg-white" />
+								<svg
+									className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={3}
+									aria-label="Geselecteerd"
+								>
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+							</div>
+							<span className="text-white text-xl">Ik wil optreden</span>
+						</label>
+
+						{formData.wantsToPerform && (
+							<div className="space-y-6 border border-white/20 p-6">
+								<div>
+									<label htmlFor="artForm" className="mb-2 block text-white">
+										Kunstvorm *
+									</label>
+									<input
+										id="artForm"
+										type="text"
+										required={formData.wantsToPerform}
+										value={formData.artForm}
+										onChange={(e) =>
+											setFormData((p) => ({
+												...p,
+												artForm: e.target.value,
+											}))
+										}
+										list="artFormSuggestions"
+										className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+									/>
+									<datalist id="artFormSuggestions">
+										<option value="Muziek" />
+										<option value="Theater" />
+										<option value="Dans" />
+										<option value="Beeldende Kunst" />
+										<option value="Woordkunst" />
+										<option value="Comedy" />
+									</datalist>
+								</div>
+								<div>
+									<label htmlFor="experience" className="mb-2 block text-white">
+										Ervaring
+									</label>
+									<input
+										id="experience"
+										type="text"
+										value={formData.experience}
+										onChange={(e) =>
+											setFormData((p) => ({
+												...p,
+												experience: e.target.value,
+											}))
+										}
+										list="experienceSuggestions"
+										className="w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
+									/>
+									<datalist id="experienceSuggestions">
+										<option value="Beginner" />
+										<option value="Gevorderd" />
+										<option value="Professional" />
+									</datalist>
+								</div>
+							</div>
+						)}
+
+						<div>
+							<label htmlFor="extraQuestions" className="mb-2 block text-white">
+								Vragen of opmerkingen
+							</label>
+							<textarea
+								id="extraQuestions"
+								rows={4}
+								value={formData.extraQuestions}
+								onChange={(e) =>
+									setFormData((p) => ({
+										...p,
+										extraQuestions: e.target.value,
+									}))
+								}
+								className="w-full resize-none bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
+							/>
+						</div>
+
+						<div className="flex flex-wrap items-center gap-4 pt-4">
+							<button
+								type="submit"
+								disabled={updateMutation.isPending}
+								className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100 disabled:opacity-50"
+							>
+								{updateMutation.isPending ? "Opslaan..." : "Opslaan"}
+							</button>
+							<button
+								type="button"
+								onClick={() => setIsEditing(false)}
+								className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+							>
+								Annuleren
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="min-h-screen bg-[#214e51]">
+			<div className="mx-auto max-w-3xl px-6 py-16">
+				<Link
+					to="/"
+					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
+				>
+					← Terug naar home
+				</Link>
+
+				<h1 className="mb-2 font-['Intro',sans-serif] text-4xl text-white">
+					Jouw inschrijving
+				</h1>
+				<p className="mb-8 text-white/60">
+					Open Mic Night — vrijdag 18 april 2026
+				</p>
+
+				<div className="space-y-6 rounded-lg border border-white/20 bg-white/5 p-6 md:p-8">
+					<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<div>
+							<p className="text-sm text-white/50">Voornaam</p>
+							<p className="text-lg text-white">{data.firstName}</p>
+						</div>
+						<div>
+							<p className="text-sm text-white/50">Achternaam</p>
+							<p className="text-lg text-white">{data.lastName}</p>
+						</div>
+						<div>
+							<p className="text-sm text-white/50">E-mail</p>
+							<p className="text-lg text-white">{data.email}</p>
+						</div>
+						<div>
+							<p className="text-sm text-white/50">Telefoon</p>
+							<p className="text-lg text-white">{data.phone || "—"}</p>
+						</div>
+					</div>
+
+					<div className="border-white/10 border-t pt-6">
+						<p className="mb-2 text-sm text-white/50">Rol</p>
+						<p className="text-lg text-white">
+							{data.wantsToPerform
+								? `Optreden${data.artForm ? ` — ${data.artForm}` : ""}`
+								: "Toeschouwer"}
+						</p>
+						{data.wantsToPerform && data.experience && (
+							<p className="mt-1 text-white/60">{data.experience}</p>
+						)}
+					</div>
+
+					{data.extraQuestions && (
+						<div className="border-white/10 border-t pt-6">
+							<p className="mb-2 text-sm text-white/50">
+								Vragen of opmerkingen
+							</p>
+							<p className="text-white">{data.extraQuestions}</p>
+						</div>
+					)}
+				</div>
+
+				<div className="mt-8 flex flex-wrap items-center gap-4">
+					<button
+						type="button"
+						onClick={handleEdit}
+						className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+					>
+						Bewerken
+					</button>
+					<button
+						type="button"
+						onClick={handleCancel}
+						disabled={cancelMutation.isPending}
+						className="border border-red-400/50 px-8 py-3 text-lg text-red-400 transition-all hover:bg-red-400/10 disabled:opacity-50"
+					>
+						{cancelMutation.isPending
+							? "Annuleren..."
+							: "Inschrijving annuleren"}
+					</button>
+				</div>
+
+				<p className="mt-8 text-sm text-white/40">
+					Deze link is uniek voor jouw inschrijving. Bewaar deze pagina of de
+					bevestigingsmail om je gegevens later aan te passen.
+				</p>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -16,4 +16,5 @@ export default defineConfig({
 	server: {
 		port: 3001,
 	},
+	envDir: "../../packages/env",
 });