From 0a7f22bcb59eec5a48ac884e7c0962867720fd8e Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Tue, 1 Oct 2024 01:41:31 +0200
Subject: [PATCH] Add language option (#4174)

---
 locales/en/messages.json |  3 +++
 src/js/tabs/options.js   | 36 +++++++++++++++++++++++++++++-------
 src/tabs/options.html    |  8 ++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 17b5feadbf..8e24310d95 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -171,6 +171,9 @@
         "message": "Change language:",
         "description": "Try and be brief"
     },
+    "userLanguageSelect": {
+        "message": "Select default language"
+    },
     "language_default": {
         "message": "System Default"
     },
diff --git a/src/js/tabs/options.js b/src/js/tabs/options.js
index 4a02a92148..946536f0a9 100644
--- a/src/js/tabs/options.js
+++ b/src/js/tabs/options.js
@@ -30,6 +30,7 @@ options.initialize = function (callback) {
         TABS.options.initDarkTheme();
         TABS.options.initShowDevToolsOnStartup();
         TABS.options.initShowNotifications();
+        TABS.options.initUserLanguage();
         TABS.options.initShowWarnings();
         TABS.options.initMeteredConnection();
 
@@ -233,13 +234,34 @@ options.initShowNotifications = function () {
 options.initMeteredConnection = function () {
     const result = getConfig("meteredConnection");
     $("div.meteredConnection input")
-        .prop("checked", !!result.meteredConnection)
-        .on('change', function () {
-            setConfig({ meteredConnection: $(this).is(":checked") });
-            // update network status
-            ispConnected();
-        })
-        .trigger('change');
+    .prop("checked", !!result.meteredConnection)
+    .on('change', function () {
+        setConfig({ meteredConnection: $(this).is(":checked") });
+        // update network status
+        ispConnected();
+    })
+    .trigger('change');
+};
+
+options.initUserLanguage = function () {
+    const userLanguage = i18n.selectedLanguage;
+    const userLanguageElement = $('#userLanguage');
+    const languagesAvailables = i18n.getLanguagesAvailables();
+    userLanguageElement.append(`<option value="DEFAULT">${i18n.getMessage('language_default')}</option>`);
+    userLanguageElement.append('<option disabled>------</option>');
+    languagesAvailables.forEach(element => {
+        const languageName = i18n.getMessage(`language_${element}`);
+        userLanguageElement.append(`<option value="${element}">${languageName}</option>`);
+    });
+
+    userLanguageElement
+    .val(userLanguage)
+    .on('change', e => {
+        i18n.changeLanguage(e.target.value);
+        // translate to user-selected language
+        i18n.localizePage();
+    })
+    .trigger('change');
 };
 
 // TODO: remove when modules are in place
diff --git a/src/tabs/options.html b/src/tabs/options.html
index 3dfa502cee..9908a71e4c 100644
--- a/src/tabs/options.html
+++ b/src/tabs/options.html
@@ -79,6 +79,14 @@
                     </div>
                     <span class="freelabel" i18n="showNotifications"></span>
                 </div>
+                <div class="userLanguage">
+                    <span class="dropdown">
+                        <select class="dropdown-select" id="userLanguage" i18n_title="userLanguageSelect">
+                            <!-- User languages generated here -->
+                        </select>
+                    </span>
+                    <span i18n="userLanguageSelect"></span>
+                </div>
             </div>
         </div>