Merge aff6a5bf7f into 46d90a6a99

# Conflicts:
#	package-lock.json

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");
+        });
+};

package.json

@@ -47,7 +47,7 @@
         "build-docker-nightly-local": "npm run build && docker build -f docker/dockerfile -t louislam/uptime-kuma:nightly2 --target nightly .",
         "build-docker-pr-test": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64 -t louislam/uptime-kuma:pr-test2 --target pr-test2 . --push",
         "upload-artifacts": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg VERSION --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
-        "setup": "git checkout 1.23.13 && npm ci --production && npm run download-dist",
+        "setup": "git checkout 1.23.14 && npm ci --production && npm run download-dist",
         "download-dist": "node extra/download-dist.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -72,7 +72,7 @@
         "start-server-node14-win": "private\\node14\\node.exe server/server.js"
     },
     "dependencies": {
-        "@grpc/grpc-js": "~1.7.3",
+        "@grpc/grpc-js": "~1.8.22",
         "@louislam/ping": "~0.4.4-mod.1",
         "@louislam/sqlite3": "15.1.6",
         "@vvo/tzdb": "^6.125.0",
@@ -91,7 +91,7 @@
         "dayjs": "~1.11.5",
         "dev-null": "^0.1.1",
         "dotenv": "~16.0.3",
-        "express": "~4.19.2",
+        "express": "~4.21.0",
         "express-basic-auth": "~1.2.1",
         "express-static-gzip": "~2.1.7",
         "feed": "^4.2.2",
@@ -138,8 +138,8 @@
         "redbean-node": "~0.3.0",
         "redis": "~4.5.1",
         "semver": "~7.5.4",
-        "socket.io": "~4.7.5",
-        "socket.io-client": "~4.7.5",
+        "socket.io": "~4.8.0",
+        "socket.io-client": "~4.8.0",
         "socks-proxy-agent": "6.1.1",
         "tar": "~6.2.1",
         "tcp-ping": "~0.1.1",
@@ -172,7 +172,7 @@
         "cross-env": "~7.0.3",
         "delay": "^5.0.0",
         "dns2": "~2.0.1",
-        "dompurify": "~3.0.11",
+        "dompurify": "~3.1.7",
         "eslint": "~8.14.0",
         "eslint-plugin-jsdoc": "~46.4.6",
         "eslint-plugin-vue": "~8.7.1",

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

@@ -161,6 +161,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

@@ -289,6 +289,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 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 -->
@@ -715,6 +734,10 @@ export default {
             this.maintenanceList = res.data.maintenanceList;
             this.$root.publicGroupList = res.data.publicGroupList;
 
+            if (!localStorage.locale && this.config.defaultLocale) {
+                this.$root.changeCurrentPageLang(this.config.defaultLocale);
+            }
+
             this.loading = false;
 
             // Configure auto-refresh loop
@@ -1143,6 +1166,10 @@ footer {
     display: flex;
     align-items: center;
     gap: 10px;
+
+    .title {
+        flex-grow: 1;
+    }
 }
 
 .logo-wrapper {