From 46c9b7731622f1f4d0f6a03c3179e747e0ce065d Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Thu, 18 Dec 2025 11:04:03 +0000 Subject: contact page --- website/src/scripts/contact/submit-contact-form.ts | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 website/src/scripts/contact/submit-contact-form.ts (limited to 'website/src/scripts/contact/submit-contact-form.ts') diff --git a/website/src/scripts/contact/submit-contact-form.ts b/website/src/scripts/contact/submit-contact-form.ts new file mode 100644 index 0000000..0d47b8b --- /dev/null +++ b/website/src/scripts/contact/submit-contact-form.ts @@ -0,0 +1,53 @@ +import { actions } from "astro:actions"; +import { postErrorMessageOnContactForm } from "./post-error-message"; +import { resetResendButton } from "./reset-resend-button"; +import type { Selectors } from "./selectors"; + +const fallbackErrorMsg = + "No can do. I'm afraid joeac.net is a bit broken right now - sorry about that."; + +export async function submitContactForm( + selectors: Selectors, + resendButtonInterval: NodeJS.Timeout | undefined, +): Promise { + const { contactForm, otpDialog } = selectors; + + const name = contactForm.nameElem()?.value; + const email = contactForm.emailElem().value; + + contactForm.submitButton()?.setAttribute("disabled", ""); + const sendOtpResult = await actions.otp.send({ type: "email", name, email }); + if (sendOtpResult.error) { + const errorMsg = sendOtpResult.error?.toString() ?? fallbackErrorMsg; + postErrorMessageOnContactForm(selectors, errorMsg); + throw sendOtpResult.error; + } + + const otpRecipient = otpDialog.otpRecipient(); + email && otpRecipient && (otpRecipient.textContent = `<${email}>`); + const otpValidUntil = otpDialog.otpValidUntil(); + const validUntil = new Date(Date.now() + 1000 * 60 * 5); + otpValidUntil && + (otpValidUntil.textContent = `until ${validUntil.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`); + + const dialog = otpDialog.self(); + dialog.showModal(); + contactForm.submitButton()?.removeAttribute("disabled"); + dialog.addEventListener("click", function (event) { + const rect = dialog.getBoundingClientRect(); + const isInDialog = + rect.top <= event.clientY && + event.clientY <= rect.top + rect.height && + rect.left <= event.clientX && + event.clientX <= rect.left + rect.width; + if (!isInDialog) { + dialog.close(); + } + }); + + return resetResendButton(selectors, resendButtonInterval); +} + +type Result = { + resendButtonInterval: NodeJS.Timeout | undefined; +}; -- cgit v1.2.3