From d49c3ba3afd28a17b4866ef0a475d19c299b1771 Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Wed, 18 Jul 2018 14:28:41 +1000 Subject: [PATCH] I18n support, fixed version in footer --- src/frontend/js/app/cache.js | 4 +++- src/frontend/js/app/i18n.js | 25 ++++++++++++++++++++++++ src/frontend/js/app/main.js | 13 ++++++------- src/frontend/js/app/ui/footer/main.ejs | 6 ++++-- src/frontend/js/app/ui/footer/main.js | 4 ++-- src/frontend/js/app/ui/header/main.ejs | 8 ++++---- src/frontend/js/app/ui/header/main.js | 7 ++++--- src/frontend/js/i18n/messages.json | 27 ++++++++++++++++++++++++++ src/frontend/js/lib/marionette.js | 3 +++ webpack.config.js | 13 +++++++++++++ 10 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 src/frontend/js/app/i18n.js create mode 100644 src/frontend/js/i18n/messages.json diff --git a/src/frontend/js/app/cache.js b/src/frontend/js/app/cache.js index c34d6745..9e6534f1 100644 --- a/src/frontend/js/app/cache.js +++ b/src/frontend/js/app/cache.js @@ -3,7 +3,9 @@ const UserModel = require('../models/user'); let cache = { - User: new UserModel.Model() + User: new UserModel.Model(), + locale: 'en', + version: null }; module.exports = cache; diff --git a/src/frontend/js/app/i18n.js b/src/frontend/js/app/i18n.js new file mode 100644 index 00000000..f6ad7120 --- /dev/null +++ b/src/frontend/js/app/i18n.js @@ -0,0 +1,25 @@ +'use strict'; + +const Cache = ('./cache'); +const messages = require('../i18n/messages.json'); + +/** + * @param {String} namespace + * @param {String} key + * @param {Object} [data] + */ +module.exports = function (namespace, key, data) { + let locale = Cache.locale; + // check that the locale exists + if (typeof messages[locale] === 'undefined') { + locale = 'en'; + } + + if (typeof messages[locale][namespace] !== 'undefined' && typeof messages[locale][namespace][key] !== 'undefined') { + return messages[locale][namespace][key](data); + } else if (locale !== 'en' && typeof messages['en'][namespace] !== 'undefined' && typeof messages['en'][namespace][key] !== 'undefined') { + return messages['en'][namespace][key](data); + } + + return 'INVALID I18N: ' + namespace + '/' + key; +}; diff --git a/src/frontend/js/app/main.js b/src/frontend/js/app/main.js index b0104688..21cdbe34 100644 --- a/src/frontend/js/app/main.js +++ b/src/frontend/js/app/main.js @@ -9,6 +9,7 @@ const Router = require('./router'); const Api = require('./api'); const Tokens = require('./tokens'); const UI = require('./ui/main'); +const i18n = require('./i18n'); const App = Mn.Application.extend({ @@ -16,7 +17,6 @@ const App = Mn.Application.extend({ Api: Api, UI: null, Controller: Controller, - version: null, region: { el: '#app', @@ -24,7 +24,7 @@ const App = Mn.Application.extend({ }, onStart: function (app, options) { - console.log('Welcome to Nginx Proxy Manager'); + console.log(i18n('main', 'welcome')); // Check if token is coming through if (this.getParam('token')) { @@ -34,12 +34,12 @@ const App = Mn.Application.extend({ // Check if we are still logged in by refreshing the token Api.status() .then(result => { - this.version = [result.version.major, result.version.minor, result.version.revision].join('.'); + Cache.version = [result.version.major, result.version.minor, result.version.revision].join('.'); }) .then(Api.Tokens.refresh) .then(this.bootstrap) .then(() => { - console.info('You are logged in'); + console.info(i18n('main', 'logged-in', Cache.User.attributes)); this.bootstrapTimer(); this.refreshTokenTimer(); @@ -60,7 +60,6 @@ const App = Mn.Application.extend({ console.warn('Not logged in:', err.message); Controller.showLogin(); }); - }, History: { @@ -86,7 +85,7 @@ const App = Mn.Application.extend({ let ErrorView = Mn.View.extend({ tagName: 'section', id: 'error', - template: _.template('Error loading stuff. Please reload the app.') + template: _.template(i18n('main', 'unknown-error')) }); this.getRegion().show(new ErrorView()); @@ -130,7 +129,7 @@ const App = Mn.Application.extend({ Api.status() .then(result => { let version = [result.version.major, result.version.minor, result.version.revision].join('.'); - if (version !== this.version) { + if (version !== Cache.version) { document.location.reload(); } }) diff --git a/src/frontend/js/app/ui/footer/main.ejs b/src/frontend/js/app/ui/footer/main.ejs index 2a16c682..e7d0a28c 100644 --- a/src/frontend/js/app/ui/footer/main.ejs +++ b/src/frontend/js/app/ui/footer/main.ejs @@ -3,12 +3,14 @@
- v<%- getVersion() %> © 2018 jc21.com. Theme by Tabler + <%- i18n('footer', 'version', {version: getVersion()}) %> + <%= i18n('footer', 'copy', {url: 'https://jc21.com?utm_source=nginx-proxy-manager'}) %> + <%= i18n('footer', 'theme', {url: 'https://tabler.github.io/?utm_source=nginx-proxy-manager'}) %>
diff --git a/src/frontend/js/app/ui/footer/main.js b/src/frontend/js/app/ui/footer/main.js index 531ad816..5d00cad1 100644 --- a/src/frontend/js/app/ui/footer/main.js +++ b/src/frontend/js/app/ui/footer/main.js @@ -2,7 +2,7 @@ const Mn = require('backbone.marionette'); const template = require('./main.ejs'); -const App = require('../../main'); +const Cache = require('../../cache'); module.exports = Mn.View.extend({ className: 'container', @@ -10,7 +10,7 @@ module.exports = Mn.View.extend({ templateContext: { getVersion: function () { - return App.version; + return Cache.version || '0.0.0'; } } }); diff --git a/src/frontend/js/app/ui/header/main.ejs b/src/frontend/js/app/ui/header/main.ejs index 1dce8a64..28fa8dba 100644 --- a/src/frontend/js/app/ui/header/main.ejs +++ b/src/frontend/js/app/ui/header/main.ejs @@ -1,7 +1,7 @@
-   Nginx Proxy Manager +   <%- i18n('main', 'app') %>
@@ -9,16 +9,16 @@ - <%- getUserField('nickname', null) || getUserField('name', 'Unknown User') %> + <%- getUserField('nickname', null) || getUserField('name', i18n('main', 'unknown-user')) %> <%- getRole() %>
- Edit Details + <%- i18n('user', 'edit-details') %> - Change Password + <%- i18n('user', 'change-password') %>
diff --git a/src/frontend/js/app/ui/header/main.js b/src/frontend/js/app/ui/header/main.js index b30aa80e..f4a5c836 100644 --- a/src/frontend/js/app/ui/header/main.js +++ b/src/frontend/js/app/ui/header/main.js @@ -2,6 +2,7 @@ const $ = require('jquery'); const Mn = require('backbone.marionette'); +const i18n = require('../../i18n'); const Cache = require('../../cache'); const Controller = require('../../controller'); const Tokens = require('../../tokens'); @@ -50,15 +51,15 @@ module.exports = Mn.View.extend({ }, getRole: function () { - return Cache.User.isAdmin() ? 'Administrator' : 'Apache Helicopter'; + return i18n('roles', Cache.User.isAdmin() ? 'admin' : 'user'); }, getLogoutText: function () { if (Tokens.getTokenCount() > 1) { - return 'Sign back in as ' + Tokens.getNextTokenName(); + return i18n('main', 'sign-in-as', {name: Tokens.getNextTokenName()}); } - return 'Sign out'; + return i18n('main', 'sign-out'); } }, diff --git a/src/frontend/js/i18n/messages.json b/src/frontend/js/i18n/messages.json new file mode 100644 index 00000000..2f86bc68 --- /dev/null +++ b/src/frontend/js/i18n/messages.json @@ -0,0 +1,27 @@ +{ + "en": { + "main": { + "app": "Nginx Proxy Manager", + "welcome": "Welcome to Nginx Proxy Manager", + "logged-in": "You are logged in as {name}", + "unknown-error": "Error loading stuff. Please reload the app.", + "unknown-user": "Unknown User", + "sign-out": "Sign out", + "sign-in-as": "Sign back in as {name}" + }, + "user": { + "edit-details": "Edit Details", + "change-password": "Change Password" + }, + "roles": { + "admin": "Administrator", + "user": "Apache Helicopter" + }, + "footer": { + "fork-me": "Fork me on Github", + "copy": "© 2018 jc21.com.", + "version": "v{version}", + "theme": "Theme by Tabler" + } + } +} diff --git a/src/frontend/js/lib/marionette.js b/src/frontend/js/lib/marionette.js index bdb84f11..10c78431 100644 --- a/src/frontend/js/lib/marionette.js +++ b/src/frontend/js/lib/marionette.js @@ -4,6 +4,7 @@ const _ = require('underscore'); const Mn = require('backbone.marionette'); const moment = require('moment'); const numeral = require('numeral'); +const i18n = require('../app/i18n'); let render = Mn.Renderer.render; @@ -11,6 +12,8 @@ Mn.Renderer.render = function (template, data, view) { data = _.clone(data); + data.i18n = i18n; + /** * @param {Integer} number * @returns {String} diff --git a/webpack.config.js b/webpack.config.js index 0e96aad6..91fed7c7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -45,6 +45,19 @@ module.exports = { }, // other: + { + type: 'javascript/auto', // <= Set the module.type explicitly + test: /\bmessages\.json$/, + loader: 'messageformat-loader', + options: { + biDiSupport: false, + disablePluralKeyChecks: false, + formatters: null, + intlSupport: false, + locale: ['en'/*, 'es'*/], + strictNumberSign: false + } + }, { test: /\.js$/, exclude: /node_modules/,