Add language settings UI

src/js/client.js

@@ -970,6 +970,33 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.setLanguage = function (language, callback) {
+        post('/api/v1/settings/language', { language: language }, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null);
+        });
+    };
+
+    Client.prototype.getLanguage = function (callback) {
+        get('/api/v1/settings/language', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data.language);
+        });
+    };
+
+    Client.prototype.getAvailableLanguages = function (callback) {
+        get('/api/v1/settings/language', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data.language);
+        });
+    };
+
     Client.prototype.getRemoteSupport = function (callback) {
         get('/api/v1/support/remote_support', null, function (error, data, status) {
             if (error) return callback(error);

src/translation/en.json

@@ -614,6 +614,10 @@
             "changes": "Changes",
             "skipBackupCheckbox": "Skip backup",
             "updateAction": "Update"
+        },
+        "language": {
+            "title": "Language",
+            "description": "The default language of this Cloudron can be set here. This will be used also for transactional emails like user invitation and password reset. Each user can still change the preferred language for the dashboard individually in the profile."
         }
     },
     "support": {

src/views/settings.html

@@ -220,6 +220,29 @@
     </div>
   </div>
 
+  <div class="text-left">
+    <h3>{{ 'settings.language.title' | tr }}</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;">
+    <div class="row">
+      <div class="col-md-8">
+        <p>{{ 'settings.language.description' | tr }}</p>
+      </div>
+      <div class="col-md-4">
+        <multiselect class="pull-right" ng-model="language.language" ng-disabled="language.busy" options="lang.key for lang in language.availableLanguages" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+      </div>
+    </div>
+
+    <br/>
+
+    <div class="row">
+      <div class="col-md-12 text-right">
+        <button class="btn btn-outline btn-primary pull-right" ng-click="language.submit()" ng-disabled="language.busy || language.language === language.currentLanguage"><i class="fa fa-circle-notch fa-spin" ng-show="language.busy"></i>  {{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+
   <div class="text-left">
     <h3>{{ 'settings.updates.title' | tr }}</h3>
   </div>

src/views/settings.js

@@ -197,6 +197,31 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    $scope.language = {
+        busy: false,
+        success: false,
+        error: '',
+        language: '',
+        currentLanguage: '',
+        availableLanguages: window.languages,
+
+        submit: function () {
+            if ($scope.language.language === $scope.timeZone.currentLanguage) return;
+
+            $scope.language.error = '';
+            $scope.language.busy = true;
+            $scope.language.success = false;
+
+            Client.setLanguage($scope.language.language.key, function (error) {
+                if (error) $scope.language.error = error.message;
+                else $scope.language.currentLanguage = $scope.language.language;
+
+                $scope.language.busy = false;
+                $scope.language.success = true;
+            });
+        }
+    };
+
     $scope.updateSchedule = {
         busy: false,
         currentPattern: '',
@@ -268,6 +293,15 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     }
 
+    function getLanguage() {
+        Client.getLanguage(function (error, languageKey) {
+            if (error) return console.error(error);
+
+            $scope.language.currentLanguage = window.languages.find(function (t) { return t.key === languageKey; });
+            $scope.language.language = $scope.language.currentLanguage;
+        });
+    }
+
     function getAutoupdatePattern() {
         Client.getAutoupdatePattern(function (error, result) {
             if (error) return console.error(error);
@@ -360,6 +394,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         getAutoupdatePattern();
         getRegistryConfig();
         getTimeZone();
+        getLanguage();
 
         $scope.update.checkStatus();