From 01c0f792484f8f52606eae0e58abe528acef3086 Mon Sep 17 00:00:00 2001 From: Leo Goetz Date: Thu, 22 Jan 2026 09:10:15 +0100 Subject: feat: completed course, added some types and changed output to dist folder --- frontend/src/components/Forms.ts | 68 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 frontend/src/components/Forms.ts (limited to 'frontend/src/components/Forms.ts') diff --git a/frontend/src/components/Forms.ts b/frontend/src/components/Forms.ts new file mode 100644 index 0000000..ff35065 --- /dev/null +++ b/frontend/src/components/Forms.ts @@ -0,0 +1,68 @@ +const API_URL = import.meta.env.VITE_API_URL; + +export const setupForm = (form: HTMLFormElement) => { + if (!form) return; + + const eventId = form.id.replace("rsvp-form-", ""); + const url = `${API_URL}/events/${eventId}/rsvp`; + const btn = document.getElementById(`submit-${form.id}`); + + async function sendData(form: HTMLFormElement) { + const formData = new FormData(form); + const encoded = new URLSearchParams(); + for (let [key, value] of formData.entries()) { + encoded.append(key, value.toString()); + } + try { + const response = await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + body: encoded, + }); + if (response.status === 201) { + form.dataset.submitted = "success"; + if (btn) { + btn.textContent = "You're going!"; + btn.setAttribute("disabled", ""); + } + } else if (response.status === 200) { + form.dataset.submitted = "duplicate"; + if (btn) { + btn.textContent = "You're already going!"; + btn.setAttribute("disabled", ""); + } + } + } catch (e) { + form.dataset.submitted = "error"; + console.error(e); + } + } + + form.addEventListener("submit", (event) => { + event.preventDefault(); + sendData(form); + }); + + if (btn) { + const emailInput = form.querySelector("input.rsvp-email"); + if (emailInput) { + emailInput.addEventListener("input", () => { + if (btn.textContent !== "Submit RSVP") { + btn.removeAttribute("disabled"); + btn.textContent = "Submit RSVP"; + } + }); + } + } +}; + +export const setupForms = () => { + const rsvpForms = document.querySelectorAll("form"); + if (!rsvpForms) return; + for (let form of rsvpForms) { + setupForm(form); + } +}; + -- cgit v1.3