From d32de04fbf2ea3841bd3ae4565dbdf94740fe877 Mon Sep 17 00:00:00 2001
From: Hector Sanjuan <hsanjuan@opennebula.org>
Date: Tue, 28 Feb 2012 16:23:22 +0100
Subject: [PATCH] Feature #1147: Improve login in oZones

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 c1e8b55b1a19a92813a086d57ed6a0747e19c2c1)
---
 src/ozones/Server/public/css/login.css | 13 +++++++++---
 src/ozones/Server/public/js/login.js   | 28 +++++++++++++++++---------
 src/ozones/Server/templates/login.html |  9 +++------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/ozones/Server/public/css/login.css b/src/ozones/Server/public/css/login.css
index 1ea3b09872..217c8c12ca 100644
--- a/src/ozones/Server/public/css/login.css
+++ b/src/ozones/Server/public/css/login.css
@@ -133,12 +133,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 {
diff --git a/src/ozones/Server/public/js/login.js b/src/ozones/Server/public/js/login.js
index 70b26a3011..1ddc1ecd61 100644
--- a/src/ozones/Server/public/js/login.js
+++ b/src/ozones/Server/public/js/login.js
@@ -23,15 +23,21 @@ function auth_error(req, error){
     var status = error.error.http_status;
 
     switch (status){
-        case 401:
-            $("#one_error").hide();
-            $("#auth_error").fadeIn("slow");
-            break;
-        case 500:
-            $("#auth_error").hide();
-            $("#one_error").fadeIn("slow");
-            break;
-    }
+    case 401:
+        $("#error_box").text("Invalid username or password");
+        break;
+    case 500:
+        $("#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(){
@@ -39,6 +45,9 @@ function authenticate(){
     var password = $("#password").val();
     var remember = $("#check_remember").is(":checked");
 
+    $("#error_box").fadeOut("slow");
+    $("#login_spinner").show();
+
     oZones.Auth.login({ data: {username: username
                                     , password: password}
                             , remember: remember
@@ -61,4 +70,5 @@ $(document).ready(function(){
     };
 
     $("input#username.box").focus();
+    $("#login_spinner").hide();
 });
diff --git a/src/ozones/Server/templates/login.html b/src/ozones/Server/templates/login.html
index 6038b56e55..d1001aaaa4 100644
--- a/src/ozones/Server/templates/login.html
+++ b/src/ozones/Server/templates/login.html
@@ -3,7 +3,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>OpenNebula oZones 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>
     <!-- End Vendor Libraries -->
@@ -24,11 +24,7 @@
       <div id="logo_sunstone">
       </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">
@@ -42,6 +38,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>