Merge branch...

Merge branch '856-language-select-uses-english-as-default-language-and-not-browser-language' into 'master'

Resolve "Language select uses English as default language (and not browser language)"

Closes #856

See merge request !1245

CHANGELOG.rst

@@ -18,6 +18,7 @@ Fixed
 ~~~~~
 
 * Default translations from vuetify were not loaded.
+* Browser locale was not the default locale in the entire frontend.
 * In some cases, some items in the sidenav menu were not shown due to its height being higher than the visible page area.
 * The search bar in the sidenav menu is shown even though the user has no permission to see it.
 * Add permission check to accept invitation menu point in order to hide it when this feature is disabled.

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/components/app/systemProperties.graphql

@@ -6,6 +6,12 @@
       nameLocal
       cookie
     }
+    defaultLanguage {
+      code
+      nameTranslated
+      nameLocal
+      cookie
+    }
     sitePreferences {
       themePrimary
       themeSecondary

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({

aleksis/core/schema/system_properties.py

@@ -20,6 +20,7 @@ class LanguageType(graphene.ObjectType):
 
 class SystemPropertiesType(graphene.ObjectType):
     current_language = graphene.String(required=True)
+    default_language = graphene.Field(LanguageType)
     available_languages = graphene.List(LanguageType)
     site_preferences = graphene.Field(SitePreferencesType)
     custom_menu_by_name = graphene.Field(CustomMenuType)
@@ -27,6 +28,11 @@ class SystemPropertiesType(graphene.ObjectType):
     def resolve_current_language(parent, info, **kwargs):
         return info.context.LANGUAGE_CODE
 
+    @staticmethod
+    def resolve_default_language(root, info, **kwargs):
+        code = settings.LANGUAGE_CODE
+        return translation.get_language_info(code) | {"cookie": get_language_cookie(code)}
+
     def resolve_available_languages(parent, info, **kwargs):
         return [
             translation.get_language_info(code) | {"cookie": get_language_cookie(code)}