From 39d8e5b1a43cd005468fcbbd547b22ee97ca0aec Mon Sep 17 00:00:00 2001
From: Hector Sanjuan <hsanjuan@opennebula.org>
Date: Tue, 28 Feb 2012 16:21:01 +0100
Subject: [PATCH] Feature #1147: Improve login in Sunstone

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 9279848a50126863cc7eb4d27f554291b9744cd9)
---
 src/sunstone/public/css/login.css | 13 ++++++++++---
 src/sunstone/public/js/login.js   | 17 +++++++++++++----
 src/sunstone/templates/login.html |  8 +++-----
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/sunstone/public/css/login.css b/src/sunstone/public/css/login.css
index 9c92aa9279..d275f49a57 100644
--- a/src/sunstone/public/css/login.css
+++ b/src/sunstone/public/css/login.css
@@ -134,10 +134,17 @@ div#login input#login_btn:hover {
 .error_message {
   display: none;
   position: relative;
+  width:400px;
+  margin-left: auto;
+  margin-right: auto;
   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/sunstone/public/js/login.js b/src/sunstone/public/js/login.js
index 953f46aa1f..6b460d35c0 100644
--- a/src/sunstone/public/js/login.js
+++ b/src/sunstone/public/js/login.js
@@ -24,14 +24,19 @@ 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(){
@@ -39,6 +44,9 @@ function authenticate(){
     var password = $("#password").val();
     var remember = $("#check_remember").is(":checked");
 
+    $("#error_box").fadeOut("slow");
+    $("#login_spinner").show();
+
     OpenNebula.Auth.login({ data: {username: username
                                     , password: password}
                             , remember: remember
@@ -61,4 +69,5 @@ $(document).ready(function(){
     };
 
     $("input#username.box").focus();
+    $("#login_spinner").hide();
 });
diff --git a/src/sunstone/templates/login.html b/src/sunstone/templates/login.html
index c942f3184f..1dc5352d14 100644
--- a/src/sunstone/templates/login.html
+++ b/src/sunstone/templates/login.html
@@ -3,6 +3,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>OpenNebula Sunstone 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>
@@ -25,11 +26,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">
@@ -43,6 +40,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>