GUAC-1406: Add user filtering on settings tab.

guacamole/src/main/webapp/app/settings/directives/guacSettingsUsers.js

@@ -95,6 +95,15 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
              */
             $scope.permissions = null;
 
+            /**
+             * Array of all user properties that are filterable.
+             *
+             * @type String[]
+             */
+            $scope.filteredUserProperties = [
+                'user.username'
+            ];
+
             /**
              * Returns whether critical data has completed being loaded.
              *
@@ -118,7 +127,7 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
              *     default when creating a new user, or null if user creation
              *     is not allowed.
              */
-            var getDefaultDataSource = function getDefaultDataSource() {
+            $scope.getDefaultDataSource = function getDefaultDataSource() {
 
                 // Abort if permissions have not yet loaded
                 if (!$scope.permissions)
@@ -151,7 +160,7 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
              *     least one data source, false otherwise.
              */
             $scope.canCreateUsers = function canCreateUsers() {
-                return getDefaultDataSource() !== null;
+                return $scope.getDefaultDataSource() !== null;
             };
 
             /**
@@ -238,7 +247,7 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
                             if (!PermissionSet.hasSystemPermission(permissions[dataSource], PermissionSet.ObjectPermissionType.ADMINISTER)
                              && !PermissionSet.hasUserPermission(permissions[dataSource], PermissionSet.ObjectPermissionType.UPDATE, user.username)
                              && !PermissionSet.hasUserPermission(permissions[dataSource], PermissionSet.ObjectPermissionType.DELETE, user.username))
-                                dataSource = getDefaultDataSource();
+                                dataSource = $scope.getDefaultDataSource();
 
                             // Add user to overall list
                             addedUsers[user.username] = user;
@@ -253,16 +262,6 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
                 });
 
             });
-
-            /**
-             * Navigates to an interface for creating a new user having the
-             * username specified.
-             */
-            $scope.newUser = function newUser() {
-                var username = $scope.newUsername.trim();
-                if (username)
-                    $location.url('/manage/' + encodeURIComponent(getDefaultDataSource()) + '/users/' + encodeURIComponent(username));
-            };
             
         }]
     };

guacamole/src/main/webapp/app/settings/styles/buttons.css

@@ -20,7 +20,7 @@
  * THE SOFTWARE.
  */
 
-button.add-user,
+a.button.add-user,
 a.button.add-connection,
 a.button.add-connection-group {
     font-size: 0.8em;
@@ -28,7 +28,7 @@ a.button.add-connection-group {
     position: relative;
 }
 
-button.add-user::before,
+a.button.add-user::before,
 a.button.add-connection::before,
 a.button.add-connection-group::before {
 
@@ -45,7 +45,7 @@ a.button.add-connection-group::before {
 
 }
 
-button.add-user::before {
+a.button.add-user::before {
     background-image: url('images/action-icons/guac-user-add.png');
 }
 

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

@@ -34,3 +34,45 @@
     text-align: center;
     margin: 1em 0;
 }
+
+.settings .toolbar {
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+    -ms-flex-direction: row;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: center;
+    -moz-box-orient: horizontal;
+
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: center;
+    -webkit-box-orient: horizontal;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: row;
+
+    /* W3C */
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+}
+
+.settings .toolbar .action-buttons {
+    margin-right: 0.25em;
+}
+
+.settings .toolbar .filter {
+    -ms-flex: 1 1 auto;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+

guacamole/src/main/webapp/app/settings/templates/settingsUsers.html

@@ -24,10 +24,21 @@
     <!-- User management -->
     <p>{{'SETTINGS_USERS.HELP_USERS' | translate}}</p>
 
-    <!-- Form action buttons -->
-    <div class="action-buttons" ng-show="canCreateUsers()">
-        <input type="text" ng-model="newUsername" class="name username" autocorrect="off" autocapitalize="off"/>
-        <button class="add-user" ng-click="newUser()">{{'SETTINGS_USERS.ACTION_NEW_USER' | translate}}</button>
+
+    <!-- User management toolbar -->
+    <div class="toolbar">
+
+        <!-- Form action buttons -->
+        <div class="action-buttons">
+            <a class="add-user button" ng-show="canCreateUsers()"
+               href="#/manage/{{getDefaultDataSource()}}/users/">{{'SETTINGS_USERS.ACTION_NEW_USER' | translate}}</a>
+        </div>
+
+        <!-- User filter -->
+        <guac-filter filtered-items="filteredManageableUsers" items="manageableUsers"
+                     placeholder="'SETTINGS_USERS.FIELD_PLACEHOLDER_FILTER' | translate"
+                     properties="filteredUserProperties"></guac-filter>
+
     </div>
 
     <!-- List of users this user has access to -->
@@ -44,6 +55,6 @@
 
     <!-- Pager controls for user list -->
     <guac-pager page="manageableUserPage" page-size="25"
-                items="manageableUsers | orderBy : 'user.username'"></guac-pager>
+                items="filteredManageableUsers | orderBy : 'user.username'"></guac-pager>
 
 </div>