New Client: english translations and misc fixes (#8410)

* misc fixes and add english translations

* add tests

webpack/webpack.base.conf.js

@@ -19,6 +19,8 @@ var baseConfig = {
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       jquery: 'jquery/src/jquery',
+      website: path.resolve(__dirname, '../website'),
+      common: path.resolve(__dirname, '../website/common'),
       client: path.resolve(__dirname, '../website/client'),
       assets: path.resolve(__dirname, '../website/client/assets'),
       components: path.resolve(__dirname, '../website/client/components'),

website/client/components/SocialPage.vue

@@ -1,13 +1,10 @@
 <template lang="pug">
 .row
-
   .sixteen.wide.column
     .ui.secondary.menu
-      a.item
-        router-link(:to="{ name: 'tavern' }")
+      router-link.item(to="/social/tavern")
           | Tavern
-      a.item
-        router-link(:to="{ name: 'inbox' }")
+      router-link.item(to="/social/inbox")
           | Inbox
 
   .sixteen.wide.column

website/client/components/appMenu.vue

@@ -3,29 +3,29 @@
 #app-menu.ui.top.fixed.menu
   .header.item
     img(src="~assets/header/png/logo@3x.png")
-  router-link.item(to="/", exact) Tasks
+  router-link.item(to="/", exact) {{ $t('tasks') }}
   // .simple makes it possible to have a dropdown without JS
   .ui.simple.dropdown
-    router-link.item(to="/inventory", :class="{'router-link-active': $route.path.startsWith('/inventory')}") Inventory
+    router-link.item(to="/inventory", :class="{'active': $route.path.startsWith('/inventory')}") {{ $t('inventory') }}
     .menu
-      router-link.item(to="/inventory") Inventory
-      router-link.item(to="/inventory/stable") Stable
-      router-link.item(to="/inventory/equipment") Equipment
-  router-link.item(to="/market") Market
+      router-link.item(to="/inventory") {{ $t('inventory') }}
+      router-link.item(to="/inventory/stable") {{ $t('stable') }}
+      router-link.item(to="/inventory/equipment") {{ $t('equipment') }}
+  router-link.item(to="/market") {{ $t('market') }}
   .ui.simple.dropdown
-    router-link.item(to="/social/tavern", :class="{'router-link-active': $route.path.startsWith('/social')}") Social
+    router-link.item(to="/social/tavern", :class="{'active': $route.path.startsWith('/social')}") {{ $t('social') }}
     .menu
-      router-link.item(to="/social/tavern") Tavern
-      router-link.item(to="/social/inbox") Inbox
-      router-link.item(to="/social/challenges") Challenges
-      router-link.item(to="/social/party") Party
-      router-link.item(to="/social/guilds") Guilds
+      router-link.item(to="/social/tavern") {{ $t('tavern') }}
+      router-link.item(to="/social/inbox") {{ $t('inbox') }}
+      router-link.item(to="/social/challenges") {{ $t('challenges') }}
+      router-link.item(to="/social/party") {{ $t('party') }}
+      router-link.item(to="/social/guilds") {{ $t('guilds') }}
   .ui.simple.dropdown
-    router-link.item(to="/help", :class="{'router-link-active': $route.path.startsWith('/help')}") Help
+    router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}") {{ $t('help') }}
     .menu
-      router-link.item(to="/help/faq") Faq
-      router-link.item(to="/help/report-bug") Report a bug
-      router-link.item(to="/help/request-feature") Request a feature
+      router-link.item(to="/help/faq") {{ $t('faq') }}
+      router-link.item(to="/help/report-bug") {{ $t('reportBug') }}
+      router-link.item(to="/help/request-feature") {{ $t('requestAF') }}
   .right.menu
     .item.with-img
       img(src="~assets/header/png/gem@3x.png")
@@ -106,7 +106,7 @@
   margin-left: 10px;
 }
 
-.ui.menu .right.menu .ui.simple.dropdown > .item::before {
+#app-menu .ui.menu .right.menu .ui.simple.dropdown > .item::before {
   right: auto;
   left: 0;
 }
@@ -127,10 +127,14 @@
   background-color: #6133b4;
 }
 
-#app-menu > .item.router-link-active, #app-menu > .dropdown > .item.router-link-active {
+#app-menu > .item.active, #app-menu > .dropdown > .item.active {
   box-shadow: 0px -4px 0px #6133b4 inset;
 }
 
+#app-menu > .dropdown > .item.active {
+  // font-weight: normal;
+}
+
 #app-menu > .dropdown > .menu {
   border: none;
   background-color: rgba(0, 0, 0, 0.5); // transparent
@@ -148,6 +152,10 @@
   padding: 6px 0px 6px 20px !important;
 }
 
+#app-menu > .dropdown .menu > .item.active {
+  font-weight: normal !important;
+}
+
 #app-menu > .dropdown .menu > .item:hover {
   background: #4f2a93 !important; /* to override Semantic UI's !important */
 }

website/client/main.js

@@ -8,10 +8,14 @@ import AppComponent from './app';
 import router from './router';
 import store from './store';
 import './filters/registerGlobals';
+import i18n from './plugins/i18n';
+
+Vue.prototype.$t = () => 'tt';
+
+Vue.use(VueResource);
+Vue.use(i18n);
 
 // TODO just for the beginning
-Vue.use(VueResource);
-
 let authSettings = localStorage.getItem('habit-mobile-settings');
 
 if (authSettings) {

website/client/plugins/i18n.js

@@ -0,0 +1,22 @@
+// Plugin to expose globally a '$t' method that calls common/i18n.t.
+// Can be used in templates.
+
+import i18n from '../../common/script/i18n';
+// Load all english translations
+// TODO it's a workaround until proper translation loading works
+const context = require.context('../../common/locales/en', true, /\.(json)$/);
+const translations = {};
+
+context.keys().forEach(filename => {
+  Object.assign(translations, context(filename));
+});
+
+i18n.strings = translations;
+
+export default {
+  install (Vue) {
+    Vue.prototype.$t = function translateString () {
+      return i18n.t.apply(null, arguments);
+    };
+  },
+};

website/client/router.js

@@ -16,6 +16,7 @@ Vue.use(VueRouter);
 export default new VueRouter({
   mode: 'history',
   base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
+  linkActiveClass: 'active',
   routes: [
     { path: '/', component: UserTasks },
     {
@@ -34,11 +35,14 @@ export default new VueRouter({
       children: [
         { name: 'tavern', path: 'tavern', component: TavernPage },
         {
-          name: 'inbox',
           path: 'inbox',
           component: ParentPage,
           children: [
-            {path: '', component: InboxPage},
+            {
+              name: 'inbox',
+              path: '',
+              component: InboxPage,
+            },
             {
               name: 'conversation',
               path: 'conversation/:id',

website/server/controllers/top-level/pages.js

@@ -85,7 +85,7 @@ api.redirectExtensionsPage = {
   },
 };
 
-// All requests to /new_app (expect /new_app/static) should serve the new client in development
+// All requests to /new_app (except /new_app/static) should serve the new client in development
 if (IS_PROD && IS_NEW_CLIENT_ENABLED) {
   api.getNewClient = {
     method: 'GET',