rda-v3/functions/api/volunteer-reference.ts
Calum Muir ea25680363 Redesign forms to multi-step; add sponsor section and content updates
- Rewrite volunteer-application.astro: 5-step multi-step form with
  progress pills, choice cards, per-step validation, review step,
  and fetch-based submission; matches new site design system
- Rewrite participant-application.astro: 5-step multi-step form
  (Participant, Health & support, Activities, Consent, Review);
  retains all original field names; 27 support question checkboxes
  as interactive cards; callout box; guardian section on step 1
- Add volunteer-reference.astro: new non-public 5-step reference form
  (noindex/nofollow); steps: The applicant, Your details, Relationship,
  Assessment, Declaration; posts to /api/volunteer-reference
- Add functions/api/volunteer-reference.ts: Cloudflare Pages Function
  mirroring volunteer-application pattern with Turnstile + Resend
- Add Ffordes sponsor logo to homepage; replace placeholder sponsor
  boxes with full corporate sponsorship section (£750/annum) with
  four benefit cards and CTAs
- Move ffordes_logo.png to public/sponsors/
- Remove all references to 'carriage driving' and 'free sessions'
  across about.astro, index.astro, privacy.astro, support-us.astro,
  and participant-application.astro
- facebook.astro: styled mock-post feed with like toggle, page header
  card, sidebar, and embed note banner

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 17:03:37 +02:00

348 lines
11 KiB
TypeScript

type Env = {
TURNSTILE_SECRET_KEY?: string;
RESEND_API_KEY?: string;
CONTACT_FROM_EMAIL?: string;
CONTACT_TO_EMAIL?: string;
};
const jsonResponse = (data: Record<string, unknown>, status = 200) =>
new Response(JSON.stringify(data), {
status,
headers: { "content-type": "application/json" },
});
const fetchWithTimeout = async (
input: RequestInfo | URL,
init: RequestInit,
timeoutMs: number,
label: string,
) => {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), timeoutMs);
try {
return await fetch(input, { ...init, signal: controller.signal });
} catch (error) {
const message =
error instanceof Error ? error.message : "Unknown error";
throw new Error(`${label} request failed: ${message}`);
} finally {
clearTimeout(timeout);
}
};
const readTextField = (value: string | null) => (value ?? "").trim();
const toTitleCase = (value: string) =>
value
.replace(/_/g, " ")
.replace(/\b\w/g, (char) => char.toUpperCase());
const parseFormFields = async (request: Request) => {
const contentType = request.headers.get("content-type") ?? "";
const data = new Map<string, string[]>();
const appendValue = (key: string, value: string | null) => {
const normalized = readTextField(value);
if (!normalized) return;
data.set(key, [...(data.get(key) ?? []), normalized]);
};
if (contentType.includes("application/x-www-form-urlencoded")) {
const bodyText = await request.text();
const params = new URLSearchParams(bodyText);
for (const [key, value] of params.entries()) {
appendValue(key, value);
}
return data;
}
const formData = await request.formData();
for (const [key, value] of formData.entries()) {
appendValue(key, typeof value === "string" ? value : value.name);
}
return data;
};
const formatValue = (values: string[] | undefined) => (values ?? []).join(", ");
const labelMap: Record<string, string> = {
applicant_first_names: "Applicant first name(s)",
applicant_last_name: "Applicant last name",
referee_name: "Referee full name",
referee_job_title: "Referee job title or role",
referee_organisation: "Referee organisation",
referee_address: "Referee address",
referee_telephone: "Referee telephone",
referee_email: "Referee email",
relationship_capacity: "Capacity in which referee knows the applicant",
relationship_other: "Relationship (if Other)",
known_duration: "How long referee has known the applicant",
related_to_applicant: "Related to the applicant",
character_assessment: "Character and personal qualities",
reliable_punctual: "Reliable and punctual",
suitable_for_role: "Suitable to work with people with disabilities",
suitability_concerns: "Concerns regarding suitability",
additional_comments: "Additional comments",
declaration_truth: "Declaration of truth and accuracy",
declaration_consent: "Declaration of confidentiality understanding",
declaration_signature: "Signature name",
declaration_date: "Date",
};
const requiredFields = [
"applicant_first_names",
"applicant_last_name",
"referee_name",
"referee_email",
"known_duration",
"character_assessment",
"suitable_for_role",
"declaration_truth",
];
const sectionOrder = [
{
title: "Applicant",
fields: ["applicant_first_names", "applicant_last_name"],
},
{
title: "Referee Details",
fields: [
"referee_name",
"referee_job_title",
"referee_organisation",
"referee_address",
"referee_telephone",
"referee_email",
],
},
{
title: "Relationship to Applicant",
fields: [
"relationship_capacity",
"relationship_other",
"known_duration",
"related_to_applicant",
],
},
{
title: "Assessment",
fields: [
"character_assessment",
"reliable_punctual",
"suitable_for_role",
"suitability_concerns",
"additional_comments",
],
},
{
title: "Declaration",
fields: [
"declaration_truth",
"declaration_consent",
"declaration_signature",
"declaration_date",
],
},
];
const handlePost: PagesFunction<Env> = async ({ request, env }) => {
const fields = await parseFormFields(request);
const missingRequired = requiredFields.filter(
(field) => !formatValue(fields.get(field)),
);
if (missingRequired.length > 0) {
return jsonResponse(
{
ok: false,
error: "Missing required fields.",
details: missingRequired.map((field) => labelMap[field] ?? field).join(", "),
},
400,
);
}
if (!env.TURNSTILE_SECRET_KEY) {
return jsonResponse(
{ ok: false, error: "Turnstile secret key not configured." },
500,
);
}
const turnstileToken = formatValue(fields.get("cf-turnstile-response"));
if (!turnstileToken) {
return jsonResponse(
{ ok: false, error: "Turnstile verification failed." },
400,
);
}
const verifyBody = new URLSearchParams({
secret: env.TURNSTILE_SECRET_KEY,
response: turnstileToken,
remoteip: request.headers.get("CF-Connecting-IP") ?? "",
});
const verifyResponse = await fetchWithTimeout(
"https://challenges.cloudflare.com/turnstile/v0/siteverify",
{
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: verifyBody,
},
8000,
"Turnstile",
);
const verifyResult = (await verifyResponse.json()) as {
success?: boolean;
"error-codes"?: string[];
messages?: string[];
hostname?: string;
action?: string;
};
if (!verifyResult.success) {
const details = [
verifyResult["error-codes"]?.length
? `codes=${verifyResult["error-codes"].join(",")}`
: "",
verifyResult.messages?.length
? `messages=${verifyResult.messages.join(",")}`
: "",
verifyResult.hostname ? `hostname=${verifyResult.hostname}` : "",
verifyResult.action ? `action=${verifyResult.action}` : "",
]
.filter(Boolean)
.join(" | ")
.slice(0, 500);
return jsonResponse(
{
ok: false,
error: "Turnstile verification failed.",
details: details || undefined,
},
400,
);
}
if (!env.RESEND_API_KEY) {
return jsonResponse(
{ ok: false, error: "Email provider not configured." },
500,
);
}
const fromEmail = env.CONTACT_FROM_EMAIL;
if (!fromEmail) {
return jsonResponse(
{ ok: false, error: "Sender email not configured." },
500,
);
}
const toEmail = env.CONTACT_TO_EMAIL ?? "calum@muir.in";
const applicantName = [
formatValue(fields.get("applicant_first_names")),
formatValue(fields.get("applicant_last_name")),
]
.filter(Boolean)
.join(" ");
const refereeName = formatValue(fields.get("referee_name"));
const bodyText = sectionOrder
.map(({ title, fields: sectionFields }) => {
const lines = sectionFields
.map((field) => {
const value = formatValue(fields.get(field));
if (!value) return null;
return `${labelMap[field] ?? toTitleCase(field)}: ${value}`;
})
.filter(Boolean)
.join("\n");
return lines ? `${title}\n${lines}` : "";
})
.filter(Boolean)
.join("\n\n");
const extraFields = [...fields.keys()].filter(
(field) =>
field !== "cf-turnstile-response" &&
!sectionOrder.some((section) => section.fields.includes(field)),
);
const extraText = extraFields
.map((field) => {
const value = formatValue(fields.get(field));
return value ? `${labelMap[field] ?? toTitleCase(field)}: ${value}` : "";
})
.filter(Boolean)
.join("\n");
const emailPayload = {
from: fromEmail,
to: [toEmail],
reply_to: formatValue(fields.get("referee_email")) || undefined,
subject: `New volunteer reference${applicantName ? ` for ${applicantName}` : ""}${refereeName ? ` from ${refereeName}` : ""}`,
text: [bodyText, extraText ? `Additional Fields\n${extraText}` : ""]
.filter(Boolean)
.join("\n\n"),
};
const response = await fetchWithTimeout(
"https://api.resend.com/emails",
{
method: "POST",
headers: {
Authorization: `Bearer ${env.RESEND_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify(emailPayload),
},
8000,
"Resend",
);
if (!response.ok) {
const contentType = response.headers.get("content-type") ?? "";
const errorText = contentType.includes("application/json")
? JSON.stringify(await response.json().catch(() => ({})))
: await response.text();
const errorCode = response.headers.get("x-ms-error-code");
const details = [
`${response.status} ${response.statusText}`.trim(),
errorCode ? `code=${errorCode}` : "",
errorText.trim(),
]
.filter(Boolean)
.join(" | ")
.slice(0, 500);
return jsonResponse(
{
ok: false,
error: "Failed to send email.",
details,
},
502,
);
}
return jsonResponse({ ok: true });
};
export const onRequest: PagesFunction<Env> = async (context) => {
try {
if (context.request.method !== "POST") {
return jsonResponse(
{ ok: false, error: "Method not allowed." },
405,
);
}
return await handlePost(context);
} catch (error) {
const message =
error instanceof Error ? error.message : "Unknown error";
return jsonResponse(
{ ok: false, error: "Unhandled exception.", details: message },
500,
);
}
};