Added form submission page

Author: BenjaminEHowe

_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 {

secure/form-submissions.md

@@ -0,0 +1,27 @@
+---
+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");
+    submissions.forEach(row => {
+      const tr = table.insertRow();
+      const td = tr.insertCell();
+      td.innerHTML = row.submission_id;
+    });
+    document.getElementById("form-submissions").innerHTML = table;
+  });
+</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)