Fix login error message

src/sunstone/public/css/app.css

@@ -3734,7 +3734,6 @@ ul.tabs-content.contained.vertical > li {
 div.alert-box {
   display: block;
   padding: 6px 7px 7px;
-  font-weight: bold;
   font-size: 14px;
   color: white;
   background-color: #2ba6cb;
@@ -3747,6 +3746,7 @@ div.alert-box {
   border-radius: 3px;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
   position: relative;
+  font-family: Arial, Helvetica, sans-serif;
 }
 /* line 29, ../../../../../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/zurb-foundation-3.2.5/scss/foundation/components/modules/_ui.scss */
 div.alert-box.success {
@@ -6655,40 +6655,41 @@ small {
 
 /* line 616, ../sass/app.scss */
 .button.dropdown.small::after {
-  border-color: #2f2f2f transparent transparent transparent;
+  border-color: #9f9f9f transparent transparent transparent;
+  border-width: 4px;
 }
 
-/* line 620, ../sass/app.scss */
+/* line 621, ../sass/app.scss */
 .footer-opennebula {
   font-size: 10px;
   color: #b6b6b6 !important;
 }
 
-/* line 625, ../sass/app.scss */
+/* line 626, ../sass/app.scss */
 a.footer.button {
   margin: 5px;
 }
 
-/* line 630, ../sass/app.scss */
+/* line 631, ../sass/app.scss */
 .user-login {
   float: right;
 }
 
-/* line 634, ../sass/app.scss */
+/* line 635, ../sass/app.scss */
 .user-login i.header-icon {
   color: #6f6f6f;
   font-weight: 300;
   font-size: 23px;
 }
 
-/* line 640, ../sass/app.scss */
+/* line 641, ../sass/app.scss */
 .user-login .button {
   color: #6f6f6f;
   font-size: 60%;
   line-height: 0;
 }
 
-/* line 646, ../sass/app.scss */
+/* line 647, ../sass/app.scss */
 .user-login .button.secondary {
   background: #f2f2f2;
   border: 0px;
@@ -6696,88 +6697,88 @@ a.footer.button {
   font-weight: 300;
 }
 
-/* line 654, ../sass/app.scss */
+/* line 655, ../sass/app.scss */
 .user-login .button.secondary:hover, .user-login .button.secondary:focus {
   background-color: #d0d0d0;
   color: #6f6f6f;
 }
 
-/* line 659, ../sass/app.scss */
+/* line 660, ../sass/app.scss */
 .user-login .button.dropdown.tiny::after {
   border: solid 5px;
   border-color: #b6b6b6 transparent transparent transparent;
   right: 7px;
 }
 
-/* line 665, ../sass/app.scss */
+/* line 666, ../sass/app.scss */
 .header-resource {
   text-align: center;
 }
 
-/* line 669, ../sass/app.scss */
+/* line 670, ../sass/app.scss */
 .header-resource {
   float: left;
 }
 
-/* line 673, ../sass/app.scss */
+/* line 674, ../sass/app.scss */
 .header {
   text-align: center;
 }
 
-/* line 677, ../sass/app.scss */
+/* line 678, ../sass/app.scss */
 .button.dropdown.tiny ul.no-hover.show-dropdown {
   top: 34px !important;
 }
 
-/* line 681, ../sass/app.scss */
+/* line 682, ../sass/app.scss */
 .graph_legend {
   text-align: center;
 }
 
-/* line 685, ../sass/app.scss */
+/* line 686, ../sass/app.scss */
 .graph_legend table {
   background: inherit;
   border: 0px;
   width: 100%;
 }
 
-/* line 691, ../sass/app.scss */
+/* line 692, ../sass/app.scss */
 .graph_legend h3 {
   margin-top: 0px;
 }
 
-/* line 695, ../sass/app.scss */
+/* line 696, ../sass/app.scss */
 .graph_legend .subheader {
   margin-bottom: 5px;
 }
 
-/* line 699, ../sass/app.scss */
+/* line 700, ../sass/app.scss */
 .dashboard hr {
   margin: 0;
   margin-bottom: 8px;
 }
 
-/* line 704, ../sass/app.scss */
+/* line 705, ../sass/app.scss */
 .graph {
   margin-bottom: 15px !important;
 }
 
-/* line 708, ../sass/app.scss */
+/* line 709, ../sass/app.scss */
 .dashboard-panel {
   height: 450px;
 }
 
-/* line 712, ../sass/app.scss */
+/* line 713, ../sass/app.scss */
 .vm_log_error {
   color: #ff8d81;
 }
 
-/* line 716, ../sass/app.scss */
+/* line 717, ../sass/app.scss */
 .noUiSlider {
   margin: 10px;
 }
 
-/* line 720, ../sass/app.scss */
+/* line 721, ../sass/app.scss */
 .log-tab {
   background: #6f6f6f;
   color: #f2f2f2;
@@ -6785,12 +6786,12 @@ a.footer.button {
   padding: 20px;
 }
 
-/* line 727, ../sass/app.scss */
+/* line 728, ../sass/app.scss */
 .reveal-modal ul.tabs-content {
   margin: 0 0 0px;
 }
 
-/* line 731, ../sass/app.scss */
+/* line 732, ../sass/app.scss */
 .reveal-body {
   max-height: 360px;
   overflow-y: auto;
@@ -6798,7 +6799,7 @@ a.footer.button {
   padding: 5px;
 }
 
-/* line 741, ../sass/app.scss */
+/* line 742, ../sass/app.scss */
 div.time-picker {
   position: absolute;
   height: 191px;
@@ -6811,20 +6812,20 @@ div.time-picker {
   margin: 0;
 }
 
-/* line 751, ../sass/app.scss */
+/* line 752, ../sass/app.scss */
 div.time-picker-12hours {
   width: 6em;
   /* needed for IE */
 }
 
-/* line 755, ../sass/app.scss */
+/* line 756, ../sass/app.scss */
 div.time-picker ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-/* line 760, ../sass/app.scss */
+/* line 761, ../sass/app.scss */
 div.time-picker li {
   cursor: pointer;
   height: 20px;
@@ -6832,36 +6833,36 @@ div.time-picker li {
   padding: 4px 3px;
 }
 
-/* line 766, ../sass/app.scss */
+/* line 767, ../sass/app.scss */
 div.time-picker li.selected {
   background: #0063CE;
   color: #fff;
 }
 
-/* line 772, ../sass/app.scss */
+/* line 773, ../sass/app.scss */
 .timepicker {
   float: left;
   width: 50px !important;
 }
 
-/* line 777, ../sass/app.scss */
+/* line 778, ../sass/app.scss */
 .jdpicker {
   float: left;
   width: 90px !important;
 }
 
-/* line 782, ../sass/app.scss */
+/* line 783, ../sass/app.scss */
 .columns {
   line-height: 2;
 }
 
-/* line 786, ../sass/app.scss */
+/* line 787, ../sass/app.scss */
 .transparent_table, .transparent_table tr {
   background: none !important;
   border: 0px !important;
 }
 
-/* line 791, ../sass/app.scss */
+/* line 792, ../sass/app.scss */
 form {
   margin: 0 !important;
 }

src/sunstone/public/css/login.css

@@ -150,16 +150,6 @@ div#login input#login_btn:hover {
   background:  url(../images/login_over.png) no-repeat center ;
 }
 
-.error_message {
-  display: none;
-  position: relative;
-  width:400px;
-  margin-left: auto;
-  margin-right: auto;
-  top: 80px;
-  font-size:1.0em;
-  padding: 2px 15px;
-}
 
 #login_spinner {
     left: 22px;
@@ -187,3 +177,45 @@ div#login input#login_btn:hover {
   margin-top: 35px;
   margin-left:0px;
 }
+
+div.alert-box {
+  display: block;
+  padding: 6px 7px 7px;
+  font-size: 14px;
+  color: white;
+  background-color: #2ba6cb;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 12px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+div.alert-box.alert {
+  background-color: #c0392b;
+  color: #fff;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
+}
+
+div.alert-box a.close {
+  color: #333;
+  position: absolute;
+  right: 4px;
+  top: -1px;
+  font-size: 17px;
+  opacity: 0.2;
+  padding: 4px;
+}
+/* line 34, ../../../../../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/zurb-foundation-3.2.5/scss/foundation/components/modules/_ui.scss */
+div.alert-box a.close:hover, div.alert-box a.close:focus {
+  opacity: 0.4;
+}
+
+#error_box {
+  margin-top:70px;
+}

src/sunstone/public/js/login.js

@@ -24,16 +24,16 @@ function auth_error(req, error){
 
     switch (status){
     case 401:
-        $("#error_box").text("Invalid username or password");
+        $("#error_message").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.");
+        $("#error_message").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?");
+        $("#error_message").text("No answer from server. Is it running?");
         break;
     default:
-        $("#error_box").text("Unexpected error. Status "+status+". Check the server logs.");
+        $("#error_message").text("Unexpected error. Status "+status+". Check the server logs.");
     };
     $("#error_box").fadeIn("slow");
     $("#login_spinner").hide();

src/sunstone/public/sass/app.scss

@@ -614,7 +614,8 @@ small {
 
 
 .button.dropdown.small::after {
-    border-color: #2f2f2f transparent transparent transparent;
+    border-color: #9f9f9f transparent transparent transparent;
+    border-width: 4px;
 }
 
 .footer-opennebula {

src/sunstone/views/_login_standard.erb

@@ -2,8 +2,7 @@
       <div id="logo_sunstone">
       </div>
 
-      <div id="error_box" class="error_message ui-state-error ui-corner-all">
-      </div>
+      
 
       <form id="login_form">
         <div class="border" id="login">
@@ -17,8 +16,10 @@
                 <label id="label_remember" for="check_remember">Keep me logged in</label>
                 <input type="submit" id="login_btn" value="" />
                 <img src="images/ajax-loader.gif" alt="retrieving" id="login_spinner" />
-
             </div>
+        <div id="error_box" class="hidden alert-box alert" style="display: none">
+          <span id="error_message"></span>
+        </div>
         </div>
       </form>
 </div>

src/sunstone/views/_login_x509.erb

@@ -2,13 +2,6 @@
       <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>
-
       <form id="login_form">
         <div class="border" id="login" style='height:169px;background:url("../images/panel_short.png") no-repeat scroll center transparent'>
             <div class="content">
@@ -17,6 +10,10 @@
                 <label id="label_remember" for="check_remember">Keep me logged in</label>
 
             </div>
+        <div id="error_box" class="hidden alert-box alert" style="display: none">
+          <span id="auth_error"></span>
+          <span id="one_error"></span>
+        </div>
         </div>
       </form>
 </div>