Allow a 'default locale' and locale switcher on status pages

db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js

@@ -0,0 +1,15 @@
+exports.up = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.boolean("show_locale_selector").notNullable().defaultTo(false);
+            table.string("default_locale").nullable().defaultTo("");
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.dropColumn("default_locale");
+            table.dropColumn("show_locale_selector");
+        });
+};

server/model/status_page.js

@@ -403,6 +403,8 @@ class StatusPage extends BeanModel {
             autoRefreshInterval: this.autoRefreshInterval,
             published: !!this.published,
             showTags: !!this.show_tags,
+            showLocaleSelector: !!this.show_locale_selector,
+            defaultLocale: this.default_locale,
             domainNameList: this.getDomainNameList(),
             customCSS: this.custom_css,
             footerText: this.footer_text,
@@ -427,6 +429,8 @@ class StatusPage extends BeanModel {
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
+            showLocaleSelector: !!this.show_locale_selector,
+            defaultLocale: this.default_locale,
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,

server/socket-handlers/status-page-socket-handler.js

@@ -160,6 +160,8 @@ module.exports.statusPageSocketHandler = (socket) => {
             //statusPage.published = ;
             //statusPage.search_engine_index = ;
             statusPage.show_tags = config.showTags;
+            statusPage.show_locale_selector = config.showLocaleSelector;
+            statusPage.default_locale = config.defaultLocale;
             //statusPage.password = null;
             statusPage.footer_text = config.footerText;
             statusPage.custom_css = config.customCSS;

src/lang/en.json

@@ -295,6 +295,8 @@
     "Switch to Light Theme": "Switch to Light Theme",
     "Switch to Dark Theme": "Switch to Dark Theme",
     "Show Tags": "Show Tags",
+    "Show Locale Selector": "Show Locale Selector",
+    "Default Locale": "Default Locale",
     "Hide Tags": "Hide Tags",
     "Description": "Description",
     "No monitors available.": "No monitors available.",

src/mixins/lang.js

@@ -33,6 +33,17 @@ export default {
             this.$i18n.locale = lang;
             localStorage.locale = lang;
             setPageLocale();
+        },
+        /**
+         * Change the language for the current page (no localstore set)
+         * @param {string} lang Code of language to switch to.
+         * @returns {Promise<void>}
+         */
+        async changeCurrentPageLang(lang) {
+            let message = (await langModules["../lang/" + lang + ".json"]()).default;
+            this.$i18n.setLocaleMessage(lang, message);
+            this.$i18n.locale = lang;
+            setPageLocale();
         }
     }
 };

src/pages/StatusPage.vue

@@ -56,6 +56,18 @@
                     <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
                 </div>
 
+                <div class="my-3 form-check form-switch">
+                    <input id="showLocaleSelector" v-model="config.showLocaleSelector" class="form-check-input" type="checkbox">
+                    <label class="form-check-label" for="showLocaleSelector">{{ $t("Show Locale Selector") }}</label>
+                </div>
+
+                <div class="my-3">
+                    <label for="defaultLocale" class="form-label">{{ $t("Default Locale") }}</label>
+                    <select id="defaultLocale" v-model="config.defaultLocale" class="form-select">
+                        <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+                    </select>
+                </div>
+
                 <!-- Show Powered By -->
                 <div class="my-3 form-check form-switch">
                     <input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox" data-testid="show-powered-by-checkbox">
@@ -128,7 +140,7 @@
 
         <!-- Main Status Page -->
         <div :class="{ edit: enableEditMode}" class="main">
-            <!-- Logo & Title -->
+            <!-- Logo, Title & Language -->
             <h1 class="mb-4 title-flex">
                 <!-- Logo -->
                 <span class="logo-wrapper" @click="showImageCropUploadMethod">
@@ -151,7 +163,14 @@
                 />
 
                 <!-- Title -->
-                <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
+                <Editable v-model="config.title" class="title" tag="span" :contenteditable="editMode" :noNL="true" />
+
+                <!-- Locale Selector -->
+                <span v-if="config.showLocaleSelector" class="language-selector">
+                    <select v-model="$root.language" class="form-select">
+                        <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+                    </select>
+                </span>
             </h1>
 
             <!-- Admin functions -->
@@ -723,6 +742,10 @@ export default {
             }, (this.config.autoRefreshInterval + 10) * 1000);
 
             this.updateUpdateTimer();
+
+            if (!localStorage.locale && this.config.defaultLocale) {
+                this.$root.changeCurrentPageLang(this.config.defaultLocale);
+            }
         }).catch( function (error) {
             if (error.response.status === 404) {
                 location.href = "/page-not-found";
@@ -1143,6 +1166,10 @@ footer {
     display: flex;
     align-items: center;
     gap: 10px;
+
+    .title {
+        flex-grow: 1;
+    }
 }
 
 .logo-wrapper {