From 644038cd200aaf76fffe8cc4ee125bc5ca8afd5a Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Thu, 19 Sep 2024 02:48:56 +0200
Subject: [PATCH] Add language option

---
 locales/en/messages.json |  3 +++
 src/js/tabs/options.js   | 22 ++++++++++++++++++++++
 src/tabs/options.html    |  8 ++++++++
 3 files changed, 33 insertions(+)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index e6b9710981a..650158f650a 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -167,6 +167,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 67f1800020a..15578896c76 100644
--- a/src/js/tabs/options.js
+++ b/src/js/tabs/options.js
@@ -29,6 +29,7 @@ options.initialize = function (callback) {
         TABS.options.initDarkTheme();
         TABS.options.initShowDevToolsOnStartup();
         TABS.options.initShowNotifications();
+        TABS.options.initUserLanguage();
         TABS.options.initShowWarnings();
 
         GUI.content_ready(callback);
@@ -192,6 +193,27 @@ options.initShowNotifications = function () {
         .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
 TABS.options = options;
 export { options };
diff --git a/src/tabs/options.html b/src/tabs/options.html
index fc967ef8fa7..af5d9876421 100644
--- a/src/tabs/options.html
+++ b/src/tabs/options.html
@@ -73,6 +73,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>