@adminforth/i18n 1.0.0-next.1

package/dist/custom/LanguageUnderLogin.vue

@@ -0,0 +1,76 @@
+<template>
+  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3 flex items-center justify-center">
+    <Select
+      class="w-full"
+      v-model="selectedLanguage"
+      :options="options"
+      :placeholder="$t('Select language')"
+    >
+      <template #item="{ option }">
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span> 
+
+        </span>
+        <span>{{ option.label }}</span>
+      </template>
+
+      <template #selected-item="{option}">
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span>
+        </span>
+        <span>{{ option.label }}</span>
+      </template>
+    </Select>
+  </p>
+</template>
+
+<script setup>
+import Select from '@/afcl/Select.vue';
+import 'flag-icon-css/css/flag-icons.min.css';
+import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
+import { useCoreStore } from '@/stores/core';
+
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { setLocaleMessage, locale } = useI18n();
+
+
+const props = defineProps(['meta', 'resource']);
+
+const selectedLanguage = ref('');
+const coreStore = useCoreStore();
+
+watch(() => selectedLanguage.value, async (newVal) => {
+  await setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, newVal);
+  coreStore.getPublicConfig();
+});
+
+
+const options = computed(() => {
+  return props.meta.supportedLanguages.map((lang) => {
+    return {
+      value: lang.code,
+      label: lang.name,
+    };
+  });
+});
+
+onMounted(() => {
+  console.log('LanguageUnderLogin mounted', props.meta.supportedLanguages);
+  selectedLanguage.value = getLocalLang(props.meta.supportedLanguages);
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, selectedLanguage.value);
+  // todo this mounted executed only on this component mount, f5 from another page apart login will not read it
+});
+
+
+
+
+
+
+
+</script>

package/dist/custom/langCommon.ts

@@ -0,0 +1,89 @@
+
+import { callAdminForthApi } from '@/utils';
+
+
+const messagesCache: Record<
+    string,
+    {
+        ts: number;
+        messages: Record<string, string>;
+    }
+> = {};
+
+// cleanup messages after a 2 minutes (cache for instant switching)
+setInterval(() => {
+    const now = Date.now();
+    for (const lang in messagesCache) {
+        if (now - messagesCache[lang].ts > 10 * 60 * 1000) {
+            delete messagesCache[lang];
+        }
+    }
+}, 60 * 1000);
+
+// i18n is vue-i18n instance
+export async function setLang({ setLocaleMessage, locale }: any, pluginInstanceId: string, langIso: string) {
+
+    if (!messagesCache[langIso]) {
+        const messages = await callAdminForthApi({
+            path: `/plugin/${pluginInstanceId}/frontend_messages?lang=${langIso}`,
+            method: 'GET',
+        });
+        messagesCache[langIso] = {
+            ts: Date.now(),
+            messages: messages
+        };
+    }
+    
+    // set locale and locale message
+    setLocaleMessage(langIso, messagesCache[langIso].messages);
+
+    // set the language
+    locale.value = langIso;
+
+    document.querySelector('html').setAttribute('lang', langIso);
+    setLocalLang(langIso);
+}
+
+// only remap the country code for the languages where language code is different from the country code
+// don't include es: es, fr: fr, etc, only include the ones where language code is different from the country code
+const countryISO31661ByLangISO6391 = {
+    en: 'us', // English → United States
+    zh: 'cn', // Chinese → China
+    hi: 'in', // Hindi → India
+    ar: 'sa', // Arabic → Saudi Arabia
+    ko: 'kr', // Korean → South Korea
+    ja: 'jp', // Japanese → Japan
+    uk: 'ua', // Ukrainian → Ukraine
+    ur: 'pk', // Urdu → Pakistan
+};
+
+export function getCountryCodeFromLangCode(langCode) {
+    return countryISO31661ByLangISO6391[langCode] || langCode;
+}
+
+
+const LS_LANG_KEY = `afLanguage`;
+
+export function getLocalLang(supportedLanguages: {code}[]): string {
+    let lsLang = localStorage.getItem(LS_LANG_KEY);
+    // if someone screwed up the local storage or we stopped language support, lets check if it is in supported languages
+    if (lsLang && !supportedLanguages.find((l) => l.code == lsLang)) {
+        lsLang = null;
+    }
+    if (lsLang) {
+        return lsLang;
+    }
+    // read lang from navigator and try find what we have in supported languages
+    const lang = navigator.language.split('-')[0];
+    const foundLang = supportedLanguages.find((l) => l.code == lang);
+    if (foundLang) {
+        return foundLang.code;
+    }
+    return supportedLanguages[0].code;
+}
+
+export function setLocalLang(lang: string) {
+    localStorage.setItem(LS_LANG_KEY, lang);
+}
+
+  

package/dist/custom/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "flag-icon-css": "^4.1.7"
+      }
+    },
+    "node_modules/flag-icon-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-4.1.7.tgz",
+      "integrity": "sha512-AFjSU+fv98XbU0vnTQ32vcLj89UEr1MhwDFcooQv14qWJCjg9fGZzfh9BVyDhAhIOZW/pGmJmq38RqpgPaeybQ==",
+      "deprecated": "The project has been renamed to flag-icons",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package/dist/custom/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "flag-icon-css": "^4.1.7"
+  }
+}

package/dist/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}