Set browser language as default locale

CHANGELOG.rst

@@ -9,6 +9,11 @@ and this project adheres to `Semantic Versioning`_.
 Unreleased
 ----------
 
+Fixed
+~~~~~
+
+* Browser locale was not the default locale in the entire frontend.
+
 `3.0`_ - 2022-05-11
 -------------------
 

aleksis/core/frontend/components/app/LanguageForm.vue

@@ -33,17 +33,33 @@ export default {
       type: Array,
       required: true,
     },
+    defaultLanguage: {
+      type: Object,
+      required: true,
+    },
   },
   methods: {
     setLanguage: function (languageOption) {
       document.cookie = languageOption.cookie;
       this.$i18n.locale = languageOption.code;
       this.$vuetify.lang.current = languageOption.code;
+      this.language = languageOption;
     },
     nameForMenu: function (item) {
       return `${item.nameLocal} (${item.code})`;
     },
   },
+  mounted() {
+    if (
+      this.availableLanguages.filter((lang) => lang.code === this.$i18n.locale)
+        .length === 0
+    ) {
+      console.warn(
+        `Unsupported language ${this.$i18n.locale} selected, defaulting to ${this.defaultLanguage.code}`
+      );
+      this.setLanguage(this.defaultLanguage);
+    }
+  },
   name: "LanguageForm",
 };
 </script>

aleksis/core/frontend/components/app/SideNav.vue

@@ -82,6 +82,7 @@
         <v-spacer />
         <language-form
           :available-languages="systemProperties.availableLanguages"
+          :default-language="systemProperties.defaultLanguage"
         />
         <v-spacer />
       </div>

aleksis/core/frontend/index.js

@@ -36,9 +36,7 @@ import routerOpts from "./app/router.js";
 import apolloOpts from "./app/apollo.js";
 
 const i18n = new VueI18n({
-  locale: Vue.$cookies.get("django_language")
-    ? Vue.$cookies.get("django_language")
-    : "en",
+  locale: Vue.$cookies.get("django_language") || navigator.language || "en",
   ...i18nOpts,
 });
 const vuetify = new Vuetify({