From 52a621e9ba9540ec3db74e013504045da1f12aad Mon Sep 17 00:00:00 2001
From: Matt Kilgore <matthew@kilgore.dev>
Date: Wed, 7 Aug 2024 20:57:40 -0400
Subject: [PATCH] fix: use the browser default language

---
 frontend/layouts/default.vue |  5 ++---
 frontend/locales/en.json     |  9 +++++++--
 frontend/pages/profile.vue   | 30 +++++++-----------------------
 frontend/plugins/i18n.ts     | 20 +++++++++++++++++++-
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index eb0763a1..df117f37 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -103,12 +103,11 @@
   import MdiMagnify from "~icons/mdi/magnify";
   import MdiAccount from "~icons/mdi/account";
   import MdiCog from "~icons/mdi/cog";
-
   const username = computed(() => authCtx.user?.name || "User");
-
   // Preload currency format
   useFormatCurrency();
-
+  const locale = useState("locale").value;
+  console.log(locale);
   const modals = reactive({
     item: false,
     location: false,
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 712529e0..f2b7fbe1 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -31,11 +31,16 @@
         "change_password": "Change Password",
         "current_password": "Current Password",
         "new_password": "New Password",
-        "notifier": "{ type, select, true {Edit} false {Create} other {Other}} Notifier",
+        "notifier_modal": "{ type, select, true {Edit} false {Create} other {Other}} Notifier",
+        "notifiers": "Notifiers",
+        "notifiers_sub": "Get notifications for up coming maintenance reminders",
         "name": "Name",
         "url": "URL",
         "enabled": "Enabled",
-        "test": "Test"
+        "test": "Test",
+        "gen_invite": "Generate Invite Link",
+        "user_profile": "User Profile",
+        "user_profile_sub": "Invite users, and manage your account."
     },
     "components": {
         "global": {
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 4449e87f..fe3986d4 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -326,7 +326,7 @@
     </BaseModal>
 
     <BaseModal v-model="notifierDialog">
-      <template #title> {{ $t("profile.notifier", {type: (notifier != null)}) }} </template>
+      <template #title> {{ $t("profile.notifier_modal", {type: (notifier != null)}) }} </template>
 
       <form @submit.prevent="createNotifier">
         <template v-if="notifier">
@@ -348,8 +348,8 @@
         <template #title>
           <BaseSectionHeader>
             <MdiAccount class="mr-2 -mt-1 text-base-600" />
-            <span class="text-base-600"> User Profile </span>
-            <template #description> Invite users, and manage your account. </template>
+            <span class="text-base-600"> {{ $t("profile.user_profile") }} </span>
+            <template #description> {{ $t("profile.user_profile_sub") }} </template>
           </BaseSectionHeader>
         </template>
 
@@ -357,8 +357,8 @@
 
         <div class="p-4">
           <div class="flex gap-2">
-            <BaseButton size="sm" @click="openPassChange"> Change Password </BaseButton>
-            <BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
+            <BaseButton size="sm" @click="openPassChange"> {{ $t("profile.change_password") }} </BaseButton>
+            <BaseButton size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </BaseButton>
           </div>
           <div v-if="token" class="pt-4 flex items-center pl-1">
             <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="tokenUrl" />
@@ -371,28 +371,12 @@
         </div>
       </BaseCard>
 
-      <BaseCard>
-        <template #title>
-          <BaseSectionHeader>
-            <span class="text-base-600">Language</span>
-            <template #description>Change the language of the application</template>
-          </BaseSectionHeader>
-        </template>
-        <div class="p-5 pt-0">
-          <div class="form-control w-full">
-            <select id="locale-select" v-model="$i18n.locale" class="select select-bordered">
-              <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
-            </select>
-          </div>
-        </div>
-      </BaseCard>
-
       <BaseCard>
         <template #title>
           <BaseSectionHeader>
             <MdiMegaphone class="mr-2 -mt-1 text-base-600" />
-            <span class="text-base-600"> Notifiers </span>
-            <template #description> Get notifications for up coming maintenance reminders </template>
+            <span class="text-base-600"> {{ $t("profile.notifiers") }} </span>
+            <template #description> {{ $t("profile.notifiers_sub") }} </template>
           </BaseSectionHeader>
         </template>
 
diff --git a/frontend/plugins/i18n.ts b/frontend/plugins/i18n.ts
index 5b436b6f..8043bfda 100644
--- a/frontend/plugins/i18n.ts
+++ b/frontend/plugins/i18n.ts
@@ -3,10 +3,28 @@ import { createI18n } from "vue-i18n";
 import { IntlMessageFormat } from "intl-messageformat";
 
 export default defineNuxtPlugin(({ vueApp }) => {
+  function checkDefaultLanguage() {
+    let matched = null;
+    const languages = Object.getOwnPropertyNames(messages())
+    languages.forEach(lang => {
+      if (lang === navigator.language) {
+        matched = lang;
+      }
+    });
+    if (!matched) {
+      languages.forEach(lang => {
+        const languagePartials = navigator.language.split('-')[0]
+        if (lang === languagePartials) {
+          matched = lang;
+        }
+      });
+    }
+    return matched;
+  }
   const i18n = createI18n({
     legacy: false,
     globalInjection: true,
-    locale: "en",
+    locale: checkDefaultLanguage() || "en",
     fallbackLocale: "en",
     messageCompiler,
     messages: messages(),