Shake head on login failures.

guacamole/src/main/webapp/scripts/root-ui.js

@@ -466,6 +466,8 @@ GuacamoleRootUI.sections.login_form.onsubmit = function() {
 
     try {
 
+        GuacUI.removeClass(GuacamoleRootUI.views.login, "error");
+
         // Attempt login
         GuacamoleRootUI.login(
             GuacamoleRootUI.fields.username.value,
@@ -482,12 +484,17 @@ GuacamoleRootUI.sections.login_form.onsubmit = function() {
     }
     catch (e) {
 
-        // Display error, reset and refocus password field
-        GuacamoleRootUI.messages.login_error.textContent = e.message;
+        window.setTimeout(function() {
 
-        // Reset and recofus password field
-        GuacamoleRootUI.fields.password.value = "";
-        GuacamoleRootUI.fields.password.focus();
+            // Display error
+            GuacUI.addClass(GuacamoleRootUI.views.login, "error");
+            GuacamoleRootUI.messages.login_error.textContent = e.message;
+
+            // Reset and refocus password field
+            GuacamoleRootUI.fields.password.value = "";
+            GuacamoleRootUI.fields.password.focus();
+
+        }, 1);
 
     }
 

guacamole/src/main/webapp/styles/login.css

@@ -53,11 +53,53 @@ div#login-ui {
     display: table;
 }
 
+@keyframes shake-head {
+    0%   { margin-left:  0.5em; }
+    25%  { margin-left: -0.5em; }
+    50%  { margin-left:  0.5em; }
+    75%  { margin-left: -0.5em; }
+    100% { margin-left:  0.0em; }
+}
+
+@-webkit-keyframes shake-head {
+    0%   { margin-left:  0.5em; }
+    25%  { margin-left: -0.5em; }
+    50%  { margin-left:  0.5em; }
+    75%  { margin-left: -0.5em; }
+    100% { margin-left:  0.0em; }
+}
+
 p#login-error {
-    text-align: center;
-    background: #FDD;
-    color: red;
+    display: none;
+}
+
+.error p#login-error {
+    display: block;
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    padding: 1em;
     margin: 0.2em;
+
+    background: #FDD;
+    border: 1px solid #964040;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    -khtml-border-radius: 0.25em;
+    text-align: center;
+    color: #964040;
+}
+
+.error #login-form {
+    animation-name: shake-head;
+    animation-duration: 0.25s;
+    animation-timing-function: linear;
+    -webkit-animation-name: shake-head;
+    -webkit-animation-duration: 0.25s;
+    -webkit-animation-timing-function: linear;
 }
 
 div#login-logo {