From e4001e67ef4d1d52b803e90674f52c5fa5846e6d Mon Sep 17 00:00:00 2001
From: Simon Smith <simonsmith5521@gmail.com>
Date: Thu, 4 Jan 2024 02:17:27 +0000
Subject: [PATCH] add language selector to login (#5648)

* add language selector to login

* add showLanguageSelect to pick top or bottom boxe
---
 meshcentral-config-schema.json | 12 +++++++++++-
 views/login2.handlebars        | 27 +++++++++++++++++++++++++++
 webserver.js                   |  4 +++-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/meshcentral-config-schema.json b/meshcentral-config-schema.json
index b8956a70..f9dc51b2 100644
--- a/meshcentral-config-schema.json
+++ b/meshcentral-config-schema.json
@@ -3112,6 +3112,16 @@
                 ]
               }
             }
+          },
+          "showLanguageSelect": {
+            "type": "string",
+            "default": null,
+            "description": "Show Language Selector on Login Page, \"top\" inside Login Box or \"bottom\" at Bottom of Page",
+            "enum": [
+              null,
+              "top",
+              "bottom"
+            ]
           }
         }
       }
@@ -3483,4 +3493,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/views/login2.handlebars b/views/login2.handlebars
index 9b0e8944..a7822eba 100644
--- a/views/login2.handlebars
+++ b/views/login2.handlebars
@@ -87,6 +87,7 @@
                                         <input id=loginButton style="box-sizing:border-box;width:280px;border:0;border-radius:4px;padding:6px" onclick="submitButtonClicked('loginpanelform')" type=button value="Log In" disabled="disabled" />
                                     </td>
                                 </tr>
+                                <tr id="topLanguageSelectRow" style="display:none"><td id="topLanguageSelect"></td></tr>
                             </table>
                             <div id="hrAccountDiv" style="display:none"><hr /></div>
                             <div id="resetAccountDiv" style="display:none;padding:2px">
@@ -343,6 +344,7 @@
             </td>
         </tr>
         <tr id="welcomeTextRow"><td><div id="welcomeText" style="color:white;text-align:center;margin-left:20px;margin-right:20px"></div></td></tr>
+        <tr id="bottomLanguageSelectRow" style="display:none;text-align:center"><td id="bottomLanguageSelect"></td></tr>
         <tr style="height:20px">
             <td>
                 <div>
@@ -400,6 +402,10 @@
         var tokenTimeout = parseInt('{{{tokenTimeout}}}');
         var websocket = null;
         var formSubmitted = false;
+        var serverLangs = '{{{renderLanguages}}}'.split(',');
+        var loclist = { 'af': "Afrikaans", 'sq': "Albanian", 'ar': "Arabic (Standard)", 'ar-dz': "Arabic (Algeria)", 'ar-bh': "Arabic (Bahrain)", 'ar-eg': "Arabic (Egypt)", 'ar-iq': "Arabic (Iraq)", 'ar-jo': "Arabic (Jordan)", 'ar-kw': "Arabic (Kuwait)", 'ar-lb': "Arabic (Lebanon)", 'ar-ly': "Arabic (Libya)", 'ar-ma': "Arabic (Morocco)", 'ar-om': "Arabic (Oman)", 'ar-qa': "Arabic (Qatar)", 'ar-sa': "Arabic (Saudi Arabia)", 'ar-sy': "Arabic (Syria)", 'ar-tn': "Arabic (Tunisia)", 'ar-ae': "Arabic (U.A.E.)", 'ar-ye': "Arabic (Yemen)", 'an': "Aragonese", 'hy': "Armenian", 'as': "Assamese", 'ast': "Asturian", 'az': "Azerbaijani", 'eu': "Basque", 'bg': "Bulgarian", 'be': "Belarusian", 'bn': "Bengali", 'bs': "Bosnian", 'br': "Breton", 'my': "Burmese", 'ca': "Catalan", 'ch': "Chamorro", 'ce': "Chechen", 'zh': "Chinese", 'zh-hk': "Chinese (Hong Kong)", 'zh-cn': "Chinese (PRC)", 'zh-sg': "Chinese (Singapore)", 'zh-tw': "Chinese (Taiwan)", 'cv': "Chuvash", 'co': "Corsican", 'cr': "Cree", 'hr': "Croatian", 'cs': "Czech", 'da': "Danish", 'nl': "Dutch (Standard)", 'nl-be': "Dutch (Belgian)", 'en': "English", 'en-au': "English (Australia)", 'en-bz': "English (Belize)", 'en-ca': "English (Canada)", 'en-ie': "English (Ireland)", 'en-jm': "English (Jamaica)", 'en-nz': "English (New Zealand)", 'en-ph': "English (Philippines)", 'en-za': "English (South Africa)", 'en-tt': "English (Trinidad & Tobago)", 'en-gb': "English (United Kingdom)", 'en-us': "English (United States)", 'en-zw': "English (Zimbabwe)", 'eo': "Esperanto", 'et': "Estonian", 'fo': "Faeroese", 'fa': "Farsi (Persian)", 'fj': "Fijian", 'fi': "Finnish", 'fr': "French (Standard)", 'fr-be': "French (Belgium)", 'fr-ca': "French (Canada)", 'fr-fr': "French (France)", 'fr-lu': "French (Luxembourg)", 'fr-mc': "French (Monaco)", 'fr-ch': "French (Switzerland)", 'fy': "Frisian", 'fur': "Friulian", 'gd': "Gaelic (Scots)", 'gd-ie': "Gaelic (Irish)", 'gl': "Galacian", 'ka': "Georgian", 'de': "German (Standard)", 'de-at': "German (Austria)", 'de-de': "German (Germany)", 'de-li': "German (Liechtenstein)", 'de-lu': "German (Luxembourg)", 'de-ch': "German (Switzerland)", 'el': "Greek", 'gu': "Gujurati", 'ht': "Haitian", 'he': "Hebrew", 'hi': "Hindi", 'hu': "Hungarian", 'is': "Icelandic", 'id': "Indonesian", 'iu': "Inuktitut", 'ga': "Irish", 'it': "Italian (Standard)", 'it-ch': "Italian (Switzerland)", 'ja': "Japanese", 'kn': "Kannada", 'ks': "Kashmiri", 'kk': "Kazakh", 'km': "Khmer", 'ky': "Kirghiz", 'tlh': "Klingon", 'ko': "Korean", 'ko-kp': "Korean (North Korea)", 'ko-kr': "Korean (South Korea)", 'la': "Latin", 'lv': "Latvian", 'lt': "Lithuanian", 'lb': "Luxembourgish", 'mk': "FYRO Macedonian", 'ms': "Malay", 'ml': "Malayalam", 'mt': "Maltese", 'mi': "Maori", 'mr': "Marathi", 'mo': "Moldavian", 'nv': "Navajo", 'ng': "Ndonga", 'ne': "Nepali", 'no': "Norwegian", 'nb': "Norwegian (Bokmal)", 'nn': "Norwegian (Nynorsk)", 'oc': "Occitan", 'or': "Oriya", 'om': "Oromo", 'fa-ir': "Persian/Iran", 'pl': "Polish", 'pt': "Portuguese", 'pt-br': "Portuguese (Brazil)", 'pa': "Punjabi", 'pa-in': "Punjabi (India)", 'pa-pk': "Punjabi (Pakistan)", 'qu': "Quechua", 'rm': "Rhaeto-Romanic", 'ro': "Romanian", 'ro-mo': "Romanian (Moldavia)", 'ru': "Russian", 'ru-mo': "Russian (Moldavia)", 'sz': "Sami (Lappish)", 'sg': "Sango", 'sa': "Sanskrit", 'sc': "Sardinian", 'sd': "Sindhi", 'si': "Singhalese", 'sr': "Serbian", 'sk': "Slovak", 'sl': "Slovenian", 'so': "Somani", 'sb': "Sorbian", 'es': "Spanish", 'es-ar': "Spanish (Argentina)", 'es-bo': "Spanish (Bolivia)", 'es-cl': "Spanish (Chile)", 'es-co': "Spanish (Colombia)", 'es-cr': "Spanish (Costa Rica)", 'es-do': "Spanish (Dominican Republic)", 'es-ec': "Spanish (Ecuador)", 'es-sv': "Spanish (El Salvador)", 'es-gt': "Spanish (Guatemala)", 'es-hn': "Spanish (Honduras)", 'es-mx': "Spanish (Mexico)", 'es-ni': "Spanish (Nicaragua)", 'es-pa': "Spanish (Panama)", 'es-py': "Spanish (Paraguay)", 'es-pe': "Spanish (Peru)", 'es-pr': "Spanish (Puerto Rico)", 'es-es': "Spanish (Spain)", 'es-uy': "Spanish (Uruguay)", 'es-ve': "Spanish (Venezuela)", 'sx': "Sutu", 'sw': "Swahili", 'sv': "Swedish", 'sv-fi': "Swedish (Finland)", 'sv-sv': "Swedish (Sweden)", 'ta': "Tamil", 'tt': "Tatar", 'te': "Teluga", 'th': "Thai", 'tig': "Tigre", 'ts': "Tsonga", 'tn': "Tswana", 'tr': "Turkish", 'tk': "Turkmen", 'uk': "Ukrainian", 'hsb': "Upper Sorbian", 'ur': "Urdu", 've': "Venda", 'vi': "Vietnamese", 'vo': "Volapuk", 'wa': "Walloon", 'cy': "Welsh", 'xh': "Xhosa", 'ji': "Yiddish", 'zu': "Zulu" };
+        var loclistex = { 'zh-chs': "Chinese (Simplified)", 'zh-cht': "Chinese (Traditional)" };
+        var showLanguageSelect = '{{{showLanguageSelect}}}';
 
         function startup() {
             if (decodeURIComponent('{{{loginpicture}}}') == 'true') { Q('loginPicture').src = "loginlogo.png"; }
@@ -434,6 +440,19 @@
             var urlargs = parseUriArgs();
             //if (urlargs.key) { Q('termsLinkFooter').href += '?key=' + urlargs.key; }
 
+            // Show Language Select Box if needed
+            if (showLanguageSelect === 'top' || showLanguageSelect === 'bottom') {
+                var x = '<select id=d2langselect style="box-sizing:border-box;width:280px;border:0;border-radius:4px;padding:8px" onChange="changeLanguage()">';
+                x += '<option value="*">Use Browser Language</option>';
+                for (var i in serverLangs) {
+                    var lang = serverLangs[i];
+                    x += '<option value="' + lang + '"' + ((urlargs.lang == lang)?' selected':'') + '>' + lang + ' - ' + (loclist[lang]?loclist[lang]:loclistex[lang]) + '</option>';
+                }
+                QH(showLanguageSelect+'LanguageSelect', x);
+                if (showLanguageSelect === 'top') QS(showLanguageSelect+'LanguageSelect')['padding-top'] = '5px';
+                QV(showLanguageSelect+'LanguageSelectRow', true);
+            }
+
             // Show user/pass login
             passlogin = (passlogin == 'true');
             if (urlargs.passlogin === 1) { passlogin = true; }
@@ -582,6 +601,14 @@
             }
         }
 
+        function changeLanguage() {
+            var lang = Q('d2langselect').value;
+            var urlParams = new URLSearchParams(window.location.search);
+            if(lang=='*'){ urlParams.delete('lang') } else { urlParams.set('lang', lang); }
+            var newURL = window.location.pathname + '?' + urlParams.toString();
+            window.location.href = newURL;
+        }
+
         // Use a hardware security key
         function useSecurityKey(panelAction) {
             if ((hardwareKeyChallenge != null) && (hardwareKeyChallenge.type == 'webAuthn')) {
diff --git a/webserver.js b/webserver.js
index 1030fb30..f5dcacb1 100644
--- a/webserver.js
+++ b/webserver.js
@@ -3341,7 +3341,9 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                 twoFactorCookieDays: twoFactorCookieDays,
                 authStrategies: authStrategies.join(','),
                 loginpicture: (typeof domain.loginpicture == 'string'),
-                tokenTimeout: twoFactorTimeout // Two-factor authentication screen timeout in milliseconds
+                tokenTimeout: twoFactorTimeout, // Two-factor authentication screen timeout in milliseconds,
+                renderLanguages: obj.renderLanguages,
+                showLanguageSelect: domain.showlanguageselect ? domain.showlanguageselect : false,
             }, req, domain, (domain.sitestyle == 2) ? 'login2' : 'login'));
     }