i18n: basic implementation and string interpolation

ui/package.json

@@ -12,6 +12,7 @@
     "buefy": "^0.8.5",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.5",
+    "vue-i18n": "^8.15.0",
     "vue-router": "^3.1.3"
   },
   "devDependencies": {

ui/src/App.vue

@@ -9,14 +9,14 @@
                         <br />
 
                         <h2 class="subtitle" v-if="!$root.$data.metadata.preexisting_install">
-                            Welcome to the {{ $root.$data.attrs.name }} installer!
+                            {{ $t('app.installer_title', {'name': $root.$data.attrs.name}) }}
                         </h2>
                         <h2 class="subtitle" v-if="!$root.$data.metadata.preexisting_install">
-                            We will have you up and running in just a few moments.
+                            {{ $t('app.installer_subtitle') }}
                         </h2>
 
                         <h2 class="subtitle" v-if="$root.$data.metadata.preexisting_install">
-                            Welcome to the {{ $root.$data.attrs.name }} Maintenance Tool.
+                            {{ $t('app.maintenance_title', {'name': $root.$data.attrs.name}) }}
                         </h2>
                     </div>
 

ui/src/locales/messages.js

@@ -0,0 +1,54 @@
+export default {
+  en: {
+    app: {
+      installer_title: 'Welcome to the {name} installer!',
+      installer_subtitle: 'We will have you up and running in just a few moments.',
+      maintenance_title: 'Welcome to the {name} Maintenance Tool.',
+      window_title: '{name} Installer'
+    },
+    download_config: {
+      download_config: 'Downloading config...',
+      error_download_config: 'Got error while downloading config: {msg}'
+    },
+    select_packages: {
+      title: 'Select which packages you want to install:',
+      installed: '(installed)',
+      advanced: 'Advanced...',
+      install: 'Install',
+      modify: 'Modify',
+      location: 'Install Location',
+      location_placeholder: 'Enter a install path here',
+      select: 'Select'
+    },
+    install_packages: {
+      check_for_update: 'Checking for updates...',
+      uninstall: 'Uninstalling...',
+      self_update: 'Downloading self-update...',
+      install: 'Installing...',
+      please_wait: 'Please wait...'
+    },
+    error: {
+      title: 'An error occurred',
+      exit_error: '{msg}\n\nPlease upload the log file (in {path}) to the {name} team',
+      location_unknown: 'the location where this installer is'
+    },
+    complete: {
+      thanks: 'Thanks for installing {name}!',
+      up_to_date: '{name} is already up to date!',
+      updated: '{name} has been updated.',
+      uninstalled: '{name} has been uninstalled.',
+      where_to_find: 'You can find your installed applications in your start menu.'
+    },
+    modify: {
+      title: 'Choose an option:',
+      update: 'Update',
+      modify: 'Modify',
+      uninstall: 'Uninstall',
+      prompt: 'Are you sure you want to uninstall {name}?'
+    },
+    back: 'Back',
+    exit: 'Exit',
+    yes: 'Yes',
+    no: 'No'
+  }
+}

ui/src/main.js

@@ -3,14 +3,23 @@ import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import VueI18n from 'vue-i18n'
 import { stream_ajax as streamAjax } from './helpers'
 import Buefy from 'buefy'
+import messages from './locales/messages.js'
 import 'buefy/dist/buefy.css'
 
 Vue.config.productionTip = false
 Vue.use(Buefy)
+Vue.use(VueI18n)
 Vue.use(VueAxios, axios)
 
+export const i18n = new VueI18n({
+  locale: 'en', // set locale
+  fallbackLocale: 'en',
+  messages // set locale messages
+})
+
 // Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
 function intercept (method) {
   console[method] = function () {
@@ -76,7 +85,7 @@ window.addEventListener('keydown', disableShortcuts)
 
 axios.get('/api/attrs').then(function (resp) {
   document.getElementById('window-title').innerText =
-    resp.data.name + ' Installer'
+    i18n.t('app.window_title', { 'name': resp.data.name })
 }).catch(function (err) {
   console.error(err)
 })
@@ -88,6 +97,7 @@ function selectFileCallback (name) {
 window.selectFileCallback = selectFileCallback
 
 var app = new Vue({
+  i18n: i18n,
   router: router,
   data: {
     attrs: {},
@@ -115,13 +125,16 @@ var app = new Vue({
     exit: function () {
       axios.get('/api/exit').catch(function (msg) {
         var searchLocation = app.metadata.install_path.length > 0 ? app.metadata.install_path
-          : 'the location where this installer is'
+          : i18n.t('error.location_unknown')
 
         app.$router.replace({ name: 'showerr',
-          params: { msg: msg +
+          params: { msg: i18n.t('error.exit_error', {
-                '\n\nPlease upload the log file (in ' + searchLocation + ') to ' +
+            'name': app.attrs.name,
-                'the ' + app.attrs.name + ' team'
+            'path': searchLocation,
-          } })
+            'msg': msg
+          })
+          }
+        })
       })
     },
     stream_ajax: streamAjax

ui/src/views/CompleteView.vue

@@ -2,28 +2,28 @@
     <div class="column has-padding">
             <div v-if="was_update">
                 <div v-if="has_installed">
-                    <h4 class="subtitle">{{ $root.$data.attrs.name }} has been updated.</h4>
+                    <h4 class="subtitle">{{ $t('complete.updated', {'name': $root.$data.attrs.name}) }}</h4>
 
-                    <p>You can find your installed applications in your start menu.</p>
+                    <p>{{ $t('complete.where_to_find') }}</p>
                 </div>
                 <div v-else>
-                    <h4 class="subtitle">{{ $root.$data.attrs.name }} is already up to date!</h4>
+                    <h4 class="subtitle">{{ $t('complete.up_to_date', {'name': $root.$data.attrs.name}) }}</h4>
 
-                    <p>You can find your installed applications in your start menu.</p>
+                    <p>{{ $t('complete.where_to_find') }}</p>
                 </div>
             </div>
             <div v-else-if="was_install">
-                <h4 class="subtitle">Thanks for installing {{ $root.$data.attrs.name }}!</h4>
+                <h4 class="subtitle">{{ $t('complete.thanks', {'name': $root.$data.attrs.name}) }}</h4>
 
-                <p>You can find your installed applications in your start menu.</p>
+                <p>{{ $t('complete.where_to_find') }}</p>
             </div>
             <div v-else>
-                <h4 class="subtitle">{{ $root.$data.attrs.name }} has been uninstalled.</h4>
+                <h4 class="subtitle">{{ $t('complete.uninstalled', {'name': $root.$data.attrs.name}) }}</h4>
             </div>
 
             <div class="field is-grouped is-right-floating is-bottom-floating">
                 <p class="control">
-                    <a class="button is-dark is-medium" v-on:click="exit">Exit</a>
+                    <a class="button is-dark is-medium" v-on:click="exit">{{ $t('exit') }}</a>
                 </p>
             </div>
     </div>

ui/src/views/DownloadConfig.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="column has-padding">
-            <h4 class="subtitle">Downloading config...</h4>
+            <h4 class="subtitle">{{ $t('download_config.download_config') }}</h4>
 
             <br />
             <progress class="progress is-info is-medium" max="100">
@@ -39,8 +39,7 @@ export default {
           that.$root.exit()
         } else {
           that.$router.replace({ name: 'showerr',
-            params: { msg: 'Got error while downloading config: ' +
+            params: { msg: this.$i18n.t('download_config.error_download_config', { msg: e }) } })
-                                e } })
         }
       })
     },

ui/src/views/ErrorView.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="column" v-bind:class="{ 'has-padding': !$root.$data.metadata.is_launcher }">
-    <b-message title="An error occurred" type="is-danger" :closable="false">
+    <b-message :title="$t('error.title')" type="is-danger" :closable="false">
       <div id="error_msg" v-html="msg"></div>
     </b-message>
     <div class="field is-grouped is-right-floating" v-bind:class="{ 'is-bottom-floating': !$root.$data.metadata.is_launcher, 'is-top-floating': $root.$data.metadata.is_launcher }">
       <p class="control">
-        <a class="button is-primary is-medium" v-if="remaining && !$root.$data.metadata.is_launcher" v-on:click="go_back">Back</a>
+        <a class="button is-primary is-medium" v-if="remaining && !$root.$data.metadata.is_launcher" v-on:click="go_back">{{ $t('back') }}</a>
-        <a class="button is-primary is-medium" v-if="$root.$data.metadata.is_launcher" v-on:click="exit">Exit</a>
+        <a class="button is-primary is-medium" v-if="$root.$data.metadata.is_launcher" v-on:click="exit">{{ $t('exit') }}</a>
       </p>
     </div>
   </div>

ui/src/views/InstallPackages.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="column has-padding">
-            <h4 class="subtitle" v-if="$root.$data.metadata.is_launcher || is_update">Checking for updates...</h4>
+            <h4 class="subtitle" v-if="$root.$data.metadata.is_launcher || is_update">{{ $t('install_packages.check_for_update') }}</h4>
-            <h4 class="subtitle" v-else-if="is_uninstall">Uninstalling...</h4>
+            <h4 class="subtitle" v-else-if="is_uninstall">{{ $t('install_packages.uninstall') }}</h4>
-            <h4 class="subtitle" v-else-if="is_updater_update">Downloading self-update...</h4>
+            <h4 class="subtitle" v-else-if="is_updater_update">{{ $t('install_packages.self_update') }}</h4>
-            <h4 class="subtitle" v-else>Installing...</h4>
+            <h4 class="subtitle" v-else>{{ $t('install_packages.install') }}</h4>
             <div v-html="$root.$data.config.installing_message"></div>
             <br />
 
@@ -20,7 +20,7 @@ export default {
   data: function () {
     return {
       progress: 0.0,
-      progress_message: 'Please wait...',
+      progress_message: this.$i18n.t('install_packages.please_wait'),
       is_uninstall: false,
       is_updater_update: false,
       is_update: false,

ui/src/views/ModifyView.vue

@@ -1,32 +1,32 @@
 <template>
     <div class="column has-padding">
-            <h4 class="subtitle">Choose an option:</h4>
+            <h4 class="subtitle">{{ $t('modify.title') }}</h4>
 
             <a class="button is-dark is-medium" v-on:click="update">
-                Update
+                {{ $t('modify.update') }}
             </a>
             <br />
             <br />
 
             <a class="button is-dark is-medium" v-on:click="modify_packages">
-                Modify
+                {{ $t('modify.modify') }}
             </a>
             <br />
             <br />
 
             <a class="button is-dark is-medium" v-on:click="prepare_uninstall">
-                Uninstall
+                {{ $t('modify.uninstall') }}
             </a>
 
             <div class="modal is-active" v-if="show_uninstall">
                 <div class="modal-background"></div>
                 <div class="modal-card">
                     <header class="modal-card-head">
-                        <p class="modal-card-title">Are you sure you want to uninstall {{ $root.$data.attrs.name }}?</p>
+                        <p class="modal-card-title">{{ $t('modify.prompt', {'name': $root.$data.attrs.name}) }}</p>
                     </header>
                     <footer class="modal-card-foot">
-                        <button class="button is-danger" v-on:click="uninstall">Yes</button>
+                        <button class="button is-danger" v-on:click="uninstall">{{ $t('yes') }}</button>
-                        <button class="button" v-on:click="cancel_uninstall">No</button>
+                        <button class="button" v-on:click="cancel_uninstall">{{ $t('no') }}</button>
                     </footer>
                 </div>
             </div>

ui/src/views/SelectPackages.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="column has-padding">
-            <h4 class="subtitle">Select which packages you want to install:</h4>
+            <h4 class="subtitle">{{ $t('select_packages.title') }}</h4>
 
             <!-- Build options -->
             <div class="tile is-ancestor">
@@ -11,7 +11,7 @@
                                 <b-checkbox v-model="Lpackage.default">
                                   {{ Lpackage.name }}
                                 </b-checkbox>
-                                <span v-if="Lpackage.installed"><i>(installed)</i></span>
+                                <span v-if="Lpackage.installed"><i>{{ $t('select_packages.installed') }}</i></span>
                             </label>
                             <p>
                                 {{ Lpackage.description }}
@@ -21,15 +21,15 @@
                 </div>
             </div>
 
-            <div class="subtitle is-6" v-if="!$root.$data.metadata.preexisting_install && advanced">Install Location</div>
+            <div class="subtitle is-6" v-if="!$root.$data.metadata.preexisting_install && advanced">{{ $t('select_packages.location') }}</div>
             <div class="field has-addons" v-if="!$root.$data.metadata.preexisting_install && advanced">
                 <div class="control is-expanded">
                     <input class="input" type="text" v-model="$root.$data.install_location"
-                           placeholder="Enter a install path here">
+                           :placeholder="$t('select_packages.location_placeholder')">
                 </div>
                 <div class="control">
                     <a class="button is-dark" v-on:click="select_file">
-                        Select
+                        {{ $t('select_packages.select') }}
                     </a>
                 </div>
             </div>
@@ -38,15 +38,15 @@
                 <div class="field is-grouped">
                     <p class="control">
                         <a class="button is-medium" v-if="!$root.$data.config.hide_advanced && !$root.$data.metadata.preexisting_install && !advanced"
-                           v-on:click="advanced = true">Advanced...</a>
+                           v-on:click="advanced = true">{{ $t('select_packages.advanced') }}</a>
                     </p>
                     <p class="control">
                         <a class="button is-dark is-medium" v-if="!$root.$data.metadata.preexisting_install"
-                           v-on:click="install">Install</a>
+                           v-on:click="install">{{ $t('select_packages.install') }}</a>
                     </p>
                     <p class="control">
                         <a class="button is-dark is-medium" v-if="$root.$data.metadata.preexisting_install"
-                           v-on:click="install">Modify</a>
+                           v-on:click="install">{{ $t('select_packages.modify') }}</a>
                     </p>
                 </div>
             </div>
@@ -54,7 +54,7 @@
             <div class="field is-grouped is-left-floating is-bottom-floating">
                 <p class="control">
                     <a class="button is-medium" v-if="$root.$data.metadata.preexisting_install"
-                       v-on:click="go_back">Back</a>
+                       v-on:click="go_back">{{ $t('back') }}</a>
                 </p>
             </div>
         </div>

ui/yarn.lock

@@ -8116,6 +8116,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.15.0.tgz#9b11ef8e7a124f67cdf788c8c90a81f3606240ed"
+  integrity sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q==
+
 vue-loader@^15.7.0:
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.1.tgz#6ccacd4122aa80f69baaac08ff295a62e3aefcfd"