v2.1.0 (#293)

* Fix wrapping when too many hosts are shown (#207)

* Update npm packages, fixes CVE-2019-10757

* Revert some breaking packages

* Major overhaul

- Docker buildx support in CI
- Cypress API Testing in CI
- Restructured folder layout (insert clean face meme)
- Added Swagger documentation and validate API against that (to be completed)
- Use common base image for all supported archs, which includes updated nginx with ipv6 support
- Updated certbot and changes required for it
- Large amount of Hosts names will wrap in UI
- Updated packages for frontend
- Version bump 2.1.0

* Updated documentation

* Fix JWT expire time going crazy. Now set to 1day

* Backend JS formatting rules

* Remove v1 importer, I doubt anyone is using v1 anymore

* Added backend formatting rules and enforce them
in Jenkins builds

* Fix CI, doesn't need a tty

* Thanks bcrypt. Why can't you just be normal.

* Cleanup after syntax check

Co-authored-by: Marcelo Castagna <margaale@users.noreply.github.com>

frontend/js/app/ui/footer/main.ejs

@@ -0,0 +1,16 @@
+<div class="row align-items-center flex-row-reverse">
+    <div class="col-auto ml-auto">
+        <div class="row align-items-center">
+            <div class="col-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                    <li class="list-inline-item"><a href="https://github.com/jc21/nginx-proxy-manager?utm_source=nginx-proxy-manager"><%- i18n('footer', 'fork-me') %></a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+        <%- i18n('main', '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'}) %>
+    </div>
+</div>

frontend/js/app/ui/footer/main.js

@@ -0,0 +1,14 @@
+const Mn       = require('backbone.marionette');
+const template = require('./main.ejs');
+const Cache    = require('../../cache');
+
+module.exports = Mn.View.extend({
+    className: 'container',
+    template:  template,
+
+    templateContext: {
+        getVersion: function () {
+            return Cache.version || '0.0.0';
+        }
+    }
+});

frontend/js/app/ui/header/main.ejs

@@ -0,0 +1,31 @@
+<div class="container">
+    <div class="d-flex">
+        <a class="navbar-brand" href="/">
+            <img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; <%- i18n('main', 'app') %>
+        </a>
+
+        <div class="d-flex align-items-center order-lg-2 ml-auto">
+            <div class="dropdown">
+                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
+                    <span class="avatar" style="background-image: url(<%- getUserField('avatar', '/images/default-avatar.jpg') %>)"></span>
+                    <span class="ml-2 d-none d-lg-block">
+                      <span class="text-default"><%- getUserField('nickname', null) || getUserField('name', i18n('main', 'unknown-user')) %></span>
+                      <small class="text-muted d-block mt-1"><%- getRole() %></small>
+                    </span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item edit-details" href="#">
+                        <i class="dropdown-icon fe fe-user"></i> <%- i18n('users', 'edit-details') %>
+                    </a>
+                    <a class="dropdown-item change-password" href="#">
+                        <i class="dropdown-icon fe fe-lock"></i> <%- i18n('users', 'change-password') %>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item logout" href="/logout">
+                        <i class="dropdown-icon fe fe-log-out"></i> <%- getLogoutText() %>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

frontend/js/app/ui/header/main.js

@@ -0,0 +1,67 @@
+const $          = require('jquery');
+const Mn         = require('backbone.marionette');
+const i18n       = require('../../i18n');
+const Cache      = require('../../cache');
+const Controller = require('../../controller');
+const Tokens     = require('../../tokens');
+const template   = require('./main.ejs');
+
+module.exports = Mn.View.extend({
+    id:        'header',
+    className: 'header',
+    template:  template,
+
+    ui: {
+        link:     'a',
+        details:  'a.edit-details',
+        password: 'a.change-password'
+    },
+
+    events: {
+        'click @ui.details': function (e) {
+            e.preventDefault();
+            Controller.showUserForm(Cache.User);
+        },
+
+        'click @ui.password': function (e) {
+            e.preventDefault();
+            Controller.showUserPasswordForm(Cache.User);
+        },
+
+        'click @ui.link': function (e) {
+            e.preventDefault();
+            let href = $(e.currentTarget).attr('href');
+
+            switch (href) {
+                case '/':
+                    Controller.showDashboard();
+                    break;
+                case '/logout':
+                    Controller.logout();
+                    break;
+            }
+        }
+    },
+
+    templateContext: {
+        getUserField: function (field, default_val) {
+            return Cache.User.get(field) || default_val;
+        },
+
+        getRole: function () {
+            return i18n('roles', Cache.User.isAdmin() ? 'admin' : 'user');
+        },
+
+        getLogoutText: function () {
+            if (Tokens.getTokenCount() > 1) {
+                return i18n('main', 'sign-in-as', {name: Tokens.getNextTokenName()});
+            }
+
+            return i18n('str', 'sign-out');
+        }
+    },
+
+    initialize: function () {
+        this.listenTo(Cache.User, 'change', this.render);
+    }
+});

frontend/js/app/ui/main.ejs

@@ -0,0 +1,19 @@
+<div class="page-main">
+    <div class="header" id="header">
+        <!-- Header View -->
+    </div>
+    <div id="menu">
+        <!-- Menu View -->
+    </div>
+    <div class="my-3 my-md-5">
+        <div id="app-content" class="container">
+            <!-- App View -->
+        </div>
+    </div>
+</div>
+
+<footer class="footer">
+    <!-- Footer View -->
+</footer>
+
+<div class="modal fade" id="modal-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"></div>

frontend/js/app/ui/main.js

@@ -0,0 +1,98 @@
+const Mn         = require('backbone.marionette');
+const template   = require('./main.ejs');
+const HeaderView = require('./header/main');
+const MenuView   = require('./menu/main');
+const FooterView = require('./footer/main');
+const Cache      = require('../cache');
+
+module.exports = Mn.View.extend({
+    id:          'app',
+    className:   'page',
+    template:    template,
+    modal_setup: false,
+
+    modal: null,
+
+    ui: {
+        modal: '#modal-dialog'
+    },
+
+    regions: {
+        header_region:      {
+            el:             '#header',
+            replaceElement: true
+        },
+        menu_region:        {
+            el:             '#menu',
+            replaceElement: true
+        },
+        footer_region:      '.footer',
+        app_content_region: '#app-content',
+        modal_region:       '#modal-dialog'
+    },
+
+    /**
+     * @param {Object}  view
+     */
+    showAppContent: function (view) {
+        this.showChildView('app_content_region', view);
+    },
+
+    /**
+     * @param {Object}    view
+     * @param {Function}  [show_callback]
+     * @param {Function}  [shown_callback]
+     */
+    showModalDialog: function (view, show_callback, shown_callback) {
+        this.showChildView('modal_region', view);
+        let modal = this.getRegion('modal_region').$el.modal('show');
+
+        modal.on('hidden.bs.modal', function (/*e*/) {
+            if (show_callback) {
+                modal.off('show.bs.modal', show_callback);
+            }
+
+            if (shown_callback) {
+                modal.off('shown.bs.modal', shown_callback);
+            }
+
+            modal.off('hidden.bs.modal');
+            view.destroy();
+        });
+
+        if (show_callback) {
+            modal.on('show.bs.modal', show_callback);
+        }
+
+        if (shown_callback) {
+            modal.on('shown.bs.modal', shown_callback);
+        }
+    },
+
+    /**
+     *
+     * @param {Function}  [hidden_callback]
+     */
+    closeModal: function (hidden_callback) {
+        let modal = this.getRegion('modal_region').$el.modal('hide');
+
+        if (hidden_callback) {
+            modal.on('hidden.bs.modal', hidden_callback);
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('header_region', new HeaderView({
+            model: Cache.User
+        }));
+
+        this.showChildView('menu_region', new MenuView());
+        this.showChildView('footer_region', new FooterView());
+    },
+
+    reset: function () {
+        this.getRegion('header_region').reset();
+        this.getRegion('footer_region').reset();
+        this.getRegion('modal_region').reset();
+    }
+});

frontend/js/app/ui/menu/main.ejs

@@ -0,0 +1,52 @@
+<div class="container">
+    <div class="row align-items-center">
+        <div class="col-lg order-lg-first">
+            <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
+                <li class="nav-item">
+                    <a href="/" class="nav-link"><i class="fe fe-home"></i> <%- i18n('menu', 'dashboard') %></a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a href="#" class="nav-link" data-toggle="dropdown"><i class="fe fe-monitor"></i> <%- i18n('menu', 'hosts') %></a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                        <% if (canShow('proxy_hosts')) { %>
+                        <a href="/nginx/proxy" class="dropdown-item "><%- i18n('proxy-hosts', 'title') %></a>
+                        <% } %>
+
+                        <% if (canShow('redirection_hosts')) { %>
+                        <a href="/nginx/redirection" class="dropdown-item "><%- i18n('redirection-hosts', 'title') %></a>
+                        <% } %>
+
+                        <% if (canShow('streams')) { %>
+                        <a href="/nginx/stream" class="dropdown-item "><%- i18n('streams', 'title') %></a>
+                        <% } %>
+
+                        <% if (canShow('dead_hosts')) { %>
+                        <a href="/nginx/404" class="dropdown-item "><%- i18n('dead-hosts', 'title') %></a>
+                        <% } %>
+                    </div>
+                </li>
+                <% if (canShow('access_lists')) { %>
+                <li class="nav-item">
+                    <a href="/nginx/access" class="nav-link"><i class="fe fe-lock"></i> <%- i18n('access-lists', 'title') %></a>
+                </li>
+                <% } %>
+                <% if (canShow('certificates')) { %>
+                <li class="nav-item">
+                    <a href="/nginx/certificates" class="nav-link"><i class="fe fe-shield"></i> <%- i18n('certificates', 'title') %></a>
+                </li>
+                <% } %>
+                <% if (isAdmin()) { %>
+                <li class="nav-item">
+                    <a href="/users" class="nav-link"><i class="fe fe-users"></i> <%- i18n('users', 'title') %></a>
+                </li>
+                <li class="nav-item">
+                    <a href="/audit-log" class="nav-link"><i class="fe fe-book-open"></i> <%- i18n('audit-log', 'title') %></a>
+                </li>
+                <li class="nav-item">
+                    <a href="/settings" class="nav-link"><i class="fe fe-settings"></i> <%- i18n('settings', 'title') %></a>
+                </li>
+                <% } %>
+            </ul>
+        </div>
+    </div>
+</div>

frontend/js/app/ui/menu/main.js

@@ -0,0 +1,39 @@
+const $          = require('jquery');
+const Mn         = require('backbone.marionette');
+const Controller = require('../../controller');
+const Cache      = require('../../cache');
+const template   = require('./main.ejs');
+
+module.exports = Mn.View.extend({
+    id:        'menu',
+    className: 'header collapse d-lg-flex p-0',
+    template:  template,
+
+    ui: {
+        links: 'a'
+    },
+
+    events: {
+        'click @ui.links': function (e) {
+            let href = $(e.currentTarget).attr('href');
+            if (href !== '#') {
+                e.preventDefault();
+                Controller.navigate(href, true);
+            }
+        }
+    },
+
+    templateContext: {
+        isAdmin: function () {
+            return Cache.User.isAdmin();
+        },
+
+        canShow: function (perm) {
+            return Cache.User.isAdmin() || Cache.User.canView(perm);
+        }
+    },
+
+    initialize: function () {
+        this.listenTo(Cache.User, 'change', this.render);
+    }
+});