init i18n

package-lock.json

@@ -28,6 +28,7 @@
         "vite": "^4.2.0",
         "vite-plugin-vuetify": "^1.0.0",
         "vue": "^3.2.0",
+        "vue-i18n": "^9.8.0",
         "vue-router": "^4.0.0",
         "vue3-markdown": "^1.1.9",
         "vuetify": "^3.4.0"
@@ -470,6 +471,47 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
+      "integrity": "sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.8.0",
+        "@intlify/shared": "9.8.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
+      "integrity": "sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==",
+      "dependencies": {
+        "@intlify/shared": "9.8.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
+      "integrity": "sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -4760,6 +4802,25 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
+      "integrity": "sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.8.0",
+        "@intlify/shared": "9.8.0",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
@@ -5169,6 +5230,29 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
     },
+    "@intlify/core-base": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
+      "integrity": "sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==",
+      "requires": {
+        "@intlify/message-compiler": "9.8.0",
+        "@intlify/shared": "9.8.0"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
+      "integrity": "sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==",
+      "requires": {
+        "@intlify/shared": "9.8.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
+      "integrity": "sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ=="
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -8161,6 +8245,16 @@
         "semver": "^7.3.6"
       }
     },
+    "vue-i18n": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
+      "integrity": "sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==",
+      "requires": {
+        "@intlify/core-base": "9.8.0",
+        "@intlify/shared": "9.8.0",
+        "@vue/devtools-api": "^6.5.0"
+      }
+    },
     "vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

package.json

@@ -37,6 +37,7 @@
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",
     "vue": "^3.2.0",
+    "vue-i18n": "^9.8.0",
     "vue-router": "^4.0.0",
     "vue3-markdown": "^1.1.9",
     "vuetify": "^3.4.0"

src/components/instance/settings/Typebot.vue

@@ -100,7 +100,8 @@
               class="mb-3"
               :rules="[
                 (v) => {
-                  if (!v) return 'Tempo de expiração é obrigatório';
+                  if (v === '' || v === undefined)
+                    return 'Tempo de expiração é obrigatório';
                   return true;
                 },
               ]"

src/components/modal/About.vue

@@ -50,15 +50,7 @@
             necessário que o servidor da Evolution API seja acessado através de
             uma conexão segura (HTTPS).
           </v-alert>
-
+          
-          <h3 class="mt-5 mb-2">Limitações do Projeto</h3>
-          <p>
-            Como um projeto open-source mantido por voluntários, não há
-            garantias de atualizações futuras. A independência do Evolution
-            Manager em relação à Evolution API significa que alterações na API
-            podem afetar a funcionalidade do Manager.
-          </p>
-
           <span class="mt-5 mb-2 text-disabled">Versão: {{ version }}</span>
         </div>
       </v-card-text>

src/components/modal/Contribute.vue

@@ -3,7 +3,7 @@
     <v-card>
       <v-card-text>
         <div class="d-flex flex-column align-center">
-          <h4>Contribua via PIX</h4>
+          <h4>{{$t('contribute.via')}} PIX</h4>
           <v-img
             src="@/assets/pix.svg"
             height="300px"
@@ -20,7 +20,7 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-btn text @click="dialog = false" :disabled="loading"> {{ $t('close') }} </v-btn>
         <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>

src/components/modal/Settings.vue

@@ -7,7 +7,7 @@
     <v-card>
       <v-card-text>
         <v-form v-model="valid">
-          <h3 class="mb-4">Configurar conexão</h3>
+          <h3 class="mb-4">{{ $t("connection.title") }}</h3>
           <v-text-field
             v-model="connection.host"
             label="URL"
@@ -32,7 +32,7 @@
       </v-card-text>
       <v-card-actions>
         <div class="d-flex flex-wrap justify-space-between w-100 align-center">
-          <v-btn size="small" text @click="showAbout"> Sobre </v-btn>
+          <v-btn size="small" text @click="showAbout"> {{ $t('about.title') }} </v-btn>
           <div class="d-flex justify-end flex-grow-1 gap-1">
             <v-btn
               v-if="!!AppStore.connection.host"
@@ -72,8 +72,8 @@
               :disabled="!valid"
               :loading="loading"
             >
-              Conectar
+            {{ $t('connection.action')  }}
-            </v-btn>
+          </v-btn>
           </div>
         </div>
       </v-card-actions>
@@ -81,7 +81,7 @@
 
     <v-card class="mt-2" v-if="connectionsList && connectionsList.length > 1">
       <v-card-text>
-        <h3 class="mb-4">Conexões salvas</h3>
+        <h3 class="mb-4">{{ $t('connection.saved') }}</h3>
         <v-list>
           <v-list-item
             v-for="conect in connectionsList"

src/i18n/en.js

@@ -0,0 +1,32 @@
+
+import { en } from 'vuetify/locale'
+
+
+export default {
+  $vuetify: { ...en },
+  all: "All",
+  close: "Close",
+  instance: "Instance | Instances",
+  search: "Search",
+  loading: "Loading",
+  noInstances: "No instances found",
+  status: {
+    close: "Disconnected",
+    connecting: "Connecting",
+    open: "Connected",
+  },
+  about: {
+    title: "About",
+    version: "Version",
+  },
+  contribute: {
+    title: "Contribute",
+    via: "Contribute via",
+    button: "Contribute",
+  },
+  connection: {
+    title: "Configure connection",
+    action: "Connect",
+    saved: "Connection saved | Connections saved",
+  }
+}

src/i18n/pt.js

@@ -0,0 +1,35 @@
+
+import { pt } from 'vuetify/locale'
+
+
+export default {
+  $vuetify: { ...pt },
+  all: "Todo | Todos",
+  close: "Fechar",
+  instance: "Instância | Instâncias",
+  search: "Pesquisar",
+  loading: "Carregando",
+  noInstances: "Nenhuma instância encontrada",
+  status: {
+    close: "Desconectado",
+    connecting: "Conectando",
+    open: "Conectado",
+  },
+  about: {
+    title: "Sobre",
+    version: "Versão",
+  },
+  contribute: {
+    title: "Contribuir",
+    via: "Contribua via",
+    button: "Contribua",
+  },
+  connection: {
+    title: "Configurar conexão",
+    action: "Conectar",
+    saved: "Conexão salva | Conexões salvas",
+  }
+
+
+
+}

src/layouts/default/AppBar.vue

@@ -26,16 +26,29 @@
             }}
           </p>
         </div>
-        <v-chip
+        <v-chip size="x-small" color="grey" class="flex-shrink-0">
-          size="x-small"
-          color="grey"
-          class="flex-shrink-0"
-        >
           <b>{{ AppStore.version }}</b>
         </v-chip>
       </div>
     </v-chip>
     <v-icon v-else color="error"> mdi-alert-circle </v-icon>
+    <v-menu>
+      <template v-slot:activator="{ props }">
+        <v-btn class="ml-1" v-bind="props" icon>
+          <v-icon>mdi-translate</v-icon>
+        </v-btn>
+      </template>
+      <v-list :value="currentLanguage">
+        <v-list-item
+          v-for="lang in availableLanguages"
+          :key="lang"
+          @click="changei18n(lang)"
+          :disabled="lang === currentLanguage"
+        >
+          <v-list-item-title>{{ lang }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-btn @click="openSettings" icon>
       <v-icon>mdi-cog</v-icon>
     </v-btn>
@@ -61,6 +74,10 @@ export default {
     SettingsModal,
   },
   methods: {
+    changei18n(locale) {
+      this.$vuetify.locale.current = locale;
+      window.localStorage.setItem("locale", locale);
+    },
     toggleTheme() {
       const theme = this.theme.global.current.dark ? "light" : "dark";
       this.theme.global.name = theme;
@@ -91,6 +108,12 @@ export default {
     dark() {
       return this.theme.global.current.dark;
     },
+    availableLanguages() {
+      return this.$i18n.availableLocales;
+    },
+    currentLanguage() {
+      return this.$i18n.locale;
+    },
   },
   async mounted() {
     try {

src/layouts/default/AppFooter.vue

@@ -9,7 +9,7 @@
           color="blue"
           >
           <v-icon start> mdi-information </v-icon>
-          Sobre
+          {{ $t("about.title") }}
         </v-btn>
         <v-btn
         @click="contribute"
@@ -18,7 +18,7 @@
           color="light-blue-lighten-1"
         >
           <v-icon start>mdi-hand-coin</v-icon>
-          Contribua com o projeto
+          {{ $t("contribute.button") }}
         </v-btn>
         <p style="font-size: 12px" class="text-disabled">v{{ version }}</p>
       </div>

src/plugins/index.js

@@ -5,7 +5,7 @@
  */
 
 // Plugins
-import vuetify from './vuetify'
+import { vuetify,i18n } from './vuetify'
 import pinia from '../store'
 import router from '../router'
 
@@ -13,6 +13,7 @@ import HelpTooltip from '@/components/global/HelpTooltip.vue'
 
 export function registerPlugins(app) {
   app
+    .use(i18n)
     .use(vuetify)
     .use(router)
     .use(pinia)

src/plugins/vuetify.js

@@ -10,11 +10,35 @@ import 'vuetify/styles'
 
 // Composables
 import { createVuetify } from 'vuetify'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
+import { createI18n, useI18n } from 'vue-i18n'
+
+
+// import all files from src/i18n
+const messages = Object.fromEntries(
+  Object.entries(
+    import.meta.globEager('../i18n/*.js')
+  ).map(([key, value]) => {
+    const locale = key.match(/([A-Za-z0-9-_]+)\./i)[1]
+    return [locale, value.default]
+  })
+)
+
+const locale = window.localStorage.getItem('locale') || 'pt'
+export const i18n = createI18n({
+  legacy: false, // Vuetify does not support the legacy mode of vue-i18n
+  locale,
+  fallbackLocale: 'pt',
+  messages,
+})
+
+
 
 const defaultTheme = localStorage.getItem('theme') || 'light'
-
+export const vuetify = createVuetify({
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+  locale: {
-export default createVuetify({
+    adapter: createVueI18nAdapter({ i18n, useI18n }),
+  },
   theme: {
     defaultTheme,
     themes: {
@@ -27,3 +51,10 @@ export default createVuetify({
     },
   },
 })
+
+
+export default {
+  vuetify,
+  i18n
+}
+

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex mb-4 align-center">
-      <h3>Instancias</h3>
+      <h3>{{ $t("instance", 2) }}</h3>
       <v-spacer></v-spacer>
       <v-btn
         :disabled="loading"
@@ -20,7 +20,9 @@
         :disabled="loading"
       >
         <v-icon>mdi-plus</v-icon>
-        <span class="ml-2">Instancia</span>
+        <span class="ml-2">
+          {{ $t("instance") }}
+        </span>
       </v-btn>
     </div>
 
@@ -28,7 +30,7 @@
       <v-col cols="12" v-if="loading">
         <v-progress-linear v-if="loading" indeterminate color="info" />
         <v-alert type="info" class="mb-4" v-else :loading="loading" outlined>
-          Carregando...
+          {{ $t("loading") }}...
         </v-alert>
       </v-col>
       <v-col v-else cols="12">
@@ -53,7 +55,7 @@
               variant="outlined"
               size="x-small"
             >
-              Todos
+              {{$t("all")}}
             </v-btn>
             <v-btn
               v-for="[key, item] in Object.entries(statusMapper)"
@@ -65,7 +67,7 @@
               variant="outlined"
               size="x-small"
             >
-              {{ item.text }}
+            {{ $t(`status.${key}`) }}
             </v-btn>
           </v-btn-toggle>
         </div>
@@ -105,7 +107,7 @@
                   >
                     {{ statusMapper[instance.status].icon }}
                   </v-icon>
-                  {{ statusMapper[instance.status].text }}
+                  {{ $t(`status.${instance.status}`) }}
                 </v-chip>
                 <h5>{{ instance.instanceName }}</h5>
               </div>
@@ -128,7 +130,7 @@
       </template>
       <v-col v-else cols="12">
         <v-alert type="info" class="mb-4" outlined>
-          Nenhuma instância encontrada
+          {{ $t("noInstances") }}
         </v-alert>
       </v-col>
     </v-row>