Added vue-gettext.

frontend/src/components/domains/DomainList.vue

@@ -24,7 +24,11 @@
         <v-btn icon small :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
           <v-icon>mdi-circle-edit-outline</v-icon>
         </v-btn>
-        <v-btn icon small title="Remove" @click="confirmDelete(item)">
+        <v-btn
+          icon
+          small
+          :title="'Delete this domain' | translate"
+          @click="confirmDelete(item)">
           <v-icon>mdi-delete-outline</v-icon>
         </v-btn>
       </template>
@@ -34,13 +38,13 @@
         </router-link>
       </template>
       <template v-slot:item.tags="{ }">
-        <v-chip label x-small>Domain</v-chip>
+        <v-chip label x-small><translate>Domain</translate></v-chip>
       </template>
       <template v-slot:item.dns_status="{ item }">
         <v-chip v-if="item.dns_status.checks === 'disabled'"
-                label x-small>Disabled</v-chip>
+                label x-small><translate>Disabled</translate></v-chip>
         <v-chip v-if="item.dns_status.checks === 'pending'"
-                color="secondary" label x-small>Pending</v-chip>
+                color="secondary" label x-small><translate>Pending</translate></v-chip>
         <span v-if="item.dns_status.checks === 'active'">
           <v-chip v-if="item.dns_status.mx"
                   :color="getDNSTagType(item.dns_status.mx)"
@@ -90,7 +94,7 @@ export default {
         { text: 'DNS status', value: 'dns_status', sortable: false },
         { text: 'Quota', value: 'allocated_quota_in_percent' }
       ],
-      deleteDomainMsg: 'Confirm deletion?',
+      deleteDomainMsg: this.$gettext('Confirm deletion?'),
       selectedDomain: null,
       showConfirmDialog: false,
       search: ''

frontend/src/components/layout/ConfirmDialog.vue

@@ -11,14 +11,14 @@
         text
         @click="cancel"
         >
-        No
+        <translate>No</translate>
       </v-btn>
       <v-btn
         color="primary"
         text
         @click="confirm"
         >
-        Yes
+        <translate>Yes</translate>
       </v-btn>
     </v-card-actions>
   </v-card>

frontend/src/components/layout/Navbar.vue

@@ -68,26 +68,26 @@ export default {
       drawer: true,
       items: [
         {
-          text: 'Dashboard',
+          text: this.$gettext('Dashboard'),
           icon: 'mdi-view-dashboard'
         },
         {
-          text: 'Domains',
+          text: this.$gettext('Domains'),
           to: { name: 'DomainList' },
           icon: 'mdi-domain'
         },
         {
-          text: 'Identities',
+          text: this.$gettext('Identities'),
           icon: 'mdi-account'
         },
         {
           icon: 'mdi-magnify',
-          text: 'Logs',
+          text: this.$gettext('Logs'),
           to: { name: 'LogList' }
         },
         {
           icon: 'mdi-cog',
-          text: 'Parameters',
+          text: this.$gettext('Parameters'),
           children: []
         }
       ]

frontend/src/components/layout/Topbar.vue

@@ -50,7 +50,7 @@ export default {
     return {
       items: [
         {
-          text: 'Logout',
+          text: this.$gettext('Logout'),
           icon: 'mdi-logout',
           click: this.logout
         }

frontend/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import './plugins/axios'
 import './plugins/vue-cookie'
+import './plugins/vue-gettext'
 import App from './App.vue'
 import router from './router'
 import store from './store'

frontend/src/plugins/vue-gettext.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import GetTextPlugin from 'vue-gettext'
+import translations from '@/translations.json'
+
+Vue.use(GetTextPlugin, {
+  availableLanguages: {
+    en: 'English',
+    fr: 'Français'
+  },
+  translations: translations
+})
+
+Vue.filter('translate', value => {
+  return !value ? '' : Vue.prototype.$gettext(value.toString())
+})

frontend/src/translations.json

@@ -0,0 +1 @@
+{"en":{},"fr":{}}