From d21ca3e68dafa1d742d78bd73133d9d32002e79e Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Aug 2023 16:43:08 -0700
Subject: [PATCH] feat: injecting translations from webgui's php

---
 components/I18nHost.ce.vue | 42 ++++++++++---------
 pages/webComponents.vue    | 84 +++++++++++++++-----------------------
 2 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/components/I18nHost.ce.vue b/components/I18nHost.ce.vue
index b3b22ae72..b7ee764b1 100644
--- a/components/I18nHost.ce.vue
+++ b/components/I18nHost.ce.vue
@@ -3,16 +3,35 @@ import { provide } from 'vue';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
 
 import en_US from '~/locales/en_US.json'; // eslint-disable-line camelcase
-// import ja from '~/locales/ja.json';
 
 const defaultLocale = 'en_US'; // ja, en_US
+let parsedLocale = '';
+let parsedMessages = {};
+let nonDefaultLocale = false;
+/**
+ * In myservers2.php, we have a script tag that sets window.LOCALE_DATA to a stringified JSON object.
+ * Unfortunately, this was the only way I could get the data from PHP to vue-i18n :(
+ * I tried using i18n.setLocaleMessage() but it didn't work no matter what I tried.
+ */
+if (window.LOCALE_DATA) {
+  console.debug('[I18nHost] parsing messages');
+  try {
+    parsedMessages = JSON.parse(decodeURIComponent(window.LOCALE_DATA));
+    parsedLocale = Object.keys(parsedMessages)[0];
+    nonDefaultLocale = parsedLocale !== defaultLocale;
+    console.debug('[I18nHost] messages parsed. Now setting up vue-i18n', nonDefaultLocale, parsedLocale, parsedMessages);
+  } catch (error) {
+    console.error('[I18nHost] error parsing messages', error);
+  }
+}
+
 const i18n = createI18n<false>({
   legacy: false, // must set to `false`
-  locale: defaultLocale,
+  locale: nonDefaultLocale ? parsedLocale : defaultLocale,
   fallbackLocale: defaultLocale,
   messages: {
     en_US, // eslint-disable-line camelcase
-    // ja,
+    ...(nonDefaultLocale ? parsedMessages : {}),
   }
 });
 
@@ -20,24 +39,9 @@ provide(I18nInjectionKey, i18n);
 
 export interface Props {
   locale?: string;
-  messages?: string;
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   locale: defaultLocale,
-  messages: '',
-});
-
-onBeforeMount(() => {
-  if (props.messages) {
-    try {
-      const parsedMessages = JSON.parse(decodeURIComponent(props.messages));
-      i18n.global.locale.value = Object.keys(parsedMessages)[0];
-      i18n.global.setLocaleMessage(Object.keys(parsedMessages)[0], parsedMessages);
-      console.debug('[i18nHost] Messages parsed and set', Object.keys(parsedMessages)[0], parsedMessages);
-    } catch (error) {
-      console.error('[i18nHost] Failed to parse messages', error);
-    }
-  }
 });
 </script>
 
diff --git a/pages/webComponents.vue b/pages/webComponents.vue
index 2911c6d18..c2baf12b2 100644
--- a/pages/webComponents.vue
+++ b/pages/webComponents.vue
@@ -9,55 +9,39 @@ onBeforeMount(() => {
 
 <template>
   <client-only>
-    <div class="text-black bg-white dark:text-white dark:bg-black">
-      <div class="max-w-5xl mx-auto">
-        <div class="flex flex-col gap-6 p-6">
-          <h2 class="text-xl font-semibold font-mono">
-            Web Components
-          </h2>
-          <h3 class="text-lg font-semibold font-mono">
-            UserProfileCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-user-profile :server="JSON.stringify(serverState)" />
-          </unraid-i18n-host>
-          <hr class="border-black">
-          <h3 class="text-lg font-semibold font-mono">
-            DownloadApiLogsCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-download-api-logs />
-          </unraid-i18n-host>
-          <hr class="border-black">
-          <h3 class="text-lg font-semibold font-mono">
-            AuthCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-auth />
-          </unraid-i18n-host>
-          <hr class="border-black">
-          <h3 class="text-lg font-semibold font-mono">
-            KeyActionsCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-key-actions />
-          </unraid-i18n-host>
-          <hr class="border-black">
-          <h3 class="text-lg font-semibold font-mono">
-            WanIpCheckCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
-          </unraid-i18n-host>
-          <hr class="border-black">
-          <h3 class="text-lg font-semibold font-mono">
-            ModalsCe
-          </h3>
-          <unraid-i18n-host>
-            <unraid-modals />
-          </unraid-i18n-host>
-        </div>
-      </div>
-    </div>
+    <unraid-i18n-host class="flex flex-col gap-6 p-6 max-w-5xl mx-auto text-black bg-white dark:text-white dark:bg-black">
+      <h2 class="text-xl font-semibold font-mono">
+        Web Components
+      </h2>
+      <h3 class="text-lg font-semibold font-mono">
+        UserProfileCe
+      </h3>
+      <unraid-user-profile :server="JSON.stringify(serverState)" />
+      <hr class="border-black">
+      <h3 class="text-lg font-semibold font-mono">
+        DownloadApiLogsCe
+      </h3>
+      <unraid-download-api-logs />
+      <hr class="border-black">
+      <h3 class="text-lg font-semibold font-mono">
+        AuthCe
+      </h3>
+      <unraid-auth />
+      <hr class="border-black">
+      <h3 class="text-lg font-semibold font-mono">
+        KeyActionsCe
+      </h3>
+      <unraid-key-actions />
+      <hr class="border-black">
+      <h3 class="text-lg font-semibold font-mono">
+        WanIpCheckCe
+      </h3>
+      <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
+      <hr class="border-black">
+      <h3 class="text-lg font-semibold font-mono">
+        ModalsCe
+      </h3>
+      <unraid-modals />
+    </unraid-i18n-host>
   </client-only>
 </template>