Created urgent contact form

Author: BenjaminEHowe

bot.md

@@ -0,0 +1,6 @@
+---
+layout: default
+title: Bot
+---
+
+If you're reading this page then you've probably found my user agent in your logs somewhere. If this is causing issues, please [send me a message via my contact form](/contact) and we can solve the problem.

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(res => {
+          alert("Your message has been sent successfully.");
+          event.target.reset();
+        })
+      }
+    });
+  });
+</script>

functions-src/comms/email.js

@@ -1,3 +1,5 @@
+import { USER_AGENT } from "../util.js";
+
 function formToText(form) {
   var text = "";
   for (const property in form) {
@@ -26,8 +28,9 @@ async function sendFormViaResend(api_key, to, subject, form) {
   const response = await fetch(new Request("https://api.resend.com/emails", {
     method: "POST",
     headers: {
-      "Authorization": `Bearer ${api_key}`,
+      "authorization": `Bearer ${api_key}`,
       "content-type": "application/json",
+      "user-agent": USER_AGENT,
     },
     body: JSON.stringify({
       from: "[email protected]",

functions-src/comms/push.js

@@ -0,0 +1,38 @@
+import { USER_AGENT } from "../util.js";
+
+function formToText(form) {
+  var text = "";
+  for (const property in form) {
+    text += `${property}:\n`;
+    var value = form[property];
+    if (typeof value !== "string") {
+      value = prettyJson(value);
+    }
+    text += `${value}\n\n`;
+  }
+  return text;
+}
+
+async function sendFormViaPush({env, to, form}) {
+  if (to === undefined) {
+    to = env.PUSHOVER_BEN;
+  }
+  return await sendFormViaPushover(env.PUSHOVER_KEY, to, form);
+}
+
+async function sendFormViaPushover(apiKey, to, form) {
+  const response = await fetch(new Request("https://api.pushover.net/1/messages.json", {
+    method: "POST",
+    headers: {
+      "user-agent": USER_AGENT,
+    },
+    body: JSON.stringify({
+      token: apiKey,
+      user: to,
+      message: formToText(form),
+    }),
+  }));
+  return response.ok;
+}
+
+export { sendFormViaPush }

functions-src/forms.js

@@ -1,5 +1,7 @@
-import { sendFormViaEmail } from "./comms/email.js"
-import { ulidFactory } from "./ulid.ts"
+import { sendFormViaEmail } from "./comms/email.js";
+import { sendFormViaPush } from "./comms/push.js";
+import { verifySecureToken } from "./secure-token.js";
+import { ulidFactory } from "./ulid.ts";
 
 const ulid = ulidFactory({ monotonic: true });
 
@@ -8,13 +10,25 @@ 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 (URGENT_TOKEN_FIELD_NAME in fields) {
+    if (await verifySecureToken({
+      token: fields[URGENT_TOKEN_FIELD_NAME],
+      secret: context.env.TOKEN_GENERATOR_SECRET,
+    }) === false) {
+      spamReasons.push("BAD_TOKEN");
+    }
+  }
 
   if (typeof honeypotField === "string") {
     if (fields[honeypotField] !== "") {
@@ -37,15 +51,24 @@ async function handleForm({
     .run();
 
   if (spamReasons.length === 0) {
-    return await sendFormViaEmail({
+    const emailResult = await sendFormViaEmail({
       env: context.env,
       subject: `New ${formId} form submission from beh.uk`,
       form: fields,
-    })
+    });
+    if (URGENT_TOKEN_FIELD_NAME in fields) {
+      return await sendFormViaPush({
+        env: context.env,
+        form: fields,
+      });
+    }
+    return emailResult;
   } else {
     // submission is belived to be spam, return OK and don't do anything else
     return true;
   }
 }
 
+const URGENT_TOKEN_FIELD_NAME = "token";
+
 export { handleForm }

functions-src/util.js

@@ -0,0 +1,5 @@
+const USER_AGENT = "Mozilla/5.0 (compatible; www.beh.uk/1.0; +https://www.beh.uk/bot)";
+
+export {
+  USER_AGENT,
+}

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.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 })
     })