Feature #1147: Improve login in SelfService

Error messages are better explained. More cases are handled (for example when server is not running).

Error box looks nicer and repops up when error happens again.

Ajax loader gif has been added next to login button and appears when login is being performed.
(cherry picked from commit 5710fda8021b31c97b5285547941a6dc03231c19)

src/cloud/occi/lib/ui/public/css/login.css

@@ -132,12 +132,19 @@ div#login input#login_btn:hover {
 }
 
 .error_message {
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
   display: none;
   position: relative;
   top: 80px;
-  font-family: Arial, Helvetica, sans-serif;
-  color:red;
-  font-size:1.6em;
+  font-size:1.0em;
+}
+
+#login_spinner {
+    left: 44px;
+    position: relative;
+    top: 2px;
 }
 
 #label_remember {

src/cloud/occi/lib/ui/public/js/login.js

@@ -24,14 +24,20 @@ function auth_error(req, error){
 
     switch (status){
     case 401:
-        $("#one_error").hide();
-        $("#auth_error").fadeIn("slow");
+        $("#error_box").text("Invalid username or password");
         break;
     case 500:
-        $("#auth_error").hide();
-        $("#one_error").fadeIn("slow");
+        $("#error_box").text("OpenNebula is not running or there was a server exception. Please check the server logs.");
         break;
+    case 0:
+        $("#error_box").text("No answer from server. Is it running?");
+        break;
+    default:
+        $("#error_box").text("Unexpected error. Status "+status+". Check the server logs.");
+
     };
+    $("#error_box").fadeIn("slow");
+    $("#login_spinner").hide();
 }
 
 function authenticate(){
@@ -40,6 +46,9 @@ function authenticate(){
     password = Crypto.SHA1(password);
     var remember = $("#check_remember").is(":checked");
 
+    $("#error_box").fadeOut("slow");
+    $("#login_spinner").show();
+
     var obj = { data: {username: username,
                        password: password},
                 remember: remember,
@@ -70,4 +79,5 @@ $(document).ready(function(){
     };
 
     $("input#username.box").focus();
+    $("#login_spinner").hide();
 });

src/cloud/occi/lib/ui/templates/login.html

@@ -3,7 +3,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>OpenNebula Self-Service Login</title>
     <link rel="stylesheet" type="text/css" href="css/login.css" />
-
+    <link rel="stylesheet" type="text/css" href="vendor/jQueryUI/jquery-ui-1.8.16.custom.css" />
     <!-- Vendor Libraries -->
     <script type="text/javascript" src="vendor/jQuery/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="vendor/crypto-js/2.3.0-crypto-sha1.js"></script>
@@ -28,11 +28,7 @@
       <div id="logo_selfservice">
       </div>
 
-      <div id="auth_error" class="error_message">
-          Invalid username or password
-      </div>
-      <div id="one_error" class="error_message">
-          OpenNebula is not running
+      <div id="error_box" class="error_message ui-state-error ui-corner-all">
       </div>
 
       <form id="login_form">
@@ -46,7 +42,7 @@
                 <input type="checkbox" id="check_remember" />
                 <label id="label_remember" for="check_remember">Remember me</label>
                 <input type="submit" id="login_btn" value="" />
-
+                <img src="images/ajax-loader.gif" alt="retrieving" id="login_spinner" />
             </div>
         </div>
       </form>