GUAC-801 Improved styling of password change dialog.

guacamole/src/main/webapp/app/home/controllers/homeController.js

@@ -199,6 +199,17 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
             return;
         }
         
+        // Verify that the new password is not blank
+        if (!$scope.newPassword) {
+            $scope.showStatus({
+                className  : 'error',
+                title      : 'HOME.DIALOG_HEADER_ERROR',
+                text       : 'HOME.ERROR_PASSWORD_BLANK',
+                actions    : [ ACKNOWLEDGE_ACTION ]
+            });
+            return;
+        }
+        
         // Save the user with the new password
         userService.updateUserPassword(currentUserID, $scope.oldPassword, $scope.newPassword)
         .success(function passwordUpdated() {

guacamole/src/main/webapp/app/home/styles/home.css

@@ -71,11 +71,34 @@ div.recent-connections div.connection {
 }
 
 .password-dialog {
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 0.125s, opacity 0.125s;
+    -moz-transition: visibility 0.125s, opacity 0.125s;
+    -ms-transition: visibility 0.125s, opacity 0.125s;
+    -o-transition: visibility 0.125s, opacity 0.125s;
+    transition: visibility 0.125s, opacity 0.125s;
     position: absolute;
     background: white;
+    padding: 1em;
     border: 1px solid rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
     margin: 1em;
-    width: 5in;
     right: 0;
+    top: 0;
     z-index: 1;
+}
+
+.password-dialog.shown {
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: opacity 0.125s;
+    -moz-transition: opacity 0.125s;
+    -ms-transition: opacity 0.125s;
+    -o-transition: opacity 0.125s;
+    transition: opacity 0.125s;
+}
+
+.password-dialog .fields {
+    width: 100%;
 }

guacamole/src/main/webapp/app/home/templates/home.html

@@ -26,10 +26,10 @@
 
         <div class="logout-panel">
             <a class="change-password button" ng-click="showPasswordUpdate()" ng-show="canChangePassword">{{'HOME.ACTION_CHANGE_PASSWORD' | translate}}</a>
-            <div class="password-dialog" ng-show="showPasswordDialog">
+            <div class="password-dialog" ng-class="{shown: showPasswordDialog}">
                 <!-- Password editor -->
                 <div class="section">
-                    <table class="properties">
+                    <table class="fields">
                         <tr>
                             <th>{{'HOME.FIELD_HEADER_PASSWORD_OLD' | translate}}</th>
                             <td><input ng-model="oldPassword" type="password" /></td>

guacamole/src/main/webapp/app/index/styles/status.css

@@ -28,7 +28,7 @@
     left: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 1;
+    z-index: 10;
 }
 
 .status-middle {

guacamole/src/main/webapp/translations/en_US.json

@@ -123,6 +123,7 @@
 
         "DIALOG_HEADER_ERROR"    : "@:APP.DIALOG_HEADER_ERROR",
 
+        "ERROR_PASSWORD_BLANK"    : "Your password cannot be blank.",
         "ERROR_PASSWORD_MISMATCH" : "@:APP.ERROR_PASSWORD_MISMATCH",
         
         "FIELD_HEADER_PASSWORD_OLD"       : "Current Password:",