From fdbfa0e76f1db760b312b601f3d7a7e703c86c14 Mon Sep 17 00:00:00 2001
From: Matt Kilgore <matthew@kilgore.dev>
Date: Sun, 4 Aug 2024 13:11:27 -0400
Subject: [PATCH] refactor: better translation formatting

---
 frontend/components/global/PasswordScore.vue |  2 +-
 frontend/locales/en.json                     | 46 ++++++++++++--------
 frontend/pages/index.vue                     | 42 +++++++++---------
 frontend/plugins/i18n.ts                     |  1 +
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/frontend/components/global/PasswordScore.vue b/frontend/components/global/PasswordScore.vue
index f6c25e6a..6b968ac3 100644
--- a/frontend/components/global/PasswordScore.vue
+++ b/frontend/components/global/PasswordScore.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-4">
-    <p class="text-sm">{{ $t("password_strength") }}: {{ message }}</p>
+    <p class="text-sm">{{ $t("components.password_score.password_strength") }}: {{ message }}</p>
     <progress
       class="progress w-full progress-bar"
       :value="score"
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index e188e1cd..e709984c 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -1,21 +1,29 @@
 {
-    "tagline": "Track, Organize, and Manage your Things.",
-    "version": "Version: { version }",
-    "build": "Build: { build }",
-    "disabled_registration": "Registration Disabled",
-    "login": "Login",
-    "register": "Register",
-    "remember_me": "Remember Me",
-    "password": "Password",
-    "email": "Email",
-    "set_email": "What's your email?",
-    "set_password": "Set your password",
-    "set_name": "What's your name?",
-    "password_strength": "Password Strength",
-    "joining_group": "You're Joining an Existing Group!",
-    "dont_join_group": "Don't want to join a group?",
-    "read_docs": "Read the Docs",
-    "follow_dev": "Follow the Developer",
-    "join_discord": "Join the Discord",
-    "github": "GitHub Project"
+    "global": {
+        "build": "Build: { build }",
+        "version": "Version: { version }",
+        "github": "GitHub Project",
+        "join_discord": "Join the Discord",
+        "follow_dev": "Follow the Developer",
+        "read_docs": "Read the Docs",
+        "password": "Password",
+        "email": "Email"
+    },
+    "index": {
+        "tagline": "Track, Organize, and Manage your Things.",
+        "disabled_registration": "Registration Disabled",
+        "login": "Login",
+        "register": "Register",
+        "remember_me": "Remember Me",
+        "set_email": "What's your email?",
+        "set_password": "Set your password",
+        "set_name": "What's your name?",
+        "joining_group": "You're Joining an Existing Group!",
+        "dont_join_group": "Don't want to join a group?"
+    },
+    "components": {
+        "password_score": {
+            "password_strength": "Password Strength"
+        }
+    }
 }
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index fcca51f6..fd8c15c2 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import MdiGithub from "~icons/mdi/github";
-  import MdiTwitter from "~icons/mdi/twitter";
   import MdiDiscord from "~icons/mdi/discord";
   import MdiFolder from "~icons/mdi/folder";
   import MdiAccount from "~icons/mdi/account";
@@ -150,19 +149,19 @@
             <AppLogo class="w-12 -mb-4" />
             x
           </h2>
-          <p class="ml-1 text-lg text-base-content/50">{{ $t("tagline") }}</p>
+          <p class="ml-1 text-lg text-base-content/50">{{ $t("index.tagline") }}</p>
         </div>
         <div class="flex mt-6 sm:mt-0 gap-4 ml-auto text-neutral-content">
-          <a class="tooltip" :data-tip="$t('github')" href="https://github.com/sysadminsmedia/homebox" target="_blank">
+          <a class="tooltip" :data-tip="$t('global.github')" href="https://github.com/sysadminsmedia/homebox" target="_blank">
             <MdiGithub class="h-8 w-8" />
           </a>
-          <a href="https://noc.social/@sysadminsmedia" class="tooltip" :data-tip="$t('follow_dev')" target="_blank">
+          <a href="https://noc.social/@sysadminsmedia" class="tooltip" :data-tip="$t('global.follow_dev')" target="_blank">
             <MdiMastodon class="h-8 w-8" />
           </a>
-          <a href="https://discord.gg/aY4DCkpNA9" class="tooltip" :data-tip="$t('join_discord')" target="_blank">
+          <a href="https://discord.gg/aY4DCkpNA9" class="tooltip" :data-tip="$t('global.join_discord')" target="_blank">
             <MdiDiscord class="h-8 w-8" />
           </a>
-          <a href="https://homebox.sysadminsmedia.com/en/" class="tooltip" :data-tip="$t('read_docs')" target="_blank">
+          <a href="https://homebox.sysadminsmedia.com/en/" class="tooltip" :data-tip="$t('global.read_docs')" target="_blank">
             <MdiFolder class="h-8 w-8" />
           </a>
         </div>
@@ -175,17 +174,17 @@
                 <div class="card-body">
                   <h2 class="card-title text-2xl align-center">
                     <MdiAccount class="mr-1 w-7 h-7" />
-                    {{ $t("register") }}
+                    {{ $t("index.register") }}
                   </h2>
-                  <FormTextField v-model="email" :label="$t('set_email')" />
-                  <FormTextField v-model="username" :label="$t('set_name')" />
+                  <FormTextField v-model="email" :label="$t('index.set_email')" />
+                  <FormTextField v-model="username" :label="$t('index.set_name')" />
                   <div v-if="!(groupToken == '')" class="pt-4 pb-1 text-center">
-                    <p>{{ $t("joining_group") }}</p>
+                    <p>{{ $t("index.joining_group") }}</p>
                     <button type="button" class="text-xs underline" @click="groupToken = ''">
-                      {{ $t("dont_join_group") }}
+                      {{ $t("index.dont_join_group") }}
                     </button>
                   </div>
-                  <FormPassword v-model="password" :label="$t('set_password')" />
+                  <FormPassword v-model="password" :label="$t('index.set_password')" />
                   <PasswordScore v-model:valid="canRegister" :password="password" />
                   <div class="card-actions justify-end">
                     <button
@@ -194,7 +193,7 @@
                       :class="loading ? 'loading' : ''"
                       :disabled="loading || !canRegister"
                     >
-                      {{ $t("register") }}
+                      {{ $t("index.register") }}
                     </button>
                   </div>
                 </div>
@@ -205,17 +204,17 @@
                 <div class="card-body">
                   <h2 class="card-title text-2xl align-center">
                     <MdiAccount class="mr-1 w-7 h-7" />
-                    {{ $t("login") }}
+                    {{ $t("index.login") }}
                   </h2>
                   <template v-if="status && status.demo">
                     <p class="text-xs italic text-center">This is a demo instance</p>
-                    <p class="text-xs text-center"><b>{{ $t("email") }}</b> demo@example.com</p>
-                    <p class="text-xs text-center"><b>{{ $t("password") }}</b> demo</p>
+                    <p class="text-xs text-center"><b>{{ $t("global.email") }}</b> demo@example.com</p>
+                    <p class="text-xs text-center"><b>{{ $t("global.password") }}</b> demo</p>
                   </template>
-                  <FormTextField v-model="email" :label="$t('email')" />
-                  <FormPassword v-model="loginPassword" :label="$t('password')" />
+                  <FormTextField v-model="email" :label="$t('global.email')" />
+                  <FormPassword v-model="loginPassword" :label="$t('global.password')" />
                   <div class="max-w-[140px]">
-                    <FormCheckbox v-model="remember" :label="$t('remember_me')" />
+                    <FormCheckbox v-model="remember" :label="$t('index.remember_me')" />
                   </div>
                   <div class="card-actions justify-end">
                     <button
@@ -242,7 +241,7 @@
                 <MdiLogin v-else class="w-5 h-5 swap-off" />
                 <MdiArrowRight class="w-5 h-5 swap-on" />
               </template>
-              {{ registerForm ? $t("login") : $t("register") }}
+              {{ registerForm ? $t("login") : $t("index.register") }}
             </BaseButton>
             <p v-else class="text-base-content italic text-sm inline-flex items-center gap-2">
               <MdiLock class="w-4 h-4 inline-block" />
@@ -254,7 +253,8 @@
     </div>
     <footer v-if="status" class="mt-auto text-center w-full bottom-0 pb-4">
       <p class="text-center text-sm">
-        {{ $t("version", { version: status.build.version }) }} ~ {{ $t("build", { build: status.build.commit }) }}
+        {{ $t("global.version", { version: status.build.version }) }} ~
+        {{ $t("global.build", { build: status.build.commit }) }}
       </p>
     </footer>
   </div>
diff --git a/frontend/plugins/i18n.ts b/frontend/plugins/i18n.ts
index 879d491e..5976e8e1 100644
--- a/frontend/plugins/i18n.ts
+++ b/frontend/plugins/i18n.ts
@@ -8,6 +8,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
     legacy: false,
     globalInjection: true,
     locale: "en",
+    fallbackLocale: "en",
     messageCompiler,
     messages,
   });