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.
This commit is contained in:
430
apps/web/src/routes/manage.$token.tsx
Normal file
430
apps/web/src/routes/manage.$token.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user