From 4b5fe3433587777bbb0103411b8e0a45afdd68d8 Mon Sep 17 00:00:00 2001
From: Sachi King <nakato@nakato.io>
Date: Sat, 20 Jan 2018 20:56:40 +1100
Subject: [PATCH] Add regex validation [A-Z0-9]{6} for input

Don't block submition, but give the user a red bar.

Also a link to overview.

Esp if it is 5+ sec to load, we don't need it 90%+ the time, don't page
through it in the scan print workflow.
---
 .../templates/regidesk/ci_landing.html        | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html b/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
index c733ac5d..d5c4bff0 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
@@ -8,19 +8,44 @@
 
 {% block body %}
     <div>
-        <div class="form-group">
-            <label for="bpcode">Boarding Pass Code</label>
+        <div id="code_div" class="form-group has-feedback has-error">
+            <label class="control-label" for="bpcode">Boarding Pass Code</label>
             <input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code">
+            <span id="input_icon" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+            <span id="help_ok" class="help-block" style="display: none;">Format appears OK</span>
+            <span id="help_ur" class="help-block" style="display: block;">Format doesn't match</span>
         </div>
-        <button id="bpredir" class="btn btn-default">Submit</button>
-        <button id="clear" class="btn btn-default">Clear</button>
+        <button id="bpredir" class="btn btn-primary">Submit</button>
+        <button id="clear" class="btn btn-danger">Clear</button>
+        <a type=button" class="btn btn-info pull-right" href="{% url 'regidesk:boarding_overview' %}">Overview</a>
     </div>
     <script type="text/javascript">
+        var code_div = document.getElementById("code_div");
+        var icon = document.getElementById("input_icon");
+        var tb = document.getElementById("bptext");
+        var ok = document.getElementById("help_ok");
+        var unk = document.getElementById("help_ur");
+        var re = new RegExp('^[A-Z0-9]{6}$');
         document.getElementById("bpredir").onclick = function() {
-            location.href = document.getElementById("bptext").value;
+            location.href = tb.value;
         };
         document.getElementById("clear").onclick = function() {
-            document.getElementById("bptext").value = "";
+            tb.value = "";
+        };
+        tb.oninput = function() {
+            is_good = re.test(tb.value);
+            if (is_good) {
+                code_div.className = "form-group has-feedback has-success";
+                icon.className = "glyphicon glyphicon-ok form-control-feedback";
+                ok.style.display = "block";
+                unk.style.display = "none";
+            } else {
+                code_div.className = "form-group has-feedback has-error";
+                icon.className = "glyphicon glyphicon-remove form-control-feedback";
+                ok.style.display = "none";
+                unk.style.display = "block";
+            }
+            console.log(is_good);
         };
     </script>
 {% endblock %}