bastion/nginx-proxy-manager
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ongoing rewrite work

Browse Source
This commit is contained in:
Jamie Curnow
2018-07-09 11:22:10 +10:00
parent 30924a6922
commit 54d220a191
72 changed files with 3656 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/frontend/js/app/api.js
View File

@ -103,6 +103,26 @@ function makeExpansionString (expand) {
return items.join(',');
}
/**
* @param {String} path
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
function getAllObjects (path, expand, query) {
let params = [];
if (typeof expand === 'object' && expand !== null && expand.length) {
params.push('expand=' + makeExpansionString(expand));
}
if (typeof query === 'string') {
params.push('query=' + query);
}
return fetch('get', path + (params.length ? '?' + params.join('&') : ''));
}
module.exports = {
status: function () {
return fetch('get', '');
@ -168,17 +188,7 @@ module.exports = {
* @returns {Promise}
*/
getAll: function (expand, query) {
let params = [];
if (typeof expand === 'object' && expand !== null && expand.length) {
params.push('expand=' + makeExpansionString(expand));
}
if (typeof query === 'string') {
params.push('query=' + query);
}
return fetch('get', 'users' + (params.length ? '?' + params.join('&') : ''));
return getAllObjects('users', expand, query);
},
/**
@ -237,6 +247,64 @@ module.exports = {
}
},
Nginx: {
ProxyHosts: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('nginx/proxy-hosts', expand, query);
}
},
RedirectionHosts: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('nginx/redirection-hosts', expand, query);
}
},
Streams: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('nginx/streams', expand, query);
}
},
DeadHosts: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('nginx/dead-hosts', expand, query);
}
}
},
AccessLists: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('access-lists', expand, query);
}
},
Reports: {
/**
@ -244,6 +312,6 @@ module.exports = {
*/
getHostStats: function () {
return fetch('get', 'reports/hosts');
},
}
}
};

64
src/frontend/js/app/controller.js
View File

@ -124,60 +124,70 @@ module.exports = {
* Nginx Proxy Hosts
*/
showNginxProxy: function () {
let controller = this;
if (Cache.User.isAdmin() || Cache.User.canView('proxy_hosts')) {
let controller = this;
require(['./main', './nginx/proxy/main'], (App, View) => {
controller.navigate('/nginx/proxy');
App.UI.showAppContent(new View());
});
require(['./main', './nginx/proxy/main'], (App, View) => {
controller.navigate('/nginx/proxy');
App.UI.showAppContent(new View());
});
}
},
/**
* Nginx Redirection Hosts
*/
showNginxRedirection: function () {
let controller = this;
if (Cache.User.isAdmin() || Cache.User.canView('redirection_hosts')) {
let controller = this;
require(['./main', './nginx/redirection/main'], (App, View) => {
controller.navigate('/nginx/redirection');
App.UI.showAppContent(new View());
});
require(['./main', './nginx/redirection/main'], (App, View) => {
controller.navigate('/nginx/redirection');
App.UI.showAppContent(new View());
});
}
},
/**
* Nginx Stream Hosts
*/
showNginxStream: function () {
let controller = this;
if (Cache.User.isAdmin() || Cache.User.canView('streams')) {
let controller = this;
require(['./main', './nginx/stream/main'], (App, View) => {
controller.navigate('/nginx/stream');
App.UI.showAppContent(new View());
});
require(['./main', './nginx/stream/main'], (App, View) => {
controller.navigate('/nginx/stream');
App.UI.showAppContent(new View());
});
}
},
/**
* Nginx 404 Hosts
* Nginx Dead Hosts
*/
showNginx404: function () {
let controller = this;
showNginxDead: function () {
if (Cache.User.isAdmin() || Cache.User.canView('dead_hosts')) {
let controller = this;
require(['./main', './nginx/404/main'], (App, View) => {
controller.navigate('/nginx/404');
App.UI.showAppContent(new View());
});
require(['./main', './nginx/dead/main'], (App, View) => {
controller.navigate('/nginx/404');
App.UI.showAppContent(new View());
});
}
},
/**
* Nginx Access
*/
showNginxAccess: function () {
let controller = this;
if (Cache.User.isAdmin() || Cache.User.canView('access_lists')) {
let controller = this;
require(['./main', './nginx/access/main'], (App, View) => {
controller.navigate('/nginx/access');
App.UI.showAppContent(new View());
});
require(['./main', './nginx/access/main'], (App, View) => {
controller.navigate('/nginx/access');
App.UI.showAppContent(new View());
});
}
},
/**

22
src/frontend/js/app/dashboard/main.ejs
View File

@ -2,8 +2,10 @@
<h1 class="page-title">Hi <%- getUserName() %></h1>
</div>
<% if (columns) { %>
<div class="row">
<div class="col-sm-6 col-lg-3">
<% if (canShow('proxy_hosts')) { %>
<div class="col-sm-<%- 24 / columns %> col-lg-<%- 12 / columns %>">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-green mr-3">
@ -15,8 +17,10 @@
</div>
</div>
</div>
<% } %>
<div class="col-sm-6 col-lg-3">
<% if (canShow('redirection_hosts')) { %>
<div class="col-sm-<%- 24 / columns %> col-lg-<%- 12 / columns %>">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-yellow mr-3">
@ -28,8 +32,10 @@
</div>
</div>
</div>
<% } %>
<div class="col-sm-6 col-lg-3">
<% if (canShow('streams')) { %>
<div class="col-sm-<%- 24 / columns %> col-lg-<%- 12 / columns %>">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-blue mr-3">
@ -41,17 +47,21 @@
</div>
</div>
</div>
<% } %>
<div class="col-sm-6 col-lg-3">
<% if (canShow('dead_hosts')) { %>
<div class="col-sm-<%- 24 / columns %> col-lg-<%- 12 / columns %>">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-red mr-3">
<i class="fe fe-zap-off"></i>
</span>
<div>
<h4 class="m-0"><a href="/nginx/404"><%- getHostStat('404') %> <small>404 Hosts</small></a></h4>
<h4 class="m-0"><a href="/nginx/404"><%- getHostStat('dead') %> <small>404 Hosts</small></a></h4>
</div>
</div>
</div>
</div>
</div>
<% } %>
</div>
<% } %>

35
src/frontend/js/app/dashboard/main.js
View File

@ -10,6 +10,7 @@ const template = require('./main.ejs');
module.exports = Mn.View.extend({
template: template,
id: 'dashboard',
columns: 0,
stats: {},
@ -38,7 +39,13 @@ module.exports = Mn.View.extend({
}
return '-';
}
},
canShow: function (perm) {
return Cache.User.isAdmin() || Cache.User.canView(perm);
},
columns: view.columns
}
},
@ -57,5 +64,31 @@ module.exports = Mn.View.extend({
console.log(err);
});
}
},
/**
* @param {Object} [model]
*/
preRender: function (model) {
this.columns = 0;
// calculate the available columns based on permissions for the objects
// and store as a variable
//let view = this;
let perms = ['proxy_hosts', 'redirection_hosts', 'streams', 'dead_hosts'];
perms.map(perm => {
this.columns += Cache.User.isAdmin() || Cache.User.canView(perm) ? 1 : 0;
});
// Prevent double rendering on initial calls
if (typeof model !== 'undefined') {
this.render();
}
},
initialize: function () {
this.preRender();
this.listenTo(Cache.User, 'change', this.preRender);
}
});

11
src/frontend/js/app/empty/main.ejs Normal file
View File

@ -0,0 +1,11 @@
<% if (title) { %>
<h1 class="h2 mb-3"><%- title %></h1>
<% }
if (subtitle) { %>
<p class="h4 text-muted font-weight-normal mb-7"><%- subtitle %></p>
<% }
if (link) { %>
<a class="btn btn-teal" href="#"><%- link %></a>
<% } %>

30
src/frontend/js/app/empty/main.js Normal file
View File

@ -0,0 +1,30 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
className: 'text-center m-7',
template: template,
ui: {
action: 'a'
},
events: {
'click @ui.action': function (e) {
e.preventDefault();
this.getOption('action')();
}
},
templateContext: function () {
return {
title: this.getOption('title'),
subtitle: this.getOption('subtitle'),
link: this.getOption('link'),
action: typeof this.getOption('action') === 'function'
};
}
});

7
src/frontend/js/app/error/main.ejs Normal file
View File

@ -0,0 +1,7 @@
<i class="fe fe-alert-triangle mr-2" aria-hidden="true"></i>
<%= code ? '<strong>' + code + '</strong> &mdash; ' : '' %>
<%- message %>
<% if (retry) { %>
<br><br><a href="#" class="btn btn-sm btn-warning retry">Try again</a>
<% } %>

29
src/frontend/js/app/error/main.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
template: template,
className: 'alert alert-icon alert-warning m-5',
ui: {
retry: 'a.retry'
},
events: {
'click @ui.retry': function (e) {
e.preventDefault();
this.getOption('retry')();
}
},
templateContext: function () {
return {
message: this.getOption('message'),
code: this.getOption('code'),
retry: typeof this.getOption('retry') === 'function'
};
}
});

1
src/frontend/js/app/nginx/404/main.ejs
View File

@ -1 +0,0 @@
404

9
src/frontend/js/app/nginx/404/main.js
View File

@ -1,9 +0,0 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
template: template,
id: 'nginx-404'
});

32
src/frontend/js/app/nginx/dead/list/item.ejs Normal file
View File

@ -0,0 +1,32 @@
<td class="text-center">
<div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
<span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
</div>
</td>
<td>
<div><%- name %></div>
<div class="small text-muted">
Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
</div>
</td>
<td>
<div><%- email %></div>
</td>
<td>
<div><%- roles.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>
<% if (!isSelf()) { %>
<a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</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>
<% } %>
</div>
</div>
</td>

72
src/frontend/js/app/nginx/dead/list/item.js Normal file
View File

@ -0,0 +1,72 @@
'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');
module.exports = Mn.View.extend({
template: template,
tagName: 'tr',
ui: {
edit: 'a.edit-user',
permissions: 'a.edit-permissions',
password: 'a.set-password',
login: 'a.login',
delete: 'a.delete-user'
},
events: {
'click @ui.edit': function (e) {
e.preventDefault();
Controller.showUserForm(this.model);
},
'click @ui.permissions': function (e) {
e.preventDefault();
Controller.showUserPermissions(this.model);
},
'click @ui.password': function (e) {
e.preventDefault();
Controller.showUserPasswordForm(this.model);
},
'click @ui.delete': function (e) {
e.preventDefault();
Controller.showUserDeleteConfirm(this.model);
},
'click @ui.login': function (e) {
e.preventDefault();
if (Cache.User.get('id') !== this.model.get('id')) {
this.ui.login.prop('disabled', true).addClass('btn-disabled');
Api.Users.loginAs(this.model.get('id'))
.then(res => {
Tokens.addToken(res.token, res.user.nickname || res.user.name);
window.location = '/';
window.location.reload();
})
.catch(err => {
alert(err.message);
this.ui.login.prop('disabled', false).removeClass('btn-disabled');
});
}
}
},
templateContext: {
isSelf: function () {
return Cache.User.get('id') === this.id;
}
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
});

10
src/frontend/js/app/nginx/dead/list/main.ejs Normal file
View File

@ -0,0 +1,10 @@
<thead>
<th width="30">&nbsp;</th>
<th>Name</th>
<th>Email</th>
<th>Roles</th>
<th>&nbsp;</th>
</thead>
<tbody>
<!-- items -->
</tbody>

29
src/frontend/js/app/nginx/dead/list/main.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
const Mn = require('backbone.marionette');
const ItemView = require('./item');
const template = require('./main.ejs');
const TableBody = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ItemView
});
module.exports = Mn.View.extend({
tagName: 'table',
className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
template: template,
regions: {
body: {
el: 'tbody',
replaceElement: true
}
},
onRender: function () {
this.showChildView('body', new TableBody({
collection: this.collection
}));
}
});

16
src/frontend/js/app/nginx/dead/main.ejs Normal file
View File

@ -0,0 +1,16 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">404 Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add 404 Host</a>
</div>
</div>
<div class="card-body no-padding min-100">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content list-region">
<!-- List Region -->
</div>
</div>
</div>
</div>

70
src/frontend/js/app/nginx/dead/main.js Normal file
View File

@ -0,0 +1,70 @@
'use strict';
const Mn = require('backbone.marionette');
const DeadHostModel = require('../../../models/dead-host');
const Api = require('../../api');
const Controller = require('../../controller');
const ListView = require('./list/main');
const ErrorView = require('../../error/main');
const template = require('./main.ejs');
const EmptyView = require('../../empty/main');
module.exports = Mn.View.extend({
id: 'nginx-dead',
template: template,
ui: {
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
},
regions: {
list_region: '@ui.list_region'
},
events: {
'click @ui.add': function (e) {
e.preventDefault();
Controller.showNginxDeadForm();
}
},
onRender: function () {
let view = this;
Api.Nginx.DeadHosts.getAll()
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {
view.showChildView('list_region', new ListView({
collection: new DeadHostModel.Collection(response)
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no 404 Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add 404 Host',
action: function () {
Controller.showNginxDeadForm();
}
}));
}
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
Controller.showNginxDead();
}
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});

32
src/frontend/js/app/nginx/proxy/list/item.ejs Normal file
View File

@ -0,0 +1,32 @@
<td class="text-center">
<div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
<span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
</div>
</td>
<td>
<div><%- name %></div>
<div class="small text-muted">
Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
</div>
</td>
<td>
<div><%- email %></div>
</td>
<td>
<div><%- roles.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>
<% if (!isSelf()) { %>
<a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</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>
<% } %>
</div>
</div>
</td>

72
src/frontend/js/app/nginx/proxy/list/item.js Normal file
View File

@ -0,0 +1,72 @@
'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');
module.exports = Mn.View.extend({
template: template,
tagName: 'tr',
ui: {
edit: 'a.edit-user',
permissions: 'a.edit-permissions',
password: 'a.set-password',
login: 'a.login',
delete: 'a.delete-user'
},
events: {
'click @ui.edit': function (e) {
e.preventDefault();
Controller.showUserForm(this.model);
},
'click @ui.permissions': function (e) {
e.preventDefault();
Controller.showUserPermissions(this.model);
},
'click @ui.password': function (e) {
e.preventDefault();
Controller.showUserPasswordForm(this.model);
},
'click @ui.delete': function (e) {
e.preventDefault();
Controller.showUserDeleteConfirm(this.model);
},
'click @ui.login': function (e) {
e.preventDefault();
if (Cache.User.get('id') !== this.model.get('id')) {
this.ui.login.prop('disabled', true).addClass('btn-disabled');
Api.Users.loginAs(this.model.get('id'))
.then(res => {
Tokens.addToken(res.token, res.user.nickname || res.user.name);
window.location = '/';
window.location.reload();
})
.catch(err => {
alert(err.message);
this.ui.login.prop('disabled', false).removeClass('btn-disabled');
});
}
}
},
templateContext: {
isSelf: function () {
return Cache.User.get('id') === this.id;
}
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
});

10
src/frontend/js/app/nginx/proxy/list/main.ejs Normal file
View File

@ -0,0 +1,10 @@
<thead>
<th width="30">&nbsp;</th>
<th>Name</th>
<th>Email</th>
<th>Roles</th>
<th>&nbsp;</th>
</thead>
<tbody>
<!-- items -->
</tbody>

29
src/frontend/js/app/nginx/proxy/list/main.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
const Mn = require('backbone.marionette');
const ItemView = require('./item');
const template = require('./main.ejs');
const TableBody = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ItemView
});
module.exports = Mn.View.extend({
tagName: 'table',
className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
template: template,
regions: {
body: {
el: 'tbody',
replaceElement: true
}
},
onRender: function () {
this.showChildView('body', new TableBody({
collection: this.collection
}));
}
});

17
src/frontend/js/app/nginx/proxy/main.ejs
View File

@ -1 +1,16 @@
proxy
<div class="card">
<div class="card-header">
<h3 class="card-title">Proxy Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Proxy Host</a>
</div>
</div>
<div class="card-body no-padding min-100">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content list-region">
<!-- List Region -->
</div>
</div>
</div>
</div>

67
src/frontend/js/app/nginx/proxy/main.js
View File

@ -1,9 +1,70 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
const Mn = require('backbone.marionette');
const ProxyHostModel = require('../../../models/proxy-host');
const Api = require('../../api');
const Controller = require('../../controller');
const ListView = require('./list/main');
const ErrorView = require('../../error/main');
const template = require('./main.ejs');
const EmptyView = require('../../empty/main');
module.exports = Mn.View.extend({
id: 'nginx-proxy',
template: template,
id: 'nginx-proxy'
ui: {
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
},
regions: {
list_region: '@ui.list_region'
},
events: {
'click @ui.add': function (e) {
e.preventDefault();
Controller.showNginxProxyForm();
}
},
onRender: function () {
let view = this;
Api.Nginx.ProxyHosts.getAll()
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {
view.showChildView('list_region', new ListView({
collection: new ProxyHostModel.Collection(response)
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Proxy Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Proxy Host',
action: function () {
Controller.showNginxProxyForm();
}
}));
}
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
Controller.showNginxProxy();
}
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});

32
src/frontend/js/app/nginx/redirection/list/item.ejs Normal file
View File

@ -0,0 +1,32 @@
<td class="text-center">
<div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
<span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
</div>
</td>
<td>
<div><%- name %></div>
<div class="small text-muted">
Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
</div>
</td>
<td>
<div><%- email %></div>
</td>
<td>
<div><%- roles.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>
<% if (!isSelf()) { %>
<a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</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>
<% } %>
</div>
</div>
</td>

72
src/frontend/js/app/nginx/redirection/list/item.js Normal file
View File

@ -0,0 +1,72 @@
'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');
module.exports = Mn.View.extend({
template: template,
tagName: 'tr',
ui: {
edit: 'a.edit-user',
permissions: 'a.edit-permissions',
password: 'a.set-password',
login: 'a.login',
delete: 'a.delete-user'
},
events: {
'click @ui.edit': function (e) {
e.preventDefault();
Controller.showUserForm(this.model);
},
'click @ui.permissions': function (e) {
e.preventDefault();
Controller.showUserPermissions(this.model);
},
'click @ui.password': function (e) {
e.preventDefault();
Controller.showUserPasswordForm(this.model);
},
'click @ui.delete': function (e) {
e.preventDefault();
Controller.showUserDeleteConfirm(this.model);
},
'click @ui.login': function (e) {
e.preventDefault();
if (Cache.User.get('id') !== this.model.get('id')) {
this.ui.login.prop('disabled', true).addClass('btn-disabled');
Api.Users.loginAs(this.model.get('id'))
.then(res => {
Tokens.addToken(res.token, res.user.nickname || res.user.name);
window.location = '/';
window.location.reload();
})
.catch(err => {
alert(err.message);
this.ui.login.prop('disabled', false).removeClass('btn-disabled');
});
}
}
},
templateContext: {
isSelf: function () {
return Cache.User.get('id') === this.id;
}
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
});

10
src/frontend/js/app/nginx/redirection/list/main.ejs Normal file
View File

@ -0,0 +1,10 @@
<thead>
<th width="30">&nbsp;</th>
<th>Name</th>
<th>Email</th>
<th>Roles</th>
<th>&nbsp;</th>
</thead>
<tbody>
<!-- items -->
</tbody>

29
src/frontend/js/app/nginx/redirection/list/main.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
const Mn = require('backbone.marionette');
const ItemView = require('./item');
const template = require('./main.ejs');
const TableBody = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ItemView
});
module.exports = Mn.View.extend({
tagName: 'table',
className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
template: template,
regions: {
body: {
el: 'tbody',
replaceElement: true
}
},
onRender: function () {
this.showChildView('body', new TableBody({
collection: this.collection
}));
}
});

17
src/frontend/js/app/nginx/redirection/main.ejs
View File

@ -1 +1,16 @@
redirection
<div class="card">
<div class="card-header">
<h3 class="card-title">Redirection Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Redirection Host</a>
</div>
</div>
<div class="card-body no-padding min-100">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content list-region">
<!-- List Region -->
</div>
</div>
</div>
</div>

67
src/frontend/js/app/nginx/redirection/main.js
View File

@ -1,9 +1,70 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
const Mn = require('backbone.marionette');
const RedirectionHostModel = require('../../../models/redirection-host');
const Api = require('../../api');
const Controller = require('../../controller');
const ListView = require('./list/main');
const ErrorView = require('../../error/main');
const template = require('./main.ejs');
const EmptyView = require('../../empty/main');
module.exports = Mn.View.extend({
id: 'nginx-redirections',
template: template,
id: 'nginx-redirection'
ui: {
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
},
regions: {
list_region: '@ui.list_region'
},
events: {
'click @ui.add': function (e) {
e.preventDefault();
Controller.showNginxRedirectionForm();
}
},
onRender: function () {
let view = this;
Api.Nginx.RedirectionHosts.getAll()
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {
view.showChildView('list_region', new ListView({
collection: new RedirectionHostModel.Collection(response)
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Redirection Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Redirection Host',
action: function () {
Controller.showNginxRedirectionForm();
}
}));
}
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
Controller.showNginxRedirection();
}
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});

32
src/frontend/js/app/nginx/stream/list/item.ejs Normal file
View File

@ -0,0 +1,32 @@
<td class="text-center">
<div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
<span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
</div>
</td>
<td>
<div><%- name %></div>
<div class="small text-muted">
Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
</div>
</td>
<td>
<div><%- email %></div>
</td>
<td>
<div><%- roles.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>
<% if (!isSelf()) { %>
<a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</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>
<% } %>
</div>
</div>
</td>

72
src/frontend/js/app/nginx/stream/list/item.js Normal file
View File

@ -0,0 +1,72 @@
'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');
module.exports = Mn.View.extend({
template: template,
tagName: 'tr',
ui: {
edit: 'a.edit-user',
permissions: 'a.edit-permissions',
password: 'a.set-password',
login: 'a.login',
delete: 'a.delete-user'
},
events: {
'click @ui.edit': function (e) {
e.preventDefault();
Controller.showUserForm(this.model);
},
'click @ui.permissions': function (e) {
e.preventDefault();
Controller.showUserPermissions(this.model);
},
'click @ui.password': function (e) {
e.preventDefault();
Controller.showUserPasswordForm(this.model);
},
'click @ui.delete': function (e) {
e.preventDefault();
Controller.showUserDeleteConfirm(this.model);
},
'click @ui.login': function (e) {
e.preventDefault();
if (Cache.User.get('id') !== this.model.get('id')) {
this.ui.login.prop('disabled', true).addClass('btn-disabled');
Api.Users.loginAs(this.model.get('id'))
.then(res => {
Tokens.addToken(res.token, res.user.nickname || res.user.name);
window.location = '/';
window.location.reload();
})
.catch(err => {
alert(err.message);
this.ui.login.prop('disabled', false).removeClass('btn-disabled');
});
}
}
},
templateContext: {
isSelf: function () {
return Cache.User.get('id') === this.id;
}
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
});

10
src/frontend/js/app/nginx/stream/list/main.ejs Normal file
View File

@ -0,0 +1,10 @@
<thead>
<th width="30">&nbsp;</th>
<th>Name</th>
<th>Email</th>
<th>Roles</th>
<th>&nbsp;</th>
</thead>
<tbody>
<!-- items -->
</tbody>

29
src/frontend/js/app/nginx/stream/list/main.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
const Mn = require('backbone.marionette');
const ItemView = require('./item');
const template = require('./main.ejs');
const TableBody = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ItemView
});
module.exports = Mn.View.extend({
tagName: 'table',
className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
template: template,
regions: {
body: {
el: 'tbody',
replaceElement: true
}
},
onRender: function () {
this.showChildView('body', new TableBody({
collection: this.collection
}));
}
});

17
src/frontend/js/app/nginx/stream/main.ejs
View File

@ -1 +1,16 @@
stream
<div class="card">
<div class="card-header">
<h3 class="card-title">Streams</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Stream</a>
</div>
</div>
<div class="card-body no-padding min-100">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content list-region">
<!-- List Region -->
</div>
</div>
</div>
</div>

67
src/frontend/js/app/nginx/stream/main.js
View File

@ -1,9 +1,70 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
const Mn = require('backbone.marionette');
const StreamModel = require('../../../models/stream');
const Api = require('../../api');
const Controller = require('../../controller');
const ListView = require('./list/main');
const ErrorView = require('../../error/main');
const template = require('./main.ejs');
const EmptyView = require('../../empty/main');
module.exports = Mn.View.extend({
id: 'nginx-streams',
template: template,
id: 'nginx-stream'
ui: {
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
},
regions: {
list_region: '@ui.list_region'
},
events: {
'click @ui.add': function (e) {
e.preventDefault();
Controller.showNginxStreamForm();
}
},
onRender: function () {
let view = this;
Api.Nginx.RedirectionHosts.getAll()
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {
view.showChildView('list_region', new ListView({
collection: new StreamModel.Collection(response)
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Streams',
subtitle: 'Why don\'t you create one?',
link: 'Add Stream',
action: function () {
Controller.showNginxStreamForm();
}
}));
}
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
Controller.showNginxStream();
}
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});

2
src/frontend/js/app/router.js
View File

@ -10,7 +10,7 @@ module.exports = Mn.AppRouter.extend({
logout: 'logout',
'nginx/proxy': 'showNginxProxy',
'nginx/redirection': 'showNginxRedirection',
'nginx/404': 'showNginx404',
'nginx/404': 'showNginxDead',
'nginx/stream': 'showNginxStream',
'nginx/access': 'showNginxAccess',
'*default': 'showDashboard'

4
src/frontend/js/app/ui/header/main.js
View File

@ -51,5 +51,9 @@ module.exports = Mn.View.extend({
return 'Sign out';
}
},
initialize: function () {
this.listenTo(Cache.User, 'change', this.render);
}
});

13
src/frontend/js/app/ui/menu/main.ejs
View File

@ -8,15 +8,28 @@
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown"><i class="fe fe-monitor"></i> Hosts</a>
<div class="dropdown-menu dropdown-menu-arrow">
<% if (canShow('proxy_hosts')) { %>
<a href="/nginx/proxy" class="dropdown-item ">Proxy Hosts</a>
<% } %>
<% if (canShow('redirection_hosts')) { %>
<a href="/nginx/redirection" class="dropdown-item ">Redirections</a>
<% } %>
<% if (canShow('streams')) { %>
<a href="/nginx/stream" class="dropdown-item ">Streams</a>
<% } %>
<% if (canShow('dead_hosts')) { %>
<a href="/nginx/404" class="dropdown-item ">404 Hosts</a>
<% } %>
</div>
</li>
<% if (canShow('access_lists')) { %>
<li class="nav-item">
<a href="/nginx/access" class="nav-link"><i class="fe fe-lock"></i> Access Lists</a>
</li>
<% } %>
<% if (showUsers()) { %>
<li class="nav-item">
<a href="/users" class="nav-link"><i class="fe fe-users"></i> Users</a>

15
src/frontend/js/app/ui/menu/main.js
View File

@ -17,14 +17,25 @@ module.exports = Mn.View.extend({
events: {
'click @ui.links': function (e) {
e.preventDefault();
Controller.navigate($(e.currentTarget).attr('href'), true);
let href = $(e.currentTarget).attr('href');
if (href !== '#') {
e.preventDefault();
Controller.navigate(href, true);
}
}
},
templateContext: {
showUsers: 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);
}
});

24
src/frontend/js/app/users/main.js
View File

@ -8,12 +8,12 @@ const ListView = require('./list/main');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
id: 'users',
template: template,
id: 'users',
template: template,
ui: {
list_region: '.list-region',
add_user: '.add-user',
add: '.add-item',
dimmer: '.dimmer'
},
@ -22,7 +22,7 @@ module.exports = Mn.View.extend({
},
events: {
'click @ui.add_user': function (e) {
'click @ui.add': function (e) {
e.preventDefault();
Controller.showUserForm(new UserModel.Model());
}
@ -37,15 +37,19 @@ module.exports = Mn.View.extend({
view.showChildView('list_region', new ListView({
collection: new UserModel.Collection(response)
}));
// Remove loader
view.ui.dimmer.removeClass('active');
}
})
.catch(err => {
console.log(err);
//Controller.showError(err, 'Could not fetch Users');
//view.trigger('loaded');
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () { Controller.showUsers(); }
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});