WIP
This commit is contained in:
Jamie Curnow
23
src/frontend/js/app/nginx/proxy/delete.ejs
Normal file
23
src/frontend/js/app/nginx/proxy/delete.ejs
Normal file
@ -0,0 +1,23 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete Proxy Host</h5>
|
||||
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal"> </button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
Are you sure you want to delete the Proxy host for: <strong><%- domain_names.join(', ') %></strong>?
|
||||
<% if (ssl_enabled) { %>
|
||||
<br><br>
|
||||
The SSL certificates attached will be removed, this action cannot be recovered.
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger save">Yes I'm Sure</button>
|
||||
</div>
|
||||
</div>
|
||||
38
src/frontend/js/app/nginx/proxy/delete.js
Normal file
38
src/frontend/js/app/nginx/proxy/delete.js
Normal file
@ -0,0 +1,38 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const template = require('./delete.ejs');
|
||||
const Controller = require('../../controller');
|
||||
const Api = require('../../api');
|
||||
const App = require('../../main');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
ui: {
|
||||
form: 'form',
|
||||
buttons: '.modal-footer button',
|
||||
cancel: 'button.cancel',
|
||||
save: 'button.save'
|
||||
},
|
||||
|
||||
events: {
|
||||
|
||||
'click @ui.save': function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Api.Nginx.ProxyHosts.delete(this.model.get('id'))
|
||||
.then(() => {
|
||||
Controller.showNginxProxy();
|
||||
App.UI.closeModal();
|
||||
})
|
||||
.catch(err => {
|
||||
alert(err.message);
|
||||
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -13,22 +13,23 @@
|
||||
<!-- Details -->
|
||||
<div role="tabpanel" class="tab-pane active" id="details">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Domain Name <span class="form-required">*</span></label>
|
||||
<input name="domain_name" type="text" class="form-control" placeholder="example.com or *.example.com" value="<%- domain_name %>" pattern="(\*\.)?[a-z0-9\.]+" required title="Please enter a valid domain name. Domain wildcards are allowed: *.yourdomain.com">
|
||||
<label class="form-label">Domain Names <span class="form-required">*</span></label>
|
||||
<input type="text" name="domain_names" class="form-control" id="input-domains" value="<%- domain_names.join(',') %>" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Forward IP <span class="form-required">*</span></label>
|
||||
<input type="text" name="forward_ip" class="form-control" placeholder="000.000.000.000" autocomplete="off" maxlength="15" required>
|
||||
<input type="text" name="forward_ip" class="form-control text-monospace" placeholder="000.000.000.000" value="<%- forward_ip %>" autocomplete="off" maxlength="15" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Forward Port <span class="form-required">*</span></label>
|
||||
<input name="forward_port" type="number" class="form-control" placeholder="80" value="<%- forward_port %>" required>
|
||||
<input name="forward_port" type="number" class="form-control text-monospace" placeholder="80" value="<%- forward_port %>" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,7 @@ const ProxyHostModel = require('../../../models/proxy-host');
|
||||
|
||||
require('jquery-serializejson');
|
||||
require('jquery-mask-plugin');
|
||||
require('selectize');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
@ -18,7 +19,7 @@ module.exports = Mn.View.extend({
|
||||
|
||||
ui: {
|
||||
form: 'form',
|
||||
domain_name: 'input[name="domain_name"]',
|
||||
domain_names: 'input[name="domain_names"]',
|
||||
forward_ip: 'input[name="forward_ip"]',
|
||||
buttons: '.modal-footer button',
|
||||
cancel: 'button.cancel',
|
||||
@ -73,6 +74,10 @@ module.exports = Mn.View.extend({
|
||||
data[idx] = item;
|
||||
});
|
||||
|
||||
if (typeof data.domain_names === 'string' && data.domain_names) {
|
||||
data.domain_names = data.domain_names.split(',');
|
||||
}
|
||||
|
||||
// Process
|
||||
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
|
||||
let method = Api.Nginx.ProxyHosts.create;
|
||||
@ -118,9 +123,18 @@ module.exports = Mn.View.extend({
|
||||
this.ui.ssl_enabled.trigger('change');
|
||||
this.ui.ssl_provider.trigger('change');
|
||||
|
||||
this.ui.domain_name[0].oninvalid = function () {
|
||||
this.setCustomValidity('Please enter a valid domain name. Domain wildcards are allowed: *.yourdomain.com');
|
||||
};
|
||||
this.ui.domain_names.selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
maxOptions: 15,
|
||||
create: function (input) {
|
||||
return {
|
||||
value: input,
|
||||
text: input
|
||||
};
|
||||
},
|
||||
createFilter: /^(?:\*\.)?(?:[^.*]+\.?)+[^.]$/
|
||||
});
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
|
||||
@ -1,32 +1,40 @@
|
||||
<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 class="avatar d-block" style="background-image: url(<%- owner.avatar || '/images/default-avatar.jpg' %>)" title="Owned by <%- owner.name %>">
|
||||
<span class="avatar-status <%- owner.is_disabled ? 'bg-red' : 'bg-green' %>"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- name %></div>
|
||||
<div>
|
||||
<% domain_names.map(function(host) {
|
||||
%>
|
||||
<span class="tag"><%- host %></span>
|
||||
<%
|
||||
});
|
||||
%>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- email %></div>
|
||||
<div class="text-monospace"><%- forward_ip %>:<%- forward_port %></div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- roles.join(', ') %></div>
|
||||
<div><%- ssl_enabled && ssl_provider ? ssl_provider : 'HTTP only' %></div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- access_list_id ? access_list.name : 'Public' %></div>
|
||||
</td>
|
||||
<% if (canManage) { %>
|
||||
<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>
|
||||
<a href="#" class="edit dropdown-item"><i class="dropdown-icon fe fe-edit"></i> Edit</a>
|
||||
<a href="#" class="logs dropdown-item"><i class="dropdown-icon fe fe-book"></i> Logs</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 dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<% } %>
|
||||
@ -4,7 +4,6 @@ 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({
|
||||
@ -12,58 +11,24 @@ module.exports = Mn.View.extend({
|
||||
tagName: 'tr',
|
||||
|
||||
ui: {
|
||||
edit: 'a.edit-user',
|
||||
permissions: 'a.edit-permissions',
|
||||
password: 'a.set-password',
|
||||
login: 'a.login',
|
||||
delete: 'a.delete-user'
|
||||
edit: 'a.edit',
|
||||
delete: 'a.delete'
|
||||
},
|
||||
|
||||
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);
|
||||
Controller.showNginxProxyForm(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');
|
||||
});
|
||||
}
|
||||
Controller.showNginxProxyDeleteConfirm(this.model);
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
isSelf: function () {
|
||||
return Cache.User.get('id') === this.id;
|
||||
}
|
||||
canManage: Cache.User.canManage('proxy_hosts')
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<thead>
|
||||
<th width="30"> </th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Roles</th>
|
||||
<th>Source</th>
|
||||
<th>Destination</th>
|
||||
<th>SSL</th>
|
||||
<th>Access</th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- items -->
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
'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 Cache = require('../../../cache');
|
||||
|
||||
const TableBody = Mn.CollectionView.extend({
|
||||
tagName: 'tbody',
|
||||
@ -21,6 +22,10 @@ module.exports = Mn.View.extend({
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: Cache.User.canManage('proxy_hosts')
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
this.showChildView('body', new TableBody({
|
||||
collection: this.collection
|
||||
|
||||
@ -38,7 +38,7 @@ module.exports = Mn.View.extend({
|
||||
onRender: function () {
|
||||
let view = this;
|
||||
|
||||
Api.Nginx.ProxyHosts.getAll()
|
||||
Api.Nginx.ProxyHosts.getAll(['owner', 'access_list'])
|
||||
.then(response => {
|
||||
if (!view.isDestroyed()) {
|
||||
if (response && response.length) {
|
||||
|
||||
Reference in New Issue
Block a user