From fd8077d9f5db00f5cd4aebc08e67f1d1ebbdd2ba Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 18 Nov 2020 00:10:29 +0100
Subject: [PATCH] Add language settings UI

---
 src/js/client.js        | 27 +++++++++++++++++++++++++++
 src/translation/en.json |  4 ++++
 src/views/settings.html | 23 +++++++++++++++++++++++
 src/views/settings.js   | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+)

diff --git a/src/js/client.js b/src/js/client.js
index 2bd86a9cc..8b31d60d0 100644
--- a/src/js/client.js
+++ b/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);
diff --git a/src/translation/en.json b/src/translation/en.json
index 9d69fd8e4..d1f2230c8 100644
--- a/src/translation/en.json
+++ b/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": {
diff --git a/src/views/settings.html b/src/views/settings.html
index 2b01aaa32..028a3c78e 100644
--- a/src/views/settings.html
+++ b/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>
diff --git a/src/views/settings.js b/src/views/settings.js
index 3212d7fd4..19b472753 100644
--- a/src/views/settings.js
+++ b/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();