Created urgent contact form

Author: BenjaminEHowe

contact-urgent.md

@@ -0,0 +1,65 @@
+---
+layout: default
+title: Urgent Contact
+---
+
+If you have an access token then you can send me an urgent message using this form:
+
+<form id="contact-form" method="post" action="/api/contact-urgent">
+  <fieldset style="display:none">
+    <label for="name">Leave blank if you're human:</label>
+    <input type="text" name="name" id="name" placeholder="Leave blank if you're human">
+  </fieldset>
+  <fieldset style="margin-bottom:1em">
+    <label for="email" style="display:inline-block; margin-bottom:0.5em">Email address:</label>
+    <input type="email" name="email" id="email" placeholder="Email address" style="box-sizing:border-box; width:100%; max-width:20em" required>
+  </fieldset>
+  <fieldset style="margin-bottom:0.5em">
+    <label for="message">Message:</label>
+  </fieldset>
+  <fieldset style="margin-bottom:1em">
+    <textarea name="message" id="message" placeholder="Message" style="box-sizing:border-box; width:100%; max-width:60em; height:15em" required></textarea>
+  </fieldset>
+  <fieldset style="margin-bottom:1em">
+    <label for="token" style="display:inline-block; margin-bottom:0.5em">Token:</label>
+    <input type="text" name="token" id="token" placeholder="token" style="box-sizing:border-box; width:100%; max-width:20em" required>
+  </fieldset>
+  <button type="submit" style="margin-bottom:1em">Send</button>
+</form>
+
+<script>
+  document.getElementById("contact-form").addEventListener("submit", event => {
+    event.preventDefault()
+    const formData = new FormData(event.target);
+    const token = formData.get("token");
+    fetch("/api/token-verify", {
+      method: "POST",
+      headers: {
+        "accept": "application/json",
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({ token })
+    })
+    .then(res => res.json())
+    .then(res => {
+      const element = document.getElementById("token-verify-output");
+      if (!res.ok) {
+        alert(`Token ${token} does not appear to be valid.`)
+      } else {
+        fetch("/api/contact-urgent", {
+          method: "POST",
+          headers: {
+            "accept": "application/json",
+            "content-type": "application/json",
+          },
+          body: JSON.stringify(Object.fromEntries(formData.entries()))
+        })
+        .then(res => res.json())
+        .then(
+          alert("Your message has been sent successfully.")
+          event.target.reset()
+        )
+      }
+    });
+  });
+</script>

functions-src/forms.js

@@ -8,13 +8,16 @@ async function handleForm({
   formId,
   honeypotField,
 }) {
+  const headers = Object.fromEntries(context.request.headers.entries());
+  const usingJson = (headers.content-type === "application/json");
   const submissionId = ulid();
   const submittedTs = new Date().toISOString();
-  const fields = Object.fromEntries((await context.request.formData()).entries());
+  const fields = usingJson ?
+    await context.request.json() :
+    Object.fromEntries((await context.request.formData()).entries());
   const replyEmail = fields.email;
   const spamReasons = [];
   const cf = context.request.cf;
-  const headers = Object.fromEntries(context.request.headers.entries());
 
   if (typeof honeypotField === "string") {
     if (fields[honeypotField] !== "") {

functions/api/contact-urgent.js

@@ -0,0 +1,25 @@
+import { handleForm } from "../../functions-src/forms.js"
+
+export async function onRequest(context) {
+  if (context.request.method !== "POST") {
+    return new Response("Invalid request method", { status: 405 });
+  }
+
+  const headers = Object.fromEntries(context.request.headers.entries());
+  const url = new URL(context.request.url)
+  const usingJson = (headers.content-type === "application/json");
+
+  const success = await handleForm({
+    context,
+    formId: "URGENT-CONTACT",
+    honeypotField: "name",
+  });
+
+  if (!success && !usingJson) {
+    return new Response("Oops! Something went wrong. Please try submitting the form again.", { status: 500 });
+  }
+
+  return usingJson ? 
+    Response. Response.json({ success }):
+    Response.redirect(`https://${url.hostname}/contact-success`, 303);
+}

secure/token-generator.md

@@ -39,8 +39,8 @@ Use this form to generate a token for the urgent contact form.
     fetch('/secure/api/token-generate', {
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        'accept': 'application/json',
+        'content-type': 'application/json'
       },
       body: JSON.stringify({ name, expiry })
     })
@@ -55,8 +55,8 @@ Use this form to generate a token for the urgent contact form.
     fetch('/api/token-verify', {
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        'accept': 'application/json',
+        'content-type': 'application/json'
       },
       body: JSON.stringify({ token })
     })