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(-) 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