GUACAMOLE-422: Use the same display mechanism and structure (the guacForm directive) for all locale preferences, not just the time zone.

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

@@ -39,7 +39,6 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
             var $translate            = $injector.get('$translate');
             var authenticationService = $injector.get('authenticationService');
             var guacNotification      = $injector.get('guacNotification');
-            var languageService       = $injector.get('languageService');
             var permissionService     = $injector.get('permissionService');
             var preferenceService     = $injector.get('preferenceService');
             var requestService        = $injector.get('requestService');
@@ -78,21 +77,23 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
              * @type Object.<String, Object>
              */
             $scope.preferences = preferenceService.preferences;
-            
+
             /**
-             * A map of all available language keys to their human-readable
+             * The fields which should be displayed for choosing locale
-             * names.
+             * preferences. Each field name must be a property on
-             * 
+             * $scope.preferences.
-             * @type Object.<String, String>
+             *
+             * @type Field[]
              */
-            $scope.languages = null;
+            $scope.localeFields = [
-            
+                { 'type' : 'LANGUAGE', 'name' : 'language' },
-            /**
+                { 'type' : 'TIMEZONE', 'name' : 'timezone' }
-             * Switches the active display langugae to the chosen language.
+            ];
-             */
+
-            $scope.changeLanguage = function changeLanguage() {
+            // Automatically update applied translation when language preference is changed
-                $translate.use($scope.preferences.language);
+            $scope.$watch('preferences.language', function changeLanguage(language) {
-            };
+                $translate.use(language);
+            });
 
             /**
              * The new password for the user.
@@ -169,17 +170,6 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
                 
             };
 
-            // Retrieve defined languages
-            languageService.getLanguages()
-            .then(function languagesRetrieved(languages) {
-                $scope.languages = Object.keys(languages).map(function(key) {
-                    return {
-                        key: key,
-                        value: languages[key]
-                    };
-                });
-            }, requestService.DIE);
-
             // Retrieve current permissions
             permissionService.getEffectivePermissions(dataSource, username)
             .then(function permissionsRetrieved(permissions) {

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

@@ -17,8 +17,23 @@
  * under the License.
  */
 
-.preferences .update-password .form, 
+.preferences .form .fields {
-.preferences .locale .form {
+    display: table;
     padding-left: 0.5em;
-    border-left: 3px solid rgba(0, 0, 0, 0.125);
+    border-left: 3px solid rgba(0,0,0,0.125);
-}
+}
+
+.preferences .form .fields .labeled-field {
+    display: table-row;
+}
+
+.preferences .form .fields .field-header,
+.preferences .form .fields .form-field {
+    display: table-cell;
+    padding: 0.125em;
+    vertical-align: top;
+}
+
+.preferences .form .fields .field-header {
+    padding-right: 1em;
+}

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

@@ -3,25 +3,7 @@
     <!-- Locale settings -->
     <div class="settings section locale">
         <p>{{'SETTINGS_PREFERENCES.HELP_LOCALE' | translate}}</p>
-
+        <guac-form content="localeFields" model="preferences" namespace="'SETTINGS_PREFERENCES'"></guac-form>
-        <!-- Language selection -->
-        <div class="form">
-            <table class="fields">
-                <tr>
-                    <th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_LANGUAGE' | translate}}</th>
-                    <td><select ng-model="preferences.language" ng-change="changeLanguage()" ng-options="language.key as language.value for language in languages | orderBy: key"></select></td>
-                </tr>
-            </table>
-        </div>
-        
-        <!-- Timezone selection -->
-        <div class="form">
-            <guac-form-field
-                field="{ 'type' : 'TIMEZONE', 'name' : 'timezone' }"
-                model="preferences.timezone"
-                namespace="'SETTINGS_PREFERENCES'">
-            </guac-form-field>
-        </div>
     </div>
     
     <!-- Password update -->