i18n plugin progress

Author: ivictbor

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -1093,6 +1093,14 @@ resource "aws_instance" "docker_instance" {
   vpc_security_group_ids = [aws_security_group.instance_sg.id]
   key_name               = aws_key_pair.deployer.key_name
 
+  # prevent accidental termination of ec2 instance and data loss
+  # if you will need to recreate the instance still (not sure why it can be?), you will need to remove this block manually by next command:
+  # > terraform taint aws_instance.app_instance
+  lifecycle {
+    prevent_destroy = true
+    ignore_changes = [ami]
+  }
+
   user_data = <<-EOF
     #!/bin/bash
     yum update -y

adminforth/documentation/blog/2024-10-31-compose-ec2-deployment/index.md

@@ -150,9 +150,21 @@ resource "aws_instance" "myadmin_instance" {
   vpc_security_group_ids = [aws_security_group.instance_sg.id]
   key_name               = aws_key_pair.myadmin_deploy_key.key_name
 
+  # prevent accidental termination of ec2 instance and data loss
+  # if you will need to recreate the instance still (not sure why it can be?), you will need to remove this block manually by next command:
+  # > terraform taint aws_instance.app_instance
+  lifecycle {
+    prevent_destroy = true
+    ignore_changes = [ami]
+  }
+
+
   root_block_device {
     volume_size = 20 // Size in GB for root partition
     volume_type = "gp2"
+
+    # Even if the instance is terminated, the volume will not be deleted, delete it manually if needed
+    delete_on_termination = false
   }
 
   user_data = <<-EOF

adminforth/documentation/blog/2024-11-14-compose-ec2-deployment-ci/index.md

@@ -192,9 +192,20 @@ resource "aws_instance" "app_instance" {
   vpc_security_group_ids = [aws_security_group.instance_sg.id]
   key_name               = aws_key_pair.app_deployer.key_name
 
+  # prevent accidental termination of ec2 instance and data loss
+  # if you will need to recreate the instance still (not sure why it can be?), you will need to remove this block manually by next command:
+  # > terraform taint aws_instance.app_instance
+  lifecycle {
+    prevent_destroy = true
+    ignore_changes = [ami]
+  }
+
   root_block_device {
     volume_size = 20 // Size in GB for root partition
     volume_type = "gp2"
+
+    # Even if the instance is terminated, the volume will not be deleted, delete it manually if needed
+    delete_on_termination = false
   }
 
   user_data = <<-EOF

adminforth/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.7",
+  "version": "1.5.8-next.0",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",

adminforth/package.json

@@ -1,26 +1,76 @@
 <template>
-  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3">
+  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3 flex items-center justify-center">
     <Select
       v-model="selectedLanguage"
       :options="options"
       :placeholder="$t('Select language')"
       @change="changeLanguage"
     >
       <template #item="{ option }">
-        <span>{{ option.name }}</span>
+        <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 { computed, ref, onMounted } from 'vue';
+import 'flag-icon-css/css/flag-icons.min.css';
+import { setLang } from './langCommon';
+
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { setLocaleMessage, locale } = useI18n();
+
 
 const props = defineProps(['meta', 'resource']);
 
 const selectedLanguage = ref('');
 
+
+
+watch(() => selectedLanguage.value, (newVal) => {
+  localStorage.setItem(LS_LANG_KEY, newVal);
+  
+ 
+
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, newVal);
+});
+
+
+// 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
+};
+
+function getCountryCodeFromLangCode(langCode) {
+    return countryISO31661ByLangISO6391[langCode] || langCode;
+}
+  
+
 const options = computed(() => {
   return props.meta.supportedLanguages.map((lang) => {
     return {

adminforth/plugins/i18n/custom/LanguageUnderLogin.vue

@@ -0,0 +1,45 @@
+
+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);
+}

adminforth/plugins/i18n/custom/langCommon.ts

@@ -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"
+  }
+}

adminforth/plugins/i18n/custom/package-lock.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/*"
+        "."
+      ]
+    }
+  }
+}