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:
@@ -20,10 +20,12 @@
|
||||
"@orpc/zod": "catalog:",
|
||||
"dotenv": "catalog:",
|
||||
"drizzle-orm": "^0.45.1",
|
||||
"nodemailer": "^8.0.1",
|
||||
"zod": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kk/config": "workspace:*",
|
||||
"@types/nodemailer": "^7.0.11",
|
||||
"typescript": "catalog:"
|
||||
}
|
||||
}
|
||||
|
||||
286
packages/api/src/email.ts
Normal file
286
packages/api/src/email.ts
Normal file
@@ -0,0 +1,286 @@
|
||||
import { env } from "@kk/env/server";
|
||||
import nodemailer from "nodemailer";
|
||||
|
||||
function createTransport() {
|
||||
if (!env.SMTP_HOST || !env.SMTP_USER || !env.SMTP_PASS) {
|
||||
return null;
|
||||
}
|
||||
return nodemailer.createTransport({
|
||||
host: env.SMTP_HOST,
|
||||
port: env.SMTP_PORT,
|
||||
secure: env.SMTP_PORT === 465,
|
||||
auth: {
|
||||
user: env.SMTP_USER,
|
||||
pass: env.SMTP_PASS,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const from = env.SMTP_FROM ?? "Kunstenkamp <info@kunstenkamp.be>";
|
||||
const baseUrl = env.BETTER_AUTH_URL ?? "https://kunstenkamp.be";
|
||||
|
||||
function registrationConfirmationHtml(params: {
|
||||
firstName: string;
|
||||
manageUrl: string;
|
||||
wantsToPerform: boolean;
|
||||
artForm?: string | null;
|
||||
}) {
|
||||
const role = params.wantsToPerform
|
||||
? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
|
||||
: "Toeschouwer";
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bevestiging inschrijving</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
|
||||
<!-- Header -->
|
||||
<tr>
|
||||
<td style="padding:40px 48px 32px;">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
|
||||
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Je inschrijving is bevestigd!</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Body -->
|
||||
<tr>
|
||||
<td style="padding:0 48px 32px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Hoi ${params.firstName},
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
We hebben je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> in goede orde ontvangen.
|
||||
</p>
|
||||
<!-- Registration summary -->
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
|
||||
<tr>
|
||||
<td style="padding:20px 24px;">
|
||||
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
|
||||
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Wil je je gegevens later nog aanpassen of je inschrijving annuleren? Gebruik dan de knop hieronder. De link is uniek voor jou — deel hem niet.
|
||||
</p>
|
||||
<!-- CTA button -->
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="border-radius:2px;background:#ffffff;">
|
||||
<a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
|
||||
Beheer mijn inschrijving
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
|
||||
Of kopieer deze link: <span style="color:rgba(255,255,255,0.6);">${params.manageUrl}</span>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6;">
|
||||
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a><br/>
|
||||
Kunstenkamp vzw — Een initiatief voor en door kunstenaars.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
function updateConfirmationHtml(params: {
|
||||
firstName: string;
|
||||
manageUrl: string;
|
||||
wantsToPerform: boolean;
|
||||
artForm?: string | null;
|
||||
}) {
|
||||
const role = params.wantsToPerform
|
||||
? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
|
||||
: "Toeschouwer";
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Inschrijving bijgewerkt</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
|
||||
<tr>
|
||||
<td style="padding:40px 48px 32px;">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
|
||||
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Inschrijving bijgewerkt</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:0 48px 32px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Hoi ${params.firstName},
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is succesvol bijgewerkt.
|
||||
</p>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
|
||||
<tr>
|
||||
<td style="padding:20px 24px;">
|
||||
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
|
||||
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="border-radius:2px;background:#ffffff;">
|
||||
<a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
|
||||
Bekijk mijn inschrijving
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);">
|
||||
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
function cancellationHtml(params: { firstName: string }) {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Inschrijving geannuleerd</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
|
||||
<tr>
|
||||
<td style="padding:40px 48px 32px;">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
|
||||
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Inschrijving geannuleerd</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:0 48px 40px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Hoi ${params.firstName},
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is geannuleerd.
|
||||
</p>
|
||||
<p style="margin:0;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||
Van gedachten veranderd? Je kunt je altijd opnieuw inschrijven via <a href="${baseUrl}/#registration" style="color:#ffffff;">kunstenkamp.be</a>.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
|
||||
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);">
|
||||
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
export async function sendConfirmationEmail(params: {
|
||||
to: string;
|
||||
firstName: string;
|
||||
managementToken: string;
|
||||
wantsToPerform: boolean;
|
||||
artForm?: string | null;
|
||||
}) {
|
||||
const transport = createTransport();
|
||||
if (!transport) {
|
||||
console.warn("SMTP not configured — skipping confirmation email");
|
||||
return;
|
||||
}
|
||||
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
||||
await transport.sendMail({
|
||||
from,
|
||||
to: params.to,
|
||||
subject: "Bevestiging inschrijving — Open Mic Night",
|
||||
html: registrationConfirmationHtml({
|
||||
firstName: params.firstName,
|
||||
manageUrl,
|
||||
wantsToPerform: params.wantsToPerform,
|
||||
artForm: params.artForm,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
export async function sendUpdateEmail(params: {
|
||||
to: string;
|
||||
firstName: string;
|
||||
managementToken: string;
|
||||
wantsToPerform: boolean;
|
||||
artForm?: string | null;
|
||||
}) {
|
||||
const transport = createTransport();
|
||||
if (!transport) {
|
||||
console.warn("SMTP not configured — skipping update email");
|
||||
return;
|
||||
}
|
||||
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
||||
await transport.sendMail({
|
||||
from,
|
||||
to: params.to,
|
||||
subject: "Inschrijving bijgewerkt — Open Mic Night",
|
||||
html: updateConfirmationHtml({
|
||||
firstName: params.firstName,
|
||||
manageUrl,
|
||||
wantsToPerform: params.wantsToPerform,
|
||||
artForm: params.artForm,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
export async function sendCancellationEmail(params: {
|
||||
to: string;
|
||||
firstName: string;
|
||||
}) {
|
||||
const transport = createTransport();
|
||||
if (!transport) {
|
||||
console.warn("SMTP not configured — skipping cancellation email");
|
||||
return;
|
||||
}
|
||||
await transport.sendMail({
|
||||
from,
|
||||
to: params.to,
|
||||
subject: "Inschrijving geannuleerd — Open Mic Night",
|
||||
html: cancellationHtml({ firstName: params.firstName }),
|
||||
});
|
||||
}
|
||||
@@ -3,8 +3,13 @@ import { db } from "@kk/db";
|
||||
import { adminRequest, registration } from "@kk/db/schema";
|
||||
import { user } from "@kk/db/schema/auth";
|
||||
import type { RouterClient } from "@orpc/server";
|
||||
import { and, count, desc, eq, gte, like, lte } from "drizzle-orm";
|
||||
import { and, count, desc, eq, gte, isNull, like, lte } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
sendCancellationEmail,
|
||||
sendConfirmationEmail,
|
||||
sendUpdateEmail,
|
||||
} from "../email";
|
||||
import { adminProcedure, protectedProcedure, publicProcedure } from "../index";
|
||||
|
||||
const submitRegistrationSchema = z.object({
|
||||
@@ -42,7 +47,8 @@ export const appRouter = {
|
||||
submitRegistration: publicProcedure
|
||||
.input(submitRegistrationSchema)
|
||||
.handler(async ({ input }) => {
|
||||
const result = await db.insert(registration).values({
|
||||
const managementToken = randomUUID();
|
||||
await db.insert(registration).values({
|
||||
id: randomUUID(),
|
||||
firstName: input.firstName,
|
||||
lastName: input.lastName,
|
||||
@@ -52,9 +58,122 @@ export const appRouter = {
|
||||
artForm: input.artForm || null,
|
||||
experience: input.experience || null,
|
||||
extraQuestions: input.extraQuestions || null,
|
||||
managementToken,
|
||||
});
|
||||
|
||||
return { success: true, id: result.lastInsertRowid };
|
||||
await sendConfirmationEmail({
|
||||
to: input.email,
|
||||
firstName: input.firstName,
|
||||
managementToken,
|
||||
wantsToPerform: input.wantsToPerform,
|
||||
artForm: input.artForm,
|
||||
}).catch((err) =>
|
||||
console.error("Failed to send confirmation email:", err),
|
||||
);
|
||||
|
||||
return { success: true, managementToken };
|
||||
}),
|
||||
|
||||
getRegistrationByToken: publicProcedure
|
||||
.input(z.object({ token: z.string().uuid() }))
|
||||
.handler(async ({ input }) => {
|
||||
const rows = await db
|
||||
.select()
|
||||
.from(registration)
|
||||
.where(eq(registration.managementToken, input.token))
|
||||
.limit(1);
|
||||
|
||||
const row = rows[0];
|
||||
if (!row) throw new Error("Inschrijving niet gevonden");
|
||||
if (row.cancelledAt) throw new Error("Deze inschrijving is geannuleerd");
|
||||
|
||||
return row;
|
||||
}),
|
||||
|
||||
updateRegistration: publicProcedure
|
||||
.input(
|
||||
z.object({
|
||||
token: z.string().uuid(),
|
||||
firstName: z.string().min(1),
|
||||
lastName: z.string().min(1),
|
||||
email: z.string().email(),
|
||||
phone: z.string().optional(),
|
||||
wantsToPerform: z.boolean().default(false),
|
||||
artForm: z.string().optional(),
|
||||
experience: z.string().optional(),
|
||||
extraQuestions: z.string().optional(),
|
||||
}),
|
||||
)
|
||||
.handler(async ({ input }) => {
|
||||
const rows = await db
|
||||
.select()
|
||||
.from(registration)
|
||||
.where(
|
||||
and(
|
||||
eq(registration.managementToken, input.token),
|
||||
isNull(registration.cancelledAt),
|
||||
),
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
const row = rows[0];
|
||||
if (!row) throw new Error("Inschrijving niet gevonden of al geannuleerd");
|
||||
|
||||
await db
|
||||
.update(registration)
|
||||
.set({
|
||||
firstName: input.firstName,
|
||||
lastName: input.lastName,
|
||||
email: input.email,
|
||||
phone: input.phone || null,
|
||||
wantsToPerform: input.wantsToPerform,
|
||||
artForm: input.artForm || null,
|
||||
experience: input.experience || null,
|
||||
extraQuestions: input.extraQuestions || null,
|
||||
})
|
||||
.where(eq(registration.managementToken, input.token));
|
||||
|
||||
await sendUpdateEmail({
|
||||
to: input.email,
|
||||
firstName: input.firstName,
|
||||
managementToken: input.token,
|
||||
wantsToPerform: input.wantsToPerform,
|
||||
artForm: input.artForm,
|
||||
}).catch((err) => console.error("Failed to send update email:", err));
|
||||
|
||||
return { success: true };
|
||||
}),
|
||||
|
||||
cancelRegistration: publicProcedure
|
||||
.input(z.object({ token: z.string().uuid() }))
|
||||
.handler(async ({ input }) => {
|
||||
const rows = await db
|
||||
.select()
|
||||
.from(registration)
|
||||
.where(
|
||||
and(
|
||||
eq(registration.managementToken, input.token),
|
||||
isNull(registration.cancelledAt),
|
||||
),
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
const row = rows[0];
|
||||
if (!row) throw new Error("Inschrijving niet gevonden of al geannuleerd");
|
||||
|
||||
await db
|
||||
.update(registration)
|
||||
.set({ cancelledAt: new Date() })
|
||||
.where(eq(registration.managementToken, input.token));
|
||||
|
||||
await sendCancellationEmail({
|
||||
to: row.email,
|
||||
firstName: row.firstName,
|
||||
}).catch((err) =>
|
||||
console.error("Failed to send cancellation email:", err),
|
||||
);
|
||||
|
||||
return { success: true };
|
||||
}),
|
||||
|
||||
getRegistrations: adminProcedure
|
||||
|
||||
Reference in New Issue
Block a user