summaryrefslogtreecommitdiff
path: root/site
diff options
context:
space:
mode:
authorstuebinm2021-04-08 00:08:47 +0200
committerstuebinm2021-04-08 00:08:47 +0200
commitc255269db0c739400b62d4c4041e3238b1045d22 (patch)
tree3efe9dfbb21d54561509c3cf1a3da8627448d7f6 /site
parent0050cd0df5f38b9b2b8d8569822dbe1231d77adb (diff)
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).
Diffstat (limited to 'site')
-rw-r--r--site/index.html77
-rw-r--r--site/style.css4
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;