make use of red info bar for errors.

2 files changed, 42 insertions, 1 deletions

diff --git a/js/backoffice.js b/js/backoffice.js
index 8d680fa..c2fe86b 100644
--- a/js/backoffice.js
+++ b/js/backoffice.js
@@ -161,6 +161,39 @@ var track_transfer = function(exchange, wtid, cb){
   req.send();
 }
 
+
+/* Fill the information bar on the top of the page with
+ * error messages.  */
+var show_error = function(response_text){
+
+  console.log("Filling info bar");
+  var msg;
+  try{
+    var parse = JSON.parse(response_text);
+    console.log("Response was at least JSON");
+    if (parse['error'])
+      msg = parse['error'];
+
+    /* Give precedence to 'hint' as it is usually
+     * human-friendlier */
+    if (parse['hint'])
+      msg = parse['hint'];
+
+  } catch (e) {
+    console.log("Must keep raw HTML-ish response");
+    msg = response_text;
+  }
+  
+  /* msg is ready here.  */
+
+  /* Get hold of the info bar.  */
+  var info_bar = document.getElementById("information-bar");
+  info_bar.innerHTML = `<p>${msg}</p>`; 
+  info_bar.style.visibility = ""; 
+
+  /* Info bar will disappear at next page load/reload.  */
+}
+
 /**
  * Call /track/order API offered by the frontend.  Once data
  * arrives it calls a UI routine which fills the "entries table"
@@ -174,7 +207,11 @@ var track_order = function(order_id, cb){
   req.open("GET", url, true);
   req.onload = function(){
     if (4 == req.readyState){
-      cb(JSON.parse(req.responseText), req.status);
+      if ((200 == req.status) || (202 == req.status))
+        cb(JSON.parse(req.responseText), req.status);
+      else
+        console.log("Calling info bar filler");
+        show_error(req.responseText);
       return;
     }
   }
diff --git a/talerbackoffice/backoffice/templates/backoffice.html b/talerbackoffice/backoffice/templates/backoffice.html
index 6c4a21e..363f467 100644
--- a/talerbackoffice/backoffice/templates/backoffice.html
+++ b/talerbackoffice/backoffice/templates/backoffice.html
@@ -13,6 +13,10 @@
     </select>
   </div>
 
+  <div id="information-bar"
+       stlye="visibility: hidden;">
+  </div>
+
   <div>
     <form action="">
       <input type="text"