- 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>
348 lines
11 KiB
TypeScript
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,
|
|
);
|
|
}
|
|
};
|