From c93b05ca23862847f1897dad1e21dcb74516ff76 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Fri, 21 Jan 2022 08:36:28 -0800
Subject: [PATCH 1/4] GUACAMOLE-1509: Automatically generate CSS classes for
 forms and fields.

---
 .../frontend/src/app/form/directives/form.js  | 17 +++++++
 .../src/app/form/directives/formField.js      | 15 ++++++
 .../src/app/form/services/formService.js      | 47 +++++++++++++++++++
 .../frontend/src/app/form/templates/form.html |  3 +-
 .../src/app/form/templates/formField.html     |  3 +-
 5 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/guacamole/src/main/frontend/src/app/form/directives/form.js b/guacamole/src/main/frontend/src/app/form/directives/form.js
index 81f500fc9..8d35774c7 100644
--- a/guacamole/src/main/frontend/src/app/form/directives/form.js
+++ b/guacamole/src/main/frontend/src/app/form/directives/form.js
@@ -86,6 +86,7 @@ angular.module('form').directive('guacForm', [function form() {
         controller: ['$scope', '$injector', function formController($scope, $injector) {
 
             // Required services
+            var formService              = $injector.get('formService');
             var translationStringService = $injector.get('translationStringService');
 
             /**
@@ -134,6 +135,22 @@ angular.module('form').directive('guacForm', [function form() {
 
             };
 
+            /**
+             * Returns an object as would be provided to the ngClass directive
+             * that defines the CSS classes that should be applied to the given
+             * form.
+             *
+             * @param {Form} form
+             *     The form to generate the CSS classes for.
+             *
+             * @return {!Object.<string, boolean>}
+             *     The ngClass object defining the CSS classes for the given
+             *     form.
+             */
+            $scope.getFormClasses = function getFormClasses(form) {
+                return formService.getClasses('form-', form);
+            };
+
             /**
              * Determines whether the given object is a form, under the
              * assumption that the object is either a form or a field.
diff --git a/guacamole/src/main/frontend/src/app/form/directives/formField.js b/guacamole/src/main/frontend/src/app/form/directives/formField.js
index fbc0cfecf..4fcead1d6 100644
--- a/guacamole/src/main/frontend/src/app/form/directives/formField.js
+++ b/guacamole/src/main/frontend/src/app/form/directives/formField.js
@@ -155,6 +155,21 @@ angular.module('form').directive('guacFormField', [function formField() {
 
             };
 
+            /**
+             * Returns an object as would be provided to the ngClass directive
+             * that defines the CSS classes that should be applied to this
+             * field.
+             *
+             * @return {!Object.<string, boolean>}
+             *     The ngClass object defining the CSS classes for the current
+             *     field.
+             */
+            $scope.getFieldClasses = function getFieldClasses() {
+                return formService.getClasses('labeled-field-', $scope.field, {
+                    empty: !$scope.model
+                });
+            };
+
             /**
              * Returns whether the current field should be displayed.
              *
diff --git a/guacamole/src/main/frontend/src/app/form/services/formService.js b/guacamole/src/main/frontend/src/app/form/services/formService.js
index 0e9155c09..0bed36b84 100644
--- a/guacamole/src/main/frontend/src/app/form/services/formService.js
+++ b/guacamole/src/main/frontend/src/app/form/services/formService.js
@@ -272,6 +272,53 @@ angular.module('form').provider('formService', function formServiceProvider() {
 
         };
 
+        /**
+         * Given form content and an arbitrary prefix, returns a corresponding
+         * CSS class object as would be provided to the ngClass directive that
+         * assigns a content-specific CSS class based on the prefix and
+         * form/field name. Generated class names follow the lowercase with
+         * dashes naming convention. For example, if the prefix is "field-" and
+         * the provided content is a field with the name "Swap red/blue", the
+         * object { 'field-swap-red-blue' : true } would be returned.
+         *
+         * @param {!string} prefix
+         *     The arbitrary prefix to prepend to the name of the generated CSS
+         *     class.
+         *
+         * @param {!(Form|Field)} [content]
+         *     The form or field whose name should be used to produce the CSS
+         *     class name.
+         *
+         * @param {Object.<string, boolean>} [object={}]
+         *     The optional base ngClass object that should be used to provide
+         *     additional name/value pairs within the returned object.
+         *
+         * @return {!Object.<string, boolean>}
+         *     The ngClass object based on the provided object and defining a
+         *     CSS class name for the given content.
+         */
+        service.getClasses = function getClasses(prefix, content, object) {
+
+            // Default to no additional properties
+            object = object || {};
+
+            // Perform no transformation if there is no content or
+            // corresponding name
+            if (!content || !content.name)
+                return object;
+
+            // Transform content name and prefix into lowercase-with-dashes
+            // CSS class name
+            var className = prefix + content.name.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase();
+
+            // Add CSS class name to provided base object (without touching
+            // base object)
+            var classes = angular.extend({}, object);
+            classes[className] = true;
+            return classes;
+
+        };
+
         /**
          * Compiles and links the field associated with the given name to the given
          * scope, producing a distinct and independent DOM Element which functions
diff --git a/guacamole/src/main/frontend/src/app/form/templates/form.html b/guacamole/src/main/frontend/src/app/form/templates/form.html
index 6b19bcce2..397a210c5 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/form.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/form.html
@@ -1,9 +1,10 @@
 <div class="form-group">
     <div ng-repeat="form in forms" class="form"
+         ng-class="getFormClasses(form)"
          ng-show="containsVisible(form.fields)">
 
         <!-- Form name -->
-        <h3 ng-show="form.name">{{getSectionHeader(form) | translate}}</h3>
+        <h3 class="form-header" ng-show="form.name">{{getSectionHeader(form) | translate}}</h3>
 
         <!-- All fields in form -->
         <div class="fields">
diff --git a/guacamole/src/main/frontend/src/app/form/templates/formField.html b/guacamole/src/main/frontend/src/app/form/templates/formField.html
index 3e45d4cb6..8534515a2 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/formField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/formField.html
@@ -1,4 +1,5 @@
-<div class="labeled-field" ng-class="{empty: !model}" ng-show="isFieldVisible()">
+<div class="labeled-field" ng-show="isFieldVisible()"
+     ng-class="getFieldClasses()">
 
     <!-- Field header -->
     <div class="field-header">

From a688bc507c79967c676d75fd77a59fb2dda4ee7e Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Sun, 23 Jan 2022 12:18:32 -0800
Subject: [PATCH 2/4] GUACAMOLE-1509: Add name attribute to all applicable
 fields.

---
 .../src/main/resources/templates/authenticationCodeField.html | 1 +
 .../main/frontend/src/app/form/templates/checkboxField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/dateField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/emailField.html  | 1 +
 .../main/frontend/src/app/form/templates/languageField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/numberField.html | 1 +
 .../main/frontend/src/app/form/templates/passwordField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/selectField.html | 1 +
 .../src/app/form/templates/terminalColorSchemeField.html      | 4 +++-
 .../main/frontend/src/app/form/templates/textAreaField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/textField.html   | 1 +
 .../src/main/frontend/src/app/form/templates/timeField.html   | 1 +
 .../main/frontend/src/app/form/templates/timeZoneField.html   | 1 +
 13 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html b/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
index 30c07f434..7f2a3c485 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
+++ b/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
@@ -41,6 +41,7 @@
     <div class="totp-code">
         <input type="text"
                placeholder="{{'TOTP.FIELD_PLACEHOLDER_CODE' |translate}}"
+               ng-attr-name="{{ field.name }}"
                ng-model="model" autocorrect="off" autocapitalize="off" autofocus>
     </div>
 
diff --git a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
index 80666c018..f0881bd11 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
@@ -1,5 +1,6 @@
 <input type="checkbox"
        ng-attr-id="{{ fieldId }}"
+       ng-attr-name="{{ field.name }}"
        ng-disabled="disabled"
        ng-model="typedValue"
        guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/dateField.html b/guacamole/src/main/frontend/src/app/form/templates/dateField.html
index 9048dec36..93a231f35 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/dateField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/dateField.html
@@ -2,6 +2,7 @@
     <input type="date"
            ng-disabled="disabled"
            ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
            ng-model="typedValue"
            ng-model-options="modelOptions"
            guac-lenient-date
diff --git a/guacamole/src/main/frontend/src/app/form/templates/emailField.html b/guacamole/src/main/frontend/src/app/form/templates/emailField.html
index 677abba2f..c5170b796 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/emailField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/emailField.html
@@ -2,6 +2,7 @@
     <input type="email"
            ng-disabled="disabled"
            ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
            ng-model="model"
            ng-hide="readOnly"
            guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/languageField.html b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
index 2a22ff27d..8b74b5866 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/languageField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
@@ -1,4 +1,5 @@
 <select guac-focus="focused"
         ng-attr-id="{{ fieldId }}"
+        ng-attr-name="{{ field.name }}"
         ng-model="model"
         ng-options="language.key as language.value for language in languages | toArray | orderBy: key"></select>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/numberField.html b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
index b7666c680..2d270d689 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/numberField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
@@ -1,6 +1,7 @@
 <input type="number"
        ng-disabled="disabled"
        ng-attr-id="{{ fieldId }}"
+       ng-attr-name="{{ field.name }}"
        ng-model="typedValue"
        guac-focus="focused"
        autocorrect="off"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/passwordField.html b/guacamole/src/main/frontend/src/app/form/templates/passwordField.html
index 3e1b2e512..17cfc0a6c 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/passwordField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/passwordField.html
@@ -2,6 +2,7 @@
     <input type="{{passwordInputType}}"
            ng-disabled="disabled"
            ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
            ng-model="model"
            ng-trim="false"
            guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/selectField.html b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
index 2c672aa9f..939956bb4 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/selectField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
@@ -1,4 +1,5 @@
 <select ng-attr-id="{{ fieldId }}"
+        ng-attr-name="{{ field.name }}"
         ng-disabled="disabled"
         guac-focus="focused"
         ng-model="model"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/terminalColorSchemeField.html b/guacamole/src/main/frontend/src/app/form/templates/terminalColorSchemeField.html
index a8425e41e..027f4e751 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/terminalColorSchemeField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/terminalColorSchemeField.html
@@ -4,7 +4,9 @@
     }">
 
     <!-- Pre-defined color scheme options -->
-    <select ng-attr-id="{{ fieldId }}" ng-model="selectedColorScheme">
+    <select ng-attr-id="{{ fieldId }}"
+            ng-attr-name="{{ field.name }}"
+            ng-model="selectedColorScheme">
         <option ng-repeat="option in field.options | orderBy: value"
                 ng-value="option">{{ getFieldOption(option) | translate }}</option>
         <option value="custom">{{ 'COLOR_SCHEME.FIELD_OPTION_CUSTOM' | translate }}</option>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
index 9761af77e..74284c73c 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
@@ -1,4 +1,5 @@
 <textarea ng-attr-id="{{ fieldId }}"
+          ng-attr-name="{{ field.name }}"
           ng-model="model"
           ng-disabled="disabled"
           guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/textField.html b/guacamole/src/main/frontend/src/app/form/templates/textField.html
index 856ec8d0d..fac7b3818 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/textField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/textField.html
@@ -2,6 +2,7 @@
     <input type="text"
            ng-attr-id="{{ fieldId }}"
            ng-attr-list="{{ dataListId }}"
+           ng-attr-name="{{ field.name }}"
            ng-model="model"
            ng-disabled="disabled"
            guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/timeField.html b/guacamole/src/main/frontend/src/app/form/templates/timeField.html
index f7efeb3eb..0b33f5fb1 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/timeField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/timeField.html
@@ -2,6 +2,7 @@
     <input type="time"
            ng-disabled="disabled"
            ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
            ng-model="typedValue"
            ng-model-options="modelOptions"
            guac-focus="focused"
diff --git a/guacamole/src/main/frontend/src/app/form/templates/timeZoneField.html b/guacamole/src/main/frontend/src/app/form/templates/timeZoneField.html
index ecab57db9..690bf68a4 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/timeZoneField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/timeZoneField.html
@@ -10,6 +10,7 @@
 
     <!-- Time zones within selected region -->
     <select class="time-zone"
+            ng-attr-name="{{ field.name }}"
             ng-disabled="disabled || !region"
             ng-model="model"
             ng-options="timeZone.value as timeZone.key for timeZone in timeZones[region] | toArray | orderBy: key"></select>

From a7cf01064a9998144cb3d31e4c16b7b1fa549b15 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Fri, 21 Jan 2022 08:36:28 -0800
Subject: [PATCH 3/4] GUACAMOLE-1509: Add status-specific CSS classes to
 connection notifications.

---
 .../src/app/client/directives/guacClientNotification.js         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacClientNotification.js b/guacamole/src/main/frontend/src/app/client/directives/guacClientNotification.js
index fadeab4cb..e1a08ebc6 100644
--- a/guacamole/src/main/frontend/src/app/client/directives/guacClientNotification.js
+++ b/guacamole/src/main/frontend/src/app/client/directives/guacClientNotification.js
@@ -243,6 +243,7 @@ angular.module('client').directive('guacClientNotification', [function guacClien
             if (connectionState === ManagedClientState.ConnectionState.CONNECTING
              || connectionState === ManagedClientState.ConnectionState.WAITING) {
                 $scope.status = {
+                    className : "connecting",
                     title: "CLIENT.DIALOG_HEADER_CONNECTING",
                     text: {
                         key : "CLIENT.TEXT_CLIENT_STATUS_" + connectionState.toUpperCase()
@@ -360,6 +361,7 @@ angular.module('client').directive('guacClientNotification', [function guacClien
 
             // Prompt for parameters
             $scope.status = {
+                className : "parameters-required",
                 formNamespace : Protocol.getNamespace($scope.client.protocol),
                 forms : $scope.client.forms,
                 formModel : requiredParameters,

From d1bbfd18abf58bdff2d31372b23c658635248e60 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Fri, 21 Jan 2022 08:38:50 -0800
Subject: [PATCH 4/4] GUACAMOLE-1509: Add contextual CSS classes to
 containers/elements that are otherwise ambiguous.

---
 .../src/app/client/templates/connection.html   |  2 +-
 .../app/client/templates/connectionGroup.html  |  2 +-
 .../src/app/client/templates/file.html         |  2 +-
 .../src/app/client/templates/guacClient.html   |  4 ++--
 .../src/app/form/services/formService.js       |  2 +-
 .../src/app/form/templates/checkboxField.html  | 18 ++++++++++--------
 .../src/app/form/templates/languageField.html  | 12 +++++++-----
 .../src/app/form/templates/numberField.html    | 18 ++++++++++--------
 .../src/app/form/templates/selectField.html    | 14 ++++++++------
 .../src/app/form/templates/textAreaField.html  | 16 +++++++++-------
 .../src/app/form/templates/usernameField.html  | 10 ++++++++++
 .../home/templates/guacRecentConnections.html  |  2 +-
 .../frontend/src/app/home/templates/home.html  |  9 +++------
 .../templates/connectionGroupPermission.html   |  2 +-
 .../manage/templates/connectionPermission.html |  2 +-
 .../locationChooserConnectionGroup.html        |  4 ++--
 .../app/manage/templates/manageConnection.html |  2 +-
 .../templates/manageConnectionGroup.html       |  2 +-
 .../manage/templates/manageSharingProfile.html |  2 +-
 .../manage/templates/managementButtons.html    |  8 ++++----
 .../templates/sharingProfilePermission.html    |  2 +-
 .../src/app/settings/templates/connection.html |  3 ++-
 .../settings/templates/connectionGroup.html    |  3 ++-
 .../app/settings/templates/newConnection.html  |  3 ++-
 .../settings/templates/newConnectionGroup.html |  3 ++-
 .../settings/templates/newSharingProfile.html  |  3 ++-
 .../src/app/settings/templates/settings.html   |  3 +--
 .../app/settings/templates/sharingProfile.html |  3 ++-
 28 files changed, 89 insertions(+), 67 deletions(-)
 create mode 100644 guacamole/src/main/frontend/src/app/form/templates/usernameField.html

diff --git a/guacamole/src/main/frontend/src/app/client/templates/connection.html b/guacamole/src/main/frontend/src/app/client/templates/connection.html
index 305a5889a..ae5ef91f1 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/connection.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/connection.html
@@ -1,4 +1,4 @@
-<div class="connection">
+<div class="connection-select-menu-connection connection">
     <input type="checkbox"
            ng-model="context.attachedClients[item.getClientIdentifier()]"
            ng-change="context.updateAttachedClients(item.getClientIdentifier())">
diff --git a/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html b/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
index 48c707f45..2e7d794cd 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
@@ -1,4 +1,4 @@
-<div class="connection-group">
+<div class="connection-select-menu-connection-group connection-group">
     <input type="checkbox"
            ng-show="item.balancing"
            ng-model="context.attachedClients[item.getClientIdentifier()]"
diff --git a/guacamole/src/main/frontend/src/app/client/templates/file.html b/guacamole/src/main/frontend/src/app/client/templates/file.html
index 83b6b2aa8..843047041 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/file.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/file.html
@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="file-browser-file list-item">
 
     <!-- Filename and icon -->
     <div class="caption">
diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
index 57b859c55..46a78d661 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
@@ -1,4 +1,4 @@
-<div class="main"
+<div class="client-main main"
      ng-class="{ 'drop-pending': dropPending }"
      guac-resize="mainElementResized"
      guac-touch-drag="clientDrag"
@@ -14,4 +14,4 @@
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/services/formService.js b/guacamole/src/main/frontend/src/app/form/services/formService.js
index 0bed36b84..d2ac6be73 100644
--- a/guacamole/src/main/frontend/src/app/form/services/formService.js
+++ b/guacamole/src/main/frontend/src/app/form/services/formService.js
@@ -91,7 +91,7 @@ angular.module('form').provider('formService', function formServiceProvider() {
          * @type FieldType
          */
         'USERNAME' : {
-            templateUrl : 'app/form/templates/textField.html'
+            templateUrl : 'app/form/templates/usernameField.html'
         },
 
         /**
diff --git a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
index f0881bd11..39d1f6b7d 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
@@ -1,8 +1,10 @@
-<input type="checkbox"
-       ng-attr-id="{{ fieldId }}"
-       ng-attr-name="{{ field.name }}"
-       ng-disabled="disabled"
-       ng-model="typedValue"
-       guac-focus="focused"
-       autocorrect="off"
-       autocapitalize="off">
+<div class="checkbox-field">
+    <input type="checkbox"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-disabled="disabled"
+           ng-model="typedValue"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/languageField.html b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
index 8b74b5866..a19d21cd0 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/languageField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
@@ -1,5 +1,7 @@
-<select guac-focus="focused"
-        ng-attr-id="{{ fieldId }}"
-        ng-attr-name="{{ field.name }}"
-        ng-model="model"
-        ng-options="language.key as language.value for language in languages | toArray | orderBy: key"></select>
+<div class="language-field">
+    <select guac-focus="focused"
+            ng-attr-id="{{ fieldId }}"
+            ng-attr-name="{{ field.name }}"
+            ng-model="model"
+            ng-options="language.key as language.value for language in languages | toArray | orderBy: key"></select>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/numberField.html b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
index 2d270d689..1bf58a175 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/numberField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
@@ -1,8 +1,10 @@
-<input type="number"
-       ng-disabled="disabled"
-       ng-attr-id="{{ fieldId }}"
-       ng-attr-name="{{ field.name }}"
-       ng-model="typedValue"
-       guac-focus="focused"
-       autocorrect="off"
-       autocapitalize="off">
+<div class="number-field">
+    <input type="number"
+           ng-disabled="disabled"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-model="typedValue"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/selectField.html b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
index 939956bb4..635527557 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/selectField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
@@ -1,6 +1,8 @@
-<select ng-attr-id="{{ fieldId }}"
-        ng-attr-name="{{ field.name }}"
-        ng-disabled="disabled"
-        guac-focus="focused"
-        ng-model="model"
-        ng-options="option as getFieldOption(option) | translate for option in field.options | orderBy: value"></select>
+<div class="select-field">
+    <select ng-attr-id="{{ fieldId }}"
+            ng-attr-name="{{ field.name }}"
+            ng-disabled="disabled"
+            guac-focus="focused"
+            ng-model="model"
+            ng-options="option as getFieldOption(option) | translate for option in field.options | orderBy: value"></select>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
index 74284c73c..4e63eb53e 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
@@ -1,7 +1,9 @@
-<textarea ng-attr-id="{{ fieldId }}"
-          ng-attr-name="{{ field.name }}"
-          ng-model="model"
-          ng-disabled="disabled"
-          guac-focus="focused"
-          autocorrect="off"
-          autocapitalize="off"></textarea>
+<div class="text-area-field">
+    <textarea ng-attr-id="{{ fieldId }}"
+              ng-attr-name="{{ field.name }}"
+              ng-model="model"
+              ng-disabled="disabled"
+              guac-focus="focused"
+              autocorrect="off"
+              autocapitalize="off"></textarea>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/usernameField.html b/guacamole/src/main/frontend/src/app/form/templates/usernameField.html
new file mode 100644
index 000000000..6a5c664d4
--- /dev/null
+++ b/guacamole/src/main/frontend/src/app/form/templates/usernameField.html
@@ -0,0 +1,10 @@
+<div class="username-field">
+    <input type="text"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-model="model"
+           ng-disabled="disabled"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html b/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
index 4654bd4d4..08362f66f 100644
--- a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
+++ b/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
@@ -1,4 +1,4 @@
-<div>
+<div class="recent-connections">
 
     <!-- Text displayed if no recent connections exist -->
     <p class="placeholder" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>
diff --git a/guacamole/src/main/frontend/src/app/home/templates/home.html b/guacamole/src/main/frontend/src/app/home/templates/home.html
index 4597dffe1..b2b3db5bd 100644
--- a/guacamole/src/main/frontend/src/app/home/templates/home.html
+++ b/guacamole/src/main/frontend/src/app/home/templates/home.html
@@ -1,5 +1,4 @@
-
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="home-view view" ng-class="{loading: !isLoaded()}">
 
     <div class="connection-list-ui">
 
@@ -8,9 +7,7 @@
             <h2>{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
             <guac-user-menu></guac-user-menu>
         </div>
-        <div class="recent-connections">
-            <guac-recent-connections root-groups="rootConnectionGroups"></guac-recent-connections>
-        </div>
+        <guac-recent-connections root-groups="rootConnectionGroups"></guac-recent-connections>
 
         <!-- All connections for this user -->
         <div class="header">
@@ -33,4 +30,4 @@
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html b/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
index 8ac52641e..2bc90cce9 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="connection-group-permission choice">
 
     <!-- Connection group icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html b/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
index 3a0dddaea..e94f9114e 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="connection-permission choice">
 
     <!-- Connection icon -->
     <div class="icon type" ng-class="item.protocol"></div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html b/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
index b4371506e..e49b4c0b9 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
@@ -1,4 +1,4 @@
-<span class="name" ng-click="context.chooseGroup(item.wrappedItem)">
-
+<span class="location-chooser-connection-group name"
+      ng-click="context.chooseGroup(item.wrappedItem)">
     {{item.name}}
 </span>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html b/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
index 8f37b98d4..7be5d75de 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
@@ -1,5 +1,5 @@
 
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-connection view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html b/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
index 1ed7e9c16..712183dc6 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
@@ -1,5 +1,5 @@
 
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-connection-group view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html b/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
index f7e9d114e..6458075c0 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
@@ -1,4 +1,4 @@
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-sharing-profile view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html b/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
index d43209a45..68e4108cc 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
@@ -1,6 +1,6 @@
 <div class="action-buttons">
-    <button ng-show="permissions.canSaveObject" ng-click="saveObject()">{{namespace + '.ACTION_SAVE' | translate}}</button>
-    <button ng-show="permissions.canCloneObject" ng-click="cloneObject()">{{namespace + '.ACTION_CLONE' | translate}}</button>
-    <button ng-click="cancel()">{{namespace + '.ACTION_CANCEL' | translate}}</button>
-    <button ng-show="permissions.canDeleteObject" ng-click="deleteObject()" class="danger">{{namespace + '.ACTION_DELETE' | translate}}</button>
+    <button ng-show="permissions.canSaveObject" ng-click="saveObject()" class="save">{{namespace + '.ACTION_SAVE' | translate}}</button>
+    <button ng-show="permissions.canCloneObject" ng-click="cloneObject()" class="clone">{{namespace + '.ACTION_CLONE' | translate}}</button>
+    <button ng-click="cancel()" class="cancel">{{namespace + '.ACTION_CANCEL' | translate}}</button>
+    <button ng-show="permissions.canDeleteObject" ng-click="deleteObject()" class="danger delete">{{namespace + '.ACTION_DELETE' | translate}}</button>
 </div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html b/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
index 8d8311b76..0d1647255 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="sharing-profile-permission choice">
 
     <!-- Sharing profile icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/connection.html b/guacamole/src/main/frontend/src/app/settings/templates/connection.html
index 7db6835d6..ecf5e8eee 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/connection.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/connection.html
@@ -1,5 +1,6 @@
 <a ng-href="#/manage/{{item.dataSource}}/connections/{{item.identifier}}"
-   ng-class="{active: item.getActiveConnections()}">
+   ng-class="{active: item.getActiveConnections()}"
+   class="settings-connection">
 
     <!-- Connection icon -->
     <div class="icon type" ng-class="item.protocol"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html b/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
index ccf4592be..79e37925b 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
@@ -1,4 +1,5 @@
-<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/{{item.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/{{item.identifier}}"
+   class="settings-connection-group">
 
     <!-- Connection group icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html b/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
index e4debbe0d..d5d820138 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/connections/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connections/?parent={{item.wrappedItem.identifier}}"
+   class="new-connection">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_CONNECTION' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html b/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
index c1d6bba5f..bd9735c3d 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/?parent={{item.wrappedItem.identifier}}"
+   class="new-connection-group">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_CONNECTION_GROUP' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html b/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
index 12303e8e6..ef0f8ca52 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/?parent={{item.wrappedItem.identifier}}"
+   class="new-sharing-profile">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_SHARING_PROFILE' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/settings.html b/guacamole/src/main/frontend/src/app/settings/templates/settings.html
index 2bae3ae97..c0986ff45 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/settings.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/settings.html
@@ -1,5 +1,4 @@
-
-<div class="view">
+<div class="settings-view view">
 
     <div class="header tabbed">
         <h2>{{'SETTINGS.SECTION_HEADER_SETTINGS' | translate}}</h2>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html b/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
index bce7edc1f..6c8ae4de4 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
@@ -1,4 +1,5 @@
-<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/{{item.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/{{item.identifier}}"
+   class="settings-sharing-profile">
 
     <!-- Sharing profile icon -->
     <div class="icon type"></div>