i18n and improvements

src/frontend/js/app/users/list/item.ejs

@@ -6,26 +6,36 @@
 <td>
     <div><%- name %></div>
     <div class="small text-muted">
-        Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
+        <%- i18n('str', 'created-on', {date: formatDbDate(created_on, 'Do MMMM YYYY')}) %>
     </div>
 </td>
 <td>
     <div><%- email %></div>
 </td>
 <td>
-    <div><%- roles.join(', ') %></div>
+    <div>
+        <%
+        var r = [];
+        roles.map(function(role) {
+            if (role) {
+                r.push(i18n('roles', role));
+            }
+        });
+        %>
+        <%- r.join(', ') %>
+    </div>
 </td>
 <td class="text-center">
     <div class="item-action dropdown">
         <a href="#" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
         <div class="dropdown-menu dropdown-menu-right">
-            <a href="#" class="edit-user dropdown-item"><i class="dropdown-icon fe fe-edit"></i> Edit Details</a>
-            <a href="#" class="edit-permissions dropdown-item"><i class="dropdown-icon fe fe-shield"></i> Edit Permissions</a>
-            <a href="#" class="set-password dropdown-item"><i class="dropdown-icon fe fe-lock"></i> Set Password</a>
+            <a href="#" class="edit-user dropdown-item"><i class="dropdown-icon fe fe-edit"></i> <%- i18n('users', 'edit-details') %></a>
+            <a href="#" class="edit-permissions dropdown-item"><i class="dropdown-icon fe fe-shield"></i> <%- i18n('users', 'edit-permissions') %></a>
+            <a href="#" class="set-password dropdown-item"><i class="dropdown-icon fe fe-lock"></i> <%- i18n('users', 'change-password') %></a>
             <% if (!isSelf()) { %>
-            <a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</a>
+            <a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> <%- i18n('users', 'sign-in-as') %></a>
             <div class="dropdown-divider"></div>
-            <a href="#" class="delete-user dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> Delete User</a>
+            <a href="#" class="delete-user dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> <%- i18n('users', 'delete') %></a>
             <% } %>
         </div>
     </div>

src/frontend/js/app/users/list/item.js

@@ -1,11 +1,9 @@
 'use strict';
 
-const Mn         = require('backbone.marionette');
-const Controller = require('../../controller');
-const Api        = require('../../api');
-const Cache      = require('../../cache');
-const Tokens     = require('../../tokens');
-const template   = require('./item.ejs');
+const Mn       = require('backbone.marionette');
+const App      = require('../../main');
+const Tokens   = require('../../tokens');
+const template = require('./item.ejs');
 
 module.exports = Mn.View.extend({
     template: template,
@@ -22,31 +20,31 @@ module.exports = Mn.View.extend({
     events: {
         'click @ui.edit': function (e) {
             e.preventDefault();
-            Controller.showUserForm(this.model);
+            App.Controller.showUserForm(this.model);
         },
 
         'click @ui.permissions': function (e) {
             e.preventDefault();
-            Controller.showUserPermissions(this.model);
+            App.Controller.showUserPermissions(this.model);
         },
 
         'click @ui.password': function (e) {
             e.preventDefault();
-            Controller.showUserPasswordForm(this.model);
+            App.Controller.showUserPasswordForm(this.model);
         },
 
         'click @ui.delete': function (e) {
             e.preventDefault();
-            Controller.showUserDeleteConfirm(this.model);
+            App.Controller.showUserDeleteConfirm(this.model);
         },
 
         'click @ui.login': function (e) {
             e.preventDefault();
 
-            if (Cache.User.get('id') !== this.model.get('id')) {
+            if (App.Cache.User.get('id') !== this.model.get('id')) {
                 this.ui.login.prop('disabled', true).addClass('btn-disabled');
 
-                Api.Users.loginAs(this.model.get('id'))
+                App.Api.Users.loginAs(this.model.get('id'))
                     .then(res => {
                         Tokens.addToken(res.token, res.user.nickname || res.user.name);
                         window.location = '/';
@@ -62,7 +60,7 @@ module.exports = Mn.View.extend({
 
     templateContext: {
         isSelf: function () {
-            return Cache.User.get('id') === this.id;
+            return App.Cache.User.get('id') === this.id;
         }
     },
 

src/frontend/js/app/users/list/main.ejs

@@ -1,8 +1,8 @@
 <thead>
     <th width="30">&nbsp;</th>
-    <th>Name</th>
-    <th>Email</th>
-    <th>Roles</th>
+    <th><%- i18n('str', 'name') %></th>
+    <th><%- i18n('str', 'email') %></th>
+    <th><%- i18n('str', 'roles') %></th>
     <th>&nbsp;</th>
 </thead>
 <tbody>

src/frontend/js/app/users/list/main.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const Mn         = require('backbone.marionette');
-const ItemView   = require('./item');
-const template   = require('./main.ejs');
+const Mn       = require('backbone.marionette');
+const ItemView = require('./item');
+const template = require('./main.ejs');
 
 const TableBody = Mn.CollectionView.extend({
     tagName:   'tbody',

src/frontend/js/app/users/main.ejs

@@ -1,8 +1,8 @@
 <div class="card">
     <div class="card-header">
-        <h3 class="card-title">Users</h3>
+        <h3 class="card-title"><%- i18n('users', 'title') %></h3>
         <div class="card-options">
-            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-user">Add User</a>
+            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-user"><%- i18n('users', 'add') %></a>
         </div>
     </div>
     <div class="card-body no-padding min-100">

src/frontend/js/app/users/main.js

@@ -1,12 +1,11 @@
 'use strict';
 
-const Mn         = require('backbone.marionette');
-const UserModel  = require('../../models/user');
-const Api        = require('../api');
-const Controller = require('../controller');
-const ListView   = require('./list/main');
-const template   = require('./main.ejs');
-const ErrorView  = require('../error/main');
+const Mn        = require('backbone.marionette');
+const App       = require('../main');
+const UserModel = require('../../models/user');
+const ListView  = require('./list/main');
+const ErrorView = require('../error/main');
+const template  = require('./main.ejs');
 
 module.exports = Mn.View.extend({
     id:       'users',
@@ -25,14 +24,14 @@ module.exports = Mn.View.extend({
     events: {
         'click @ui.add': function (e) {
             e.preventDefault();
-            Controller.showUserForm(new UserModel.Model());
+            App.Controller.showUserForm(new UserModel.Model());
         }
     },
 
     onRender: function () {
         let view = this;
 
-        Api.Users.getAll(['permissions'])
+        App.Api.Users.getAll(['permissions'])
             .then(response => {
                 if (!view.isDestroyed() && response && response.length) {
                     view.showChildView('list_region', new ListView({
@@ -42,9 +41,11 @@ module.exports = Mn.View.extend({
             })
             .catch(err => {
                 view.showChildView('list_region', new ErrorView({
-                    code:      err.code,
-                    message:   err.message,
-                    retry:     function () { Controller.showUsers(); }
+                    code:    err.code,
+                    message: err.message,
+                    retry:   function () {
+                        App.Controller.showUsers();
+                    }
                 }));
 
                 console.error(err);