Use the preferred language from the browser when user is not logged in

Resolves VBV-421

client/src/stores/user.ts

@@ -2,6 +2,7 @@ import log from "loglevel";
 
 import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
 import { loadLocaleMessages, setI18nLanguage } from "@/i18n";
+import { usePreferredLanguages } from "@vueuse/core";
 import dayjs from "dayjs";
 import { defineStore } from "pinia";
 
@@ -31,6 +32,22 @@ export type UserState = {
   language: AvailableLanguages;
 };
 
+const languages = usePreferredLanguages();
+
+const isAvailableLanguage = (language: string): language is AvailableLanguages => {
+  return language in AVAILABLE_LANGUAGES;
+};
+
+let defaultLanguage: AvailableLanguages = "de";
+const AVAILABLE_LANGUAGES = ["de", "fr", "it"];
+
+for (const language of languages.value) {
+  if (isAvailableLanguage(language)) {
+    defaultLanguage = language;
+    break;
+  }
+}
+
 const initialUserState: UserState = {
   id: 0,
   email: "",
@@ -41,7 +58,7 @@ const initialUserState: UserState = {
   is_superuser: false,
   course_session_experts: [],
   loggedIn: false,
-  language: "de",
+  language: defaultLanguage,
 };
 
 async function setLocale(language: AvailableLanguages) {