Validate inputs via JS.

3 files changed, 72 insertions, 7 deletions

diff --git a/js/backoffice.js b/js/backoffice.js
index 646c33b..77361d9 100644
--- a/js/backoffice.js
+++ b/js/backoffice.js
@@ -506,10 +506,10 @@ function track_cherry_pick(form){
 function cherry_pick_form_order(form){
   var input_order = xpath_get("input[@class='order']", form)
     .snapshotItem(0);
-  input_order.style.visibility = "";
+  input_order.style.display = "";
   var input_transfer = xpath_get("input[@class='transfer']", form);
   for(var i in [0, 1])
-    input_transfer.snapshotItem(i).style.visibility = "hidden";
+    input_transfer.snapshotItem(i).style.display = "none";
 }
 
 /**
@@ -518,10 +518,10 @@ function cherry_pick_form_order(form){
 function cherry_pick_form_transfer(form){
   var input_order = xpath_get("input[@class='order']", form)
   .snapshotItem(0);
-  input_order.style.visibility = "hidden";
+  input_order.style.display = "none";
   var input_transfer = xpath_get("input[@class='transfer']", form);
   for(var i in [0, 1])
-    input_transfer.snapshotItem(i).style.visibility = "";
+    input_transfer.snapshotItem(i).style.display = "";
 }
 
 /**
@@ -647,3 +647,65 @@ if (typeof(module) != "undefined"){
   module.exports.track_order = track_order;
   clear_results = ()=>true;
 }
+
+var VALID_TT_INPUTS = 0;
+
+function validate_exchange_url(text_input)
+{
+  var submit_button = xpath_get("//button[@value='submit']",
+                                document);
+
+  if (text_input.value.match
+    (/^https:\/\/[a-zA-Z]+\.[a-zA-Z]+\//))
+  {
+    console.log("Good value", text_input.value);
+    VALID_TT_INPUTS |= 2;
+  }
+  else
+  {
+    console.log("Bad value", text_input.value);
+    VALID_TT_INPUTS &= ~2;
+  }
+
+  if (2 == VALID_TT_INPUTS)
+    submit_button.disabled = false;
+  else submit_button.disabled = true;
+}
+
+function validate_wtid(text_input)
+{
+  var submit_button = xpath_get("//button[@value='submit']",
+                                document);
+
+  if (text_input.value.match(/^[A-Za-z0-9]+$/))
+  {
+    console.log("Good value", text_input.value);
+    VALID_TT_INPUTS |= 1;
+  }
+  else
+  {
+    console.log("Bad value", text_input.value);
+    VALID_TT_INPUTS &= ~1;
+  }
+
+  if (2 == VALID_TT_INPUTS)
+    submit_button.disabled = false;
+  else submit_button.disabled = true;
+}
+
+function validate_order_id(text_input)
+{
+  var submit_button = xpath_get("//button[@value='submit']",
+                                document);
+
+  if (text_input.value.match(/^[A-Za-z0-9]+$/))
+  {
+    console.log("Good value", text_input.value);
+    submit_button.disabled = false;
+  }
+  else
+  {
+    console.log("Bad value", text_input.value);
+    submit_button.disabled = true;
+  }
+}
diff --git a/talerbackoffice/backoffice/static/backoffice.css b/talerbackoffice/backoffice/static/backoffice.css
index dea999e..3ec6ef0 100644
--- a/talerbackoffice/backoffice/static/backoffice.css
+++ b/talerbackoffice/backoffice/static/backoffice.css
@@ -1,4 +1,4 @@
-#instances {
+#instance {
   border: 1px solid #ccc;
   background: transparent;
 }
diff --git a/talerbackoffice/backoffice/templates/backoffice.html b/talerbackoffice/backoffice/templates/backoffice.html
index 3ca3bbf..144a060 100644
--- a/talerbackoffice/backoffice/templates/backoffice.html
+++ b/talerbackoffice/backoffice/templates/backoffice.html
@@ -12,7 +12,7 @@
   <br />
   <div>
     <span style="margin-right: 10px;">Current instance:</span>
-    <select id="instances" onchange="change_instance();">
+    <select id="instance" onchange="change_instance();">
       {% for instance in instances %}
         <option value="{{ instance }}">{{ instance }}</option>  
       {% endfor %}
@@ -33,17 +33,20 @@
              onclick="cherry_pick_form_transfer(this.parentNode)">Track wire transfer</input><br>
       <input type="text"
              placeholder="Order ID"
+             onkeyup="validate_order_id(this);"
              class="order"></input><br>
       <input type="text"
              placeholder="WTID"
+             onkeyup="validate_wtid(this);"
              class="transfer"
              style="display: none;"></input><br>
       <input type="text"
              placeholder="Exchange URI"
+             onkeyup="validate_exchange_url(this);"
              class="transfer"
              style="display: none;"></input><br>
     </div>
-    <div id="submit">
+    <div>
       <form action="">
         <input type="button"
                value="submit"