From c255269db0c739400b62d4c4041e3238b1045d22 Mon Sep 17 00:00:00 2001
From: stuebinm
Date: Thu, 8 Apr 2021 00:08:47 +0200
Subject: site: better error messages

this includes styling error messages red, and displaying error messages
in case not all answers were answered as required (for now, this just
means that not selecting any option in radio buttons is disallowed in
general, as so far there are no corresponding config fields).
---
 site/index.html | 77 ++++++++++++++++++++++++++++++++-------------------------
 site/style.css  |  4 +++
 2 files changed, 47 insertions(+), 34 deletions(-)

(limited to 'site')

diff --git a/site/index.html b/site/index.html
index ced3af8..cdc3719 100644
--- a/site/index.html
+++ b/site/index.html
@@ -33,9 +33,12 @@
          return root;
      }
 
-     function mkElement (kind, text = "") {
+     function mkElement (kind, text = "", c = null) {
          let p = document.createElement(kind);
          p.innerText = text;
+         if (c !== null) {
+             p.classList.add(c);
+         }
          return p;
      }
 
@@ -136,7 +139,7 @@
 
          let footer = mkElement("section");
          let submit = mkElement("button", "Submit");
-         let errormsg = mkElement("p", "");
+         let errormsg = mkElement("p", "", "error");
          appendChildren(footer, [
              mkElement("hr"),
              submit,
@@ -147,37 +150,43 @@
              // the callback over the complete survey just maps all
              // other callbacks to their values, i.e. calls them all
              let answers = callbacks.map((c) => c());
-             console.log("answers given by user:", answers);
-             // encrypt things
-             let byteArray = age_encrypt(JSON.stringify(answers), survey.pubkey);
 
-             let blobData = new Blob(
-                 [byteArray],
-                 { type: 'application/octet-stream' }
-             );
+             if (answers.filter((c) => c == null).length === 0) {
+                 console.log("answers given by user:", answers);
+                 // encrypt things
+                 let byteArray = age_encrypt(JSON.stringify(answers), survey.pubkey);
 
-             fetch("/upload", {
-                 method: "POST",
-                 body: blobData,
-                 headers: {
-                     "X-Survey": survey.title,
-                     "Content-Type": "text/age"
-                 }
-             }).then(response => {
-                 console.log(response);
-                 if (response.status === 200) {
-                     console.log(response.text())
-                     window.location.href = "thanks.html";
-                 }
-                 errormsg.innerText = "POST request returned error code:\n"
-                                    + response.status + ": " + response.statusText;
-                 errormsg.hidden = false;
-             }).catch(error => {
-                 console.log(error);
-                 errormsg.innerText = "Error: The http POST request did not succeed.";
-                 errormsg.hidden = false;
-             });
+                 let blobData = new Blob(
+                     [byteArray],
+                     { type: 'application/octet-stream' }
+                 );
 
+                 fetch("/upload", {
+                     method: "POST",
+                     body: blobData,
+                     headers: {
+                         "X-Survey": survey.title,
+                         "Content-Type": "text/age"
+                     }
+                 }).then(response => {
+                     console.log(response);
+                     if (response.status === 200) {
+                         console.log(response.text())
+                         window.location.href = "thanks.html";
+                     }
+                     errormsg.innerText = "POST request returned error code:\n"
+                                        + response.status + ": " + response.statusText;
+                     errormsg.hidden = false;
+                 }).catch(error => {
+                     console.log(error);
+                     errormsg.innerText = "Error: The http POST request did not succeed.";
+                     errormsg.hidden = false;
+                 });
+
+             } else {
+                 errormsg.innerText = "Cannot submit: not all required questions were filled in!";
+                 errormsg.hidden = false;
+             }
          }
          root.appendChild(footer);
 
@@ -204,7 +213,7 @@
              passphrase,
              button
          ].concat(
-             secondTry ? [mkElement("p","passphrase was incorrect!")] : []
+             secondTry ? [mkElement("p","passphrase was incorrect!","error")] : []
          ));
          root.appendChild(div);
          button.onclick = () => {
@@ -228,10 +237,10 @@
      function mkReadError (msg) {
          appendChildren(root, [
              mkElement("h1", "Error"),
-             mkElement("p", msg),
+             mkElement("p", msg, "error"),
              appendChildren(
-                 mkElement("p","attempted path: "),
-                 [mkElement("tt", surveyUrl)]
+                 mkElement("p","attempted path: ","error"),
+                 [mkElement("tt", surveyUrl,"error")]
              )
          ]);
      }
diff --git a/site/style.css b/site/style.css
index e16c0cc..b8be0dd 100644
--- a/site/style.css
+++ b/site/style.css
@@ -20,6 +20,10 @@ li {
     list-style-type: none;
 }
 
+.error {
+    color: red;
+}
+
 textarea {
     width: 100%;
     height: 6em;
-- 
cgit v1.2.3