dashboard: colorize edit errors

1 files changed, 6 insertions, 3 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 0f83ca8..0c03ebf 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -84,6 +84,7 @@
   .tree pre { margin: 2px 0 4px 1.1em; white-space: pre-wrap; word-break: break-all;
     max-height: 20em; overflow: auto; }
   .note { color: var(--muted); font-style: italic; }
+  .error { color: var(--bad); }
   .editor { margin: 2px 0 4px; }
   .tree details > .editor { margin-left: 1.1em; }
   .editor input[type=text], .editor textarea { width: 100%; font: inherit; color: var(--fg);
@@ -601,6 +602,7 @@ const EMPTY_VALUE = { map: () => ({}), list: () => [], text: () => "" };
 // switches. `done(saved)` when saved or cancelled.
 function editor(path, value, done) {
   const message = el("span", { class: "note" });
+  const fail = text => { message.className = "error"; message.textContent = text; };
   const asText = typeof value === "string";
   const text = asText ? value : JSON.stringify(value, null, 2);
   const long = text.includes("\n") || text.length > 60 || (value !== null && typeof value === "object");
@@ -618,7 +620,7 @@ function editor(path, value, done) {
       field.value = parsed;
     } catch {
       json.checked = true;
-      message.textContent = "Only a JSON string can be edited as text.";
+      fail("Only a JSON string can be edited as text.");
     }
   });
   const save = el("button", { type: "button" }, "Save");
@@ -627,10 +629,11 @@ function editor(path, value, done) {
     const body = field.value;
     if (json.checked) {
       try { JSON.parse(body); } catch (error) {
-        message.textContent = "Not JSON: " + error.message; return;
+        fail("Not JSON: " + error.message); return;
       }
     }
     save.disabled = true;
+    message.className = "note";
     message.textContent = "Saving…";
     try {
       const response = await fetch(storeUrl(path, false), { method: "PUT", body,
@@ -641,7 +644,7 @@ function editor(path, value, done) {
       done(true);
     } catch (error) {
       save.disabled = false;
-      message.textContent = "Not saved: " + error.message;
+      fail("Not saved: " + error.message);
     }
   };
   save.addEventListener("click", submit);