Added form submission page

Author: BenjaminEHowe

_assets/css/main.css

@@ -190,6 +190,44 @@ table#professional-experience tr + tr td {
   padding-top: 0.75rem;
 }
 
+/* spinner used while waiting for fetch, see https://loading.io/css/ */
+
+.lds-dual-ring {
+  color: #961c1c;
+}
+
+.lds-dual-ring,
+.lds-dual-ring:after {
+  box-sizing: border-box;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6.4px solid currentColor;
+  border-color: currentColor transparent currentColor transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* footer */
 
 #main {

functions/secure/api/form.js

@@ -16,7 +16,7 @@ export async function onRequest(context) {
       return row;
     });
 
-    return Response.json(submissionsQuery.results);
+  return Response.json(submissionsQuery.results);
 }
 
 // TODO: this is bad practice, consider replacing (see https://www.reddit.com/r/learnjavascript/comments/qgtut6/comment/hi8jg6w/)

secure/form-submissions.md

@@ -0,0 +1,57 @@
+---
+layout: default
+title: Form Submissions
+---
+
+This table shows form submissions over the last 30 days:
+<div id="form-submissions"><div class="lds-dual-ring"></div></div>
+
+<script>
+  fetch("/secure/api/form", {
+    method: "GET",
+    headers: {
+      "accept": "application/json",
+      "content-type": "application/json",
+    },
+  })
+  .then(res => res.json())
+  .then(submissions => {
+    const table = document.createElement("table");
+    const thead = table.createTHead();
+    const headings = thead.insertRow();
+    [
+      "Submission ID",
+      "Form ID",
+      "Submitted",
+      "Spam Reasons",
+      "IP Address",
+      "ASN",
+    ].formEach(heading => headings.insertCell().innerHTML = heading)
+    const tbody = table.createTBody(); 
+    submissions.forEach(row => {
+      const tr = table.insertRow();
+
+      const tdSubmissionId = tr.insertCell();
+      tdSubmissionId.innerHTML = row.submission_id;
+
+      const tdFormId = tr.insertCell();
+      tdFormId.innerHTML = row.form_id;
+
+      const tdSubmitted = tr.insertCell();
+      tdSubmitted.innerHTML = row.submitted_ts;
+
+      const tdSpamReasons = tr.insertCell();
+      tdSpamReasons.innerHTML = row.spam_reasons;
+
+      const tdIpAddress = tr.insertCell();
+      tdIpAddress.innerHTML = `${getFlagEmoji(row.country)} <a href="https://cleantalk.org/blacklists/${row.ip}">${row.ip}</a>`;
+
+      const tdAsn = tr.insertCell();
+      tdAsn.innerHTML = `<a href="https://bgp.tools/as/${row.asn}">AS${row.asn}</a>`;
+    });
+    document.getElementById("form-submissions").innerHTML = table.outerHTML;
+  });
+
+  // https://www.bqst.fr/country-code-to-flag-emoji/
+  const getFlagEmoji = countryCode=>String.fromCodePoint(...[...countryCode.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()));
+</script>

secure/index.md

@@ -3,4 +3,5 @@ layout: default
 title: "Secure area: index"
 ---
 
+- [(Contact) form submissions](form-submissions)
 - [Token generator (for urgent contact form)](token-generator)