Feature/i18n

.gitignore

@@ -1,3 +1,4 @@
+.DS_store
 # Logs
 logs
 *.log

README.md

@@ -37,7 +37,8 @@ These web pages are the "popup frame" that opens during the [app authorization p
   * [Possible deployments and structure](#possible-deployments-and-structure)
     + [Use Symbolic Links](#use-symbolic-links)
     + [Use a reverse proxy, example with NGINX](#use-a-reverse-proxy-example-with-nginx)
-  * [Assets & Visual Usage and Customization](#assets--visual-usage-and-customization)
+    + [Assets & Visual Usage and Customization](#assets--visual-usage-and-customization)
+  * [Translating](#translating)
 
 # Fork repository for GitHub pages
 
@@ -291,6 +292,14 @@ server {
 
 To customize assets and visual, you can refer to: [https://github.com/pryv/assets-pryv.me](https://github.com/pryv/assets-pryv.me).
 
+## Translating
+
+The Web app translation is managed by [Vue.js I18n plugin](https://kazupon.github.io/vue-i18n/)
+
+Configuration can be changed in `config/i18n.config.js` and locales can be found in `locales`. 
+
+To add a language, just copy and translate one of the `.json` file in locales and rebuild the Application.
+
 # License
 
 [Revised BSD license](https://github.com/pryv/documents/blob/master/license-bsd-revised.md)

config/i18n.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    locale: 'en',
+    fallbackLocale: 'en',
+    enableInSFC: true
+}

locales/en.json

@@ -0,0 +1,12 @@
+{
+  "lang": "English",
+  "global": {
+    "requiredField": "This field is required."
+  },
+  "signinHub": {
+    "title": "Signin Hub",
+    "userNameOrEmail": "Username or email",
+    "goToHomePage": "go to my homepage",
+    "signupMsg": "new to {serviceName} ? Create an account"
+  }
+}

locales/fr.json

@@ -0,0 +1,12 @@
+{
+  "lang": "Français",
+  "global": {
+    "requiredField": "Ce champ est requis."
+  },
+  "signinHub": {
+    "title": "Signin Hub",
+    "userNameOrEmail": "Identifiant ou email",
+    "goToHomePage": "aller à ma page d'entrée",
+    "signupMsg": "nouveau sur {serviceName} ? Creez un compte."
+  }
+}

package.json

@@ -33,6 +33,7 @@
     "mkdirp": "0",
     "pryv": "^2.0.7",
     "vue": "^2.5.2",
+    "vue-i18n": "^8.24.1",
     "vue-router": "^3.0.1",
     "vuetify": "^1.0.0"
   },

src/App.vue

@@ -9,6 +9,7 @@
     <v-app>
       <v-content>
         <v-container>
+          <LocaleChanger/>
           <img
             :src="logoSrcUrl"
             height="50px">
@@ -21,9 +22,13 @@
 
 <script>
 import Context from './context.js';
+import LocaleChanger from './components/views/bits/LocaleChanger';
 
 export default {
   name: 'App',
+  components: {
+    LocaleChanger,
+  },
   data: () => ({
     title: 'App-web-auth3',
     logoSrcUrl: null,

src/components/views/SigninHub.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Signin hub</h1>
+    <h1>{{ $t('signinHub.title') }}</h1>
 
     <v-form
       ref="form"
@@ -11,25 +11,26 @@
         id="usernameOrEmail"
         v-model="ctx.user.username"
         :rules="[rules.required]"
-        label="Username or email"/>
+        :label="$t('signinHub.userNameOrEmail')"/>
 
       <v-btn
         id="submitButton"
         :disabled="!validForm"
         @click="submit"
-      >Go to my homepage</v-btn>
+      >{{ $t('signinHub.goToHomePage') }}</v-btn>
 
     </v-form>
 
     <v-divider class="mt-3 mb-2"/>
-    <router-link :to="{ name: 'RegisterUser' }"><h3>New to {{ serviceInfo.name }} ? Create an account</h3></router-link>
+    <router-link :to="{ name: 'RegisterUser' }"><h3>{{ $t('signinHub.signupMsg', {serviceName: serviceInfo.name}) }}</h3></router-link>
 
     <Alerts
       :errorMsg="error"/>
   </div>
 </template>
 
 <script>
+import i18n from '../../i18n';
 import Alerts from './bits/Alerts';
 import Context from '../../context.js';
 import controllerFactory from '../controller/controller.js';
@@ -44,7 +45,7 @@ export default {
     ctx: {},
     c: null,
     rules: {
-      required: value => !!value || 'This field is required.',
+      required: value => !!value || i18n.t('global.requiredField'),
     },
     validForm: false,
     serviceInfo: {name: ''},

src/components/views/bits/LocaleChanger.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="LocaleChanger">
+    <select v-model="$i18n.locale">
+      <option
+        v-for="(lang, i) in langs"
+        :key="`Lang${i}`"
+        :value="lang">{{ $t('lang',lang) }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+
+import i18n from '../../../i18n';
+export default {
+  name: 'LocaleChanger',
+  data () {
+    return { langs: i18n.availableLocales };
+  },
+};
+</script>

src/i18n.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+const config = require('../config/i18n.config');
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: config.locale || 'en',
+  fallbackLocale: config.fallbackLocale || 'en',
+  messages: loadLocaleMessages(),
+});
+
+function loadLocaleMessages () {
+  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
+  const messages = {};
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
+    if (matched && matched.length > 1) {
+      const locale = matched[1];
+      messages[locale] = locales(key);
+    }
+  });
+  return messages;
+};
+
+export default i18n;

src/main.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+import i18n from './i18n';
 import App from './App';
 import router from './router';
 import Vuetify from 'vuetify';
@@ -12,6 +13,7 @@ Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
 new Vue({
+  i18n,
   el: '#app',
   router,
   components: { App },

src/router/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import i18n from '../i18n';
 import VueRouter from 'vue-router';
 import RegisterUser from '@/components/views/RegisterUser';
 import ResetPassword from '@/components/views/ResetPassword';
@@ -14,6 +15,7 @@ const path = (new URL(document.location)).pathname;
 const basePath = path.substring(0, path.lastIndexOf('/access/')) + '/' + Aliases.basePath;
 
 let Router = new VueRouter({
+  i18n,
   mode: 'history',
   base: basePath,
   routes: [