From d36e80cc5476e1d763746e42c048b1c537dfde5d Mon Sep 17 00:00:00 2001
From: Benjamin Howe <ben@beh.uk>
Date: Sun, 23 Jun 2024 22:44:30 +0100
Subject: [PATCH] Added form submission page

---
 _assets/css/main.css       | 35 +++++++++++++++++++++++++++++++++++
 secure/form-submissions.md | 36 ++++++++++++++++++++++++++++++++++++
 secure/index.md            |  1 +
 3 files changed, 72 insertions(+)
 create mode 100644 secure/form-submissions.md

diff --git a/_assets/css/main.css b/_assets/css/main.css
index c6a3908..d35e32f 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -190,6 +190,41 @@ table#professional-experience tr + tr td {
   padding-top: 0.75rem;
 }
 
+/* spinner used while waiting for fetch, see https://loading.io/css/ */
+
+.loading-spinner {
+  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 {
diff --git a/secure/form-submissions.md b/secure/form-submissions.md
new file mode 100644
index 0000000..40e88a7
--- /dev/null
+++ b/secure/form-submissions.md
@@ -0,0 +1,36 @@
+---
+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();
+    headings.insertCell().innerHTML = "Submission ID";
+    headings.insertCell().innerHTML = "Form ID";
+    headings.insertCell().innerHTML = "Submitted";
+    headings.insertCell().innerHTML = "Spam Reasons";
+    headings.insertCell().innerHTML = "IP Address";
+    headings.insertCell().innerHTML = "ASN";
+    const tbody = table.createTBody(); 
+    submissions.forEach(row => {
+      const tr = table.insertRow();
+      const td = tr.insertCell();
+      td.innerHTML = row.submission_id;
+    });
+    document.getElementById("form-submissions").innerHTML = table.outerHTML;
+  });
+</script>
diff --git a/secure/index.md b/secure/index.md
index 547991e..8b40676 100644
--- a/secure/index.md
+++ b/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)