diff --git a/db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js b/db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js
new file mode 100644
index 000000000..1f7a13937
--- /dev/null
+++ b/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");
+ });
+};
diff --git a/server/model/status_page.js b/server/model/status_page.js
index 38f548ebb..6cf2ef717 100644
--- a/server/model/status_page.js
+++ b/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,
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index 1114d81fd..e2dedb93a 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/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;
diff --git a/src/lang/en.json b/src/lang/en.json
index cb704b0fe..2093e0803 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -294,6 +294,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.",
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index 9061e7d3d..32d23e9f5 100644
--- a/src/mixins/lang.js
+++ b/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();
}
}
};
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 116968282..d88699fa4 100644
--- a/src/pages/StatusPage.vue
+++ b/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 {