From: Jeremy Tan <jeremy@jx.tan.fake>
Date: Thu, 3 Oct 2013 13:04:01 +0000 (+0800)
Subject: Add js behind login form
X-Git-Url: https://git.ucc.asn.au/?a=commitdiff_plain;h=82a6b5b578988edff1288628a838dcd63bc07909;p=matches%2FMCTX3420.git

Add js behind login form
---

diff --git a/testing/MCTXWeb/public_html/login.html b/testing/MCTXWeb/public_html/login.html
index 9227988..493a4e3 100644
--- a/testing/MCTXWeb/public_html/login.html
+++ b/testing/MCTXWeb/public_html/login.html
@@ -15,7 +15,10 @@
     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
     <script type="text/javascript">
       $(document).ready(function () {
-        
+        $("#login").submit(function () {
+          $("#login").login();
+          return false;
+        });
       });
     </script>
   </head>
@@ -38,9 +41,9 @@
     </div>
     <!-- End header -->
     
-    <div id="login">
+    <div id="login-container">
      <div class="widget">
-         <form id="login2" action="#">
+         <form id="login" action="#">
            <p>
              <label>
                Username<br>
@@ -59,6 +62,9 @@
            <p style="float:right; margin:0;">
              <input type="submit" value="Log In">
            </p>
+           <p id="result">
+             &nbsp;
+           </p>
           </form>
      </div>
     </div>
diff --git a/testing/MCTXWeb/public_html/static/mctx.gui.js b/testing/MCTXWeb/public_html/static/mctx.gui.js
index 247484d..fc50ed5 100644
--- a/testing/MCTXWeb/public_html/static/mctx.gui.js
+++ b/testing/MCTXWeb/public_html/static/mctx.gui.js
@@ -3,9 +3,9 @@
  */
 
 mctx = {};
-mctx.api = location.protocol + "//" +  location.host + "/api/";
+mctx.location = location.protocol + "//" + location.host;
+mctx.api = mctx.location + "/api/";
 mctx.expected_api_version = 0;
-mctx.key = undefined;
 mctx.has_control = false;
 
 mctx.return_codes = {
@@ -154,30 +154,27 @@ $.fn.setStrainGraphs = function () {
 $.fn.login = function () {
   var username = this.find("input[name='username']").val();
   var password = this.find("input[name='pass']").val();
-  var force = this.find("input[name='force']").is(":checked");
-  var url = mctx.api + "control";
-  
-  var authFunc = function(xhr) {
-    xhr.setRequestHeader("Authorization",
-        "Basic " + base64.encode(username + ":" + password));
+  var out = this.find("#result");
+  var redirect = function () {
+    window.location.href = mctx.location;
   };
-
+  
+  out.removeAttr("class");
+  out.text("Logging in...");
+  
   $.ajax({
-    url : url,
-    data : {action : "lock", force : (force ? true : undefined)},
-    beforeSend : authFunc
+    url : mctx.api + "bind",
+    data : {user: username, pass : password}
   }).done(function (data) {
-    mctx.key = data.key;
-    if (data.status < 0) {
-      alert("no - " + data.description);
-    } else {
-      mctx.has_control = true;
-      alert("yes - " + mctx.key);
-    }
+    //todo: error check
+    mctx.has_control = true;
+    out.attr("class", "pass");
+    out.text("Login ok!");
+    setTimeout(redirect, 1000);
   }).fail(function (jqXHR) {
-    mctx.key = undefined;
     mctx.has_control = false;
-    alert("no");
+    out.attr("class", "fail");
+    out.text("Login request failed - connection issues.")
   });
 };
 
diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css
index f12cfdf..d7e8355 100644
--- a/testing/MCTXWeb/public_html/static/style.css
+++ b/testing/MCTXWeb/public_html/static/style.css
@@ -37,6 +37,16 @@ a:active {
   color: #0066BB;
 }
 
+.pass {
+  color: #7AE309;
+  font-weight: bold;
+}
+
+.fail {
+  color: #E30909;
+  font-weight: bold
+}
+
 div.centre {
   text-align: center;
 }
@@ -233,7 +243,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 }
 
 /** For login.html **/
-#login {
+#login-container {
   margin: 0 auto;
   width: 400px;
   padding: 1.8em 0 0;
@@ -241,19 +251,23 @@ input[type="text"]:focus, input[type="password"]:focus {
   line-height: 1.8em;
 }
 
-#login form {
+#login-container form {
   padding: 1em 2em;
 }
 
-#login input {
+#login-container input {
   font-size: 24px;
 }
 
-#login label {
+#login-container label {
   font-size: 14px;
 }
 
-#login input[type=submit], #login input[type=submit] {
+#login-container input[type=submit] {
   font-size: inherit;
   padding: 0.4em 0.8em;
+}
+
+#login-container #result {
+  clear: both;
 }
\ No newline at end of file