client: Add language switcher in settings

src/public/app/widgets/type_widgets/content_widget.js

@@ -32,6 +32,7 @@ import DatabaseAnonymizationOptions from "./options/advanced/database_anonymizat
 import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import RibbonOptions from "./options/appearance/ribbon.js";
+import LocalizationOptions from "./options/appearance/i18n.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -54,6 +55,7 @@ const TPL = `<div class="note-detail-content-widget note-detail-printable">
 
 const CONTENT_WIDGETS = {
     _optionsAppearance: [
+        LocalizationOptions,
         ThemeOptions,
         FontsOptions,
         ZoomFactorOptions,

src/public/app/widgets/type_widgets/options/appearance/i18n.js

@@ -0,0 +1,39 @@
+import OptionsWidget from "../options_widget.js";
+import server from "../../../../services/server.js";
+import utils from "../../../../services/utils.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Localization</h4>
+
+    <div class="form-group row">
+        <div class="col-6">
+            <label>Language</label>
+            <select class="locale-select form-control"></select>
+        </div>
+    </div>
+</div>
+`;
+
+export default class LocalizationOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$localeSelect = this.$widget.find(".locale-select");
+        this.$localeSelect.on("change", async() => {
+            const newLocale = this.$localeSelect.val();
+            await server.put(`options/locale/${newLocale}`);
+            utils.reloadFrontendApp("locale change");
+        });
+    }
+
+    async optionsLoaded(options) {
+        const availableLocales = await server.get("options/locales");
+        for (const locale of availableLocales) {
+            this.$localeSelect.append($("<option>")
+                .attr("value", locale.id)
+                .text(locale.name));
+        }
+
+        this.$localeSelect.val(options.locale);
+    }
+}

src/routes/api/options.ts

@@ -58,7 +58,8 @@ const ALLOWED_OPTIONS = new Set([
     'customSearchEngineName',
     'customSearchEngineUrl',
     'promotedAttributesOpenInRibbon',
-    'editedNotesOpenInRibbon'
+    'editedNotesOpenInRibbon',
+    'locale'
 ]);
 
 function getOptions() {