Certificates ui section and permissions
This commit is contained in:
Jamie Curnow
@ -4,8 +4,6 @@ const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
@ -22,7 +20,7 @@ module.exports = Mn.View.extend({
|
||||
'click @ui.save': function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
App.Api.Nginx.ProxyHosts.delete(this.model.get('id'))
|
||||
App.Api.Nginx.AccessLists.delete(this.model.get('id'))
|
||||
.then(() => {
|
||||
App.Controller.showNginxAccess();
|
||||
App.UI.closeModal();
|
||||
|
||||
19
src/frontend/js/app/nginx/certificates/delete.ejs
Normal file
19
src/frontend/js/app/nginx/certificates/delete.ejs
Normal file
@ -0,0 +1,19 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><%- i18n('certificates', 'delete') %></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">
|
||||
<%= i18n('certificates', 'delete-confirm') %>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal"><%- i18n('str', 'cancel') %></button>
|
||||
<button type="button" class="btn btn-danger save"><%- i18n('str', 'sure') %></button>
|
||||
</div>
|
||||
</div>
|
||||
34
src/frontend/js/app/nginx/certificates/delete.js
Normal file
34
src/frontend/js/app/nginx/certificates/delete.js
Normal file
@ -0,0 +1,34 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
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();
|
||||
|
||||
App.Api.Nginx.Certificates.delete(this.model.get('id'))
|
||||
.then(() => {
|
||||
App.Controller.showNginxCertificates();
|
||||
App.UI.closeModal();
|
||||
})
|
||||
.catch(err => {
|
||||
alert(err.message);
|
||||
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
122
src/frontend/js/app/nginx/certificates/form.ejs
Normal file
122
src/frontend/js/app/nginx/certificates/form.ejs
Normal file
@ -0,0 +1,122 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><%- i18n('certificates', 'form-title', {id: id}) %></h5>
|
||||
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal"> </button>
|
||||
</div>
|
||||
<div class="modal-body has-tabs">
|
||||
<form>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active"><i class="fe fe-zap"></i> <%- i18n('all-hosts', 'details') %></a></li>
|
||||
<li role="presentation" class="nav-item"><a href="#ssl-options" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link"><i class="fe fe-shield"></i> <%- i18n('str', 'ssl') %></a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<!-- 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"><%- i18n('all-hosts', '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"><%- i18n('proxy-hosts', 'forward-ip') %><span class="form-required">*</span></label>
|
||||
<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"><%- i18n('proxy-hosts', 'forward-port') %> <span class="form-required">*</span></label>
|
||||
<input name="forward_port" type="number" class="form-control text-monospace" placeholder="80" value="<%- forward_port %>" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SSL -->
|
||||
<div role="tabpanel" class="tab-pane" id="ssl-options">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" name="ssl_enabled" value="1"<%- ssl_enabled ? ' checked' : '' %>>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description"><%- i18n('all-hosts', 'enable-ssl') %></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" name="ssl_forced" value="1"<%- ssl_forced ? ' checked' : '' %><%- ssl_enabled ? '' : ' disabled' %>>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description"><%- i18n('all-hosts', 'force-ssl') %></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><%- i18n('all-hosts', 'cert-provider') %></label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="ssl_provider" value="letsencrypt" class="selectgroup-input"<%- ssl_provider !== 'other' ? ' checked' : '' %>>
|
||||
<span class="selectgroup-button"><%- i18n('ssl', 'letsencrypt') %></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="ssl_provider" value="other" class="selectgroup-input"<%- ssl_provider === 'other' ? ' checked' : '' %>>
|
||||
<span class="selectgroup-button"><%- i18n('ssl', 'other') %></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lets encrypt -->
|
||||
<div class="col-sm-12 col-md-12 letsencrypt-ssl">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><%- i18n('ssl', 'letsencrypt-email') %> <span class="form-required">*</span></label>
|
||||
<input name="meta[letsencrypt_email]" type="email" class="form-control" placeholder="" value="<%- getLetsencryptEmail() %>" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 letsencrypt-ssl">
|
||||
<div class="form-group">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" name="meta[letsencrypt_agree]" value="1" required<%- getLetsencryptAgree() ? ' checked' : '' %>>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description"><%= i18n('ssl', 'letsencrypt-agree', {url: 'https://letsencrypt.org/repository/'}) %> <span class="form-required">*</span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other -->
|
||||
<div class="col-sm-12 col-md-12 other-ssl">
|
||||
<div class="form-group">
|
||||
<div class="form-label"><%- i18n('all-hosts', 'other-certificate') %></div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="meta[other_ssl_certificate]" id="other_ssl_certificate">
|
||||
<label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 other-ssl">
|
||||
<div class="form-group">
|
||||
<div class="form-label"><%- i18n('all-hosts', 'other-certificate-key') %></div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="meta[other_ssl_certificate_key]" id="other_ssl_certificate_key">
|
||||
<label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal"><%- i18n('str', 'cancel') %></button>
|
||||
<button type="button" class="btn btn-teal save"><%- i18n('str', 'save') %></button>
|
||||
</div>
|
||||
</div>
|
||||
195
src/frontend/js/app/nginx/certificates/form.js
Normal file
195
src/frontend/js/app/nginx/certificates/form.js
Normal file
@ -0,0 +1,195 @@
|
||||
'use strict';
|
||||
|
||||
const _ = require('underscore');
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const CertificateModel = require('../../../models/certificate');
|
||||
const template = require('./form.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
require('jquery-mask-plugin');
|
||||
require('selectize');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
max_file_size: 5120,
|
||||
|
||||
ui: {
|
||||
form: 'form',
|
||||
domain_names: 'input[name="domain_names"]',
|
||||
forward_ip: 'input[name="forward_ip"]',
|
||||
buttons: '.modal-footer button',
|
||||
cancel: 'button.cancel',
|
||||
save: 'button.save',
|
||||
ssl_enabled: 'input[name="ssl_enabled"]',
|
||||
ssl_options: '#ssl-options input',
|
||||
ssl_provider: 'input[name="ssl_provider"]',
|
||||
other_ssl_certificate: '#other_ssl_certificate',
|
||||
other_ssl_certificate_key: '#other_ssl_certificate_key',
|
||||
|
||||
// SSL hiding and showing
|
||||
all_ssl: '.letsencrypt-ssl, .other-ssl',
|
||||
letsencrypt_ssl: '.letsencrypt-ssl',
|
||||
other_ssl: '.other-ssl'
|
||||
},
|
||||
|
||||
events: {
|
||||
'change @ui.ssl_enabled': function () {
|
||||
let enabled = this.ui.ssl_enabled.prop('checked');
|
||||
this.ui.ssl_options.not(this.ui.ssl_enabled).prop('disabled', !enabled).parents('.form-group').css('opacity', enabled ? 1 : 0.5);
|
||||
this.ui.ssl_provider.trigger('change');
|
||||
},
|
||||
|
||||
'change @ui.ssl_provider': function () {
|
||||
let enabled = this.ui.ssl_enabled.prop('checked');
|
||||
let provider = this.ui.ssl_provider.filter(':checked').val();
|
||||
this.ui.all_ssl.hide().find('input').prop('disabled', true);
|
||||
this.ui[provider + '_ssl'].show().find('input').prop('disabled', !enabled);
|
||||
},
|
||||
|
||||
'click @ui.save': function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.ui.form[0].checkValidity()) {
|
||||
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
|
||||
return;
|
||||
}
|
||||
|
||||
let view = this;
|
||||
let data = this.ui.form.serializeJSON();
|
||||
|
||||
// Manipulate
|
||||
data.forward_port = parseInt(data.forward_port, 10);
|
||||
_.map(data, function (item, idx) {
|
||||
if (typeof item === 'string' && item === '1') {
|
||||
item = true;
|
||||
} else if (typeof item === 'object' && item !== null) {
|
||||
_.map(item, function (item2, idx2) {
|
||||
if (typeof item2 === 'string' && item2 === '1') {
|
||||
item[idx2] = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
data[idx] = item;
|
||||
});
|
||||
|
||||
if (typeof data.domain_names === 'string' && data.domain_names) {
|
||||
data.domain_names = data.domain_names.split(',');
|
||||
}
|
||||
|
||||
let require_ssl_files = typeof data.ssl_enabled !== 'undefined' && data.ssl_enabled && typeof data.ssl_provider !== 'undefined' && data.ssl_provider === 'other';
|
||||
let ssl_files = [];
|
||||
let method = App.Api.Nginx.ProxyHosts.create;
|
||||
let is_new = true;
|
||||
|
||||
let must_require_ssl_files = require_ssl_files && !view.model.hasSslFiles('other');
|
||||
|
||||
if (this.model.get('id')) {
|
||||
// edit
|
||||
is_new = false;
|
||||
method = App.Api.Nginx.ProxyHosts.update;
|
||||
data.id = this.model.get('id');
|
||||
}
|
||||
|
||||
// check files are attached
|
||||
if (require_ssl_files) {
|
||||
if (!this.ui.other_ssl_certificate[0].files.length || !this.ui.other_ssl_certificate[0].files[0].size) {
|
||||
if (must_require_ssl_files) {
|
||||
alert('certificate file is not attached');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (this.ui.other_ssl_certificate[0].files[0].size > this.max_file_size) {
|
||||
alert('certificate file is too large (> 5kb)');
|
||||
return;
|
||||
}
|
||||
ssl_files.push({name: 'other_certificate', file: this.ui.other_ssl_certificate[0].files[0]});
|
||||
}
|
||||
|
||||
if (!this.ui.other_ssl_certificate_key[0].files.length || !this.ui.other_ssl_certificate_key[0].files[0].size) {
|
||||
if (must_require_ssl_files) {
|
||||
alert('certificate key file is not attached');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (this.ui.other_ssl_certificate_key[0].files[0].size > this.max_file_size) {
|
||||
alert('certificate key file is too large (> 5kb)');
|
||||
return;
|
||||
}
|
||||
ssl_files.push({name: 'other_certificate_key', file: this.ui.other_ssl_certificate_key[0].files[0]});
|
||||
}
|
||||
}
|
||||
|
||||
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
|
||||
method(data)
|
||||
.then(result => {
|
||||
view.model.set(result);
|
||||
|
||||
// Now upload the certs if we need to
|
||||
if (ssl_files.length) {
|
||||
let form_data = new FormData();
|
||||
|
||||
ssl_files.map(function (file) {
|
||||
form_data.append(file.name, file.file);
|
||||
});
|
||||
|
||||
return App.Api.Nginx.ProxyHosts.setCerts(view.model.get('id'), form_data)
|
||||
.then(result => {
|
||||
view.model.set('meta', _.assign({}, view.model.get('meta'), result));
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
App.UI.closeModal(function () {
|
||||
if (is_new) {
|
||||
App.Controller.showNginxProxy();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
alert(err.message);
|
||||
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
getLetsencryptEmail: function () {
|
||||
return typeof this.meta.letsencrypt_email !== 'undefined' ? this.meta.letsencrypt_email : App.Cache.User.get('email');
|
||||
},
|
||||
|
||||
getLetsencryptAgree: function () {
|
||||
return typeof this.meta.letsencrypt_agree !== 'undefined' ? this.meta.letsencrypt_agree : false;
|
||||
}
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
this.ui.forward_ip.mask('099.099.099.099', {
|
||||
clearIfNotMatch: true,
|
||||
placeholder: '000.000.000.000'
|
||||
});
|
||||
|
||||
this.ui.ssl_enabled.trigger('change');
|
||||
this.ui.ssl_provider.trigger('change');
|
||||
|
||||
this.ui.domain_names.selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
maxOptions: 15,
|
||||
create: function (input) {
|
||||
return {
|
||||
value: input,
|
||||
text: input
|
||||
};
|
||||
},
|
||||
createFilter: /^(?:\*\.)?(?:[^.*]+\.?)+[^.]$/
|
||||
});
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
if (typeof options.model === 'undefined' || !options.model) {
|
||||
this.model = new CertificateModel.Model();
|
||||
}
|
||||
}
|
||||
});
|
||||
40
src/frontend/js/app/nginx/certificates/list/item.ejs
Normal file
40
src/frontend/js/app/nginx/certificates/list/item.ejs
Normal file
@ -0,0 +1,40 @@
|
||||
<td class="text-center">
|
||||
<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>
|
||||
<% domain_names.map(function(host) {
|
||||
%>
|
||||
<span class="tag"><%- host %></span>
|
||||
<%
|
||||
});
|
||||
%>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
<%- i18n('str', 'created-on', {date: formatDbDate(created_on, 'Do MMMM YYYY')}) %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-monospace"><%- forward_ip %>:<%- forward_port %></div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
|
||||
</td>
|
||||
<td>
|
||||
<div><%- access_list_id ? access_list.name : i18n('str', '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 dropdown-item"><i class="dropdown-icon fe fe-edit"></i> <%- i18n('str', 'edit') %></a>
|
||||
<a href="#" class="logs dropdown-item"><i class="dropdown-icon fe fe-book"></i> <%- i18n('str', 'logs') %></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="delete dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> <%- i18n('str', 'delete') %></a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<% } %>
|
||||
35
src/frontend/js/app/nginx/certificates/list/item.js
Normal file
35
src/frontend/js/app/nginx/certificates/list/item.js
Normal file
@ -0,0 +1,35 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../../main');
|
||||
const template = require('./item.ejs');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
tagName: 'tr',
|
||||
|
||||
ui: {
|
||||
edit: 'a.edit',
|
||||
delete: 'a.delete'
|
||||
},
|
||||
|
||||
events: {
|
||||
'click @ui.edit': function (e) {
|
||||
e.preventDefault();
|
||||
App.Controller.showNginxCertificateForm(this.model);
|
||||
},
|
||||
|
||||
'click @ui.delete': function (e) {
|
||||
e.preventDefault();
|
||||
App.Controller.showNginxCertificateDeleteConfirm(this.model);
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('certificates')
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.listenTo(this.model, 'change', this.render);
|
||||
}
|
||||
});
|
||||
13
src/frontend/js/app/nginx/certificates/list/main.ejs
Normal file
13
src/frontend/js/app/nginx/certificates/list/main.ejs
Normal file
@ -0,0 +1,13 @@
|
||||
<thead>
|
||||
<th width="30"> </th>
|
||||
<th><%- i18n('str', 'source') %></th>
|
||||
<th><%- i18n('str', 'destination') %></th>
|
||||
<th><%- i18n('str', 'ssl') %></th>
|
||||
<th><%- i18n('str', 'access') %></th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- items -->
|
||||
</tbody>
|
||||
34
src/frontend/js/app/nginx/certificates/list/main.js
Normal file
34
src/frontend/js/app/nginx/certificates/list/main.js
Normal file
@ -0,0 +1,34 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../../main');
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('certificates')
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
this.showChildView('body', new TableBody({
|
||||
collection: this.collection
|
||||
}));
|
||||
}
|
||||
});
|
||||
20
src/frontend/js/app/nginx/certificates/main.ejs
Normal file
20
src/frontend/js/app/nginx/certificates/main.ejs
Normal file
@ -0,0 +1,20 @@
|
||||
<div class="card">
|
||||
<div class="card-status bg-teal"></div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><%- i18n('certificates', 'title') %></h3>
|
||||
<div class="card-options">
|
||||
<a href="#" class="btn btn-outline-secondary btn-sm ml-2 help"><i class="fe fe-help-circle"></i></a>
|
||||
<% if (showAddButton) { %>
|
||||
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item"><%- i18n('certificates', 'add') %></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>
|
||||
83
src/frontend/js/app/nginx/certificates/main.js
Normal file
83
src/frontend/js/app/nginx/certificates/main.js
Normal file
@ -0,0 +1,83 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const CertificateModel = require('../../../models/certificate');
|
||||
const ListView = require('./list/main');
|
||||
const ErrorView = require('../../error/main');
|
||||
const EmptyView = require('../../empty/main');
|
||||
const template = require('./main.ejs');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
id: 'nginx-certificates',
|
||||
template: template,
|
||||
|
||||
ui: {
|
||||
list_region: '.list-region',
|
||||
add: '.add-item',
|
||||
help: '.help',
|
||||
dimmer: '.dimmer'
|
||||
},
|
||||
|
||||
regions: {
|
||||
list_region: '@ui.list_region'
|
||||
},
|
||||
|
||||
events: {
|
||||
'click @ui.add': function (e) {
|
||||
e.preventDefault();
|
||||
App.Controller.showNginxCertificateForm();
|
||||
},
|
||||
|
||||
'click @ui.help': function (e) {
|
||||
e.preventDefault();
|
||||
App.Controller.showHelp(App.i18n('certificates', 'help-title'), App.i18n('certificates', 'help-content'));
|
||||
}
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
showAddButton: App.Cache.User.canManage('certificates')
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
let view = this;
|
||||
|
||||
App.Api.Nginx.Certificates.getAll(['owner'])
|
||||
.then(response => {
|
||||
if (!view.isDestroyed()) {
|
||||
if (response && response.length) {
|
||||
view.showChildView('list_region', new ListView({
|
||||
collection: new CertificateModel.Collection(response)
|
||||
}));
|
||||
} else {
|
||||
let manage = App.Cache.User.canManage('certificates');
|
||||
|
||||
view.showChildView('list_region', new EmptyView({
|
||||
title: App.i18n('certificates', 'empty'),
|
||||
subtitle: App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
|
||||
link: manage ? App.i18n('certificates', 'add') : null,
|
||||
btn_color: 'teal',
|
||||
permission: 'certificates',
|
||||
action: function () {
|
||||
App.Controller.showNginxCertificateForm();
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
view.showChildView('list_region', new ErrorView({
|
||||
code: err.code,
|
||||
message: err.message,
|
||||
retry: function () {
|
||||
App.Controller.showNginxCertificates();
|
||||
}
|
||||
}));
|
||||
|
||||
console.error(err);
|
||||
})
|
||||
.then(() => {
|
||||
view.ui.dimmer.removeClass('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -4,8 +4,6 @@ const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
@ -19,6 +19,17 @@
|
||||
<td>
|
||||
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
|
||||
</td>
|
||||
<td>
|
||||
<%
|
||||
var o = isOnline();
|
||||
if (o === true) { %>
|
||||
<span class="status-icon bg-success"></span> <%- i18n('str', 'online') %>
|
||||
<% } else if (o === false) { %>
|
||||
<span title="<%- getOfflineError() %>"><span class="status-icon bg-danger"></span> <%- i18n('str', 'offline') %></span>
|
||||
<% } else { %>
|
||||
<span class="status-icon bg-warning"></span> <%- i18n('str', 'unknown') %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% if (canManage) { %>
|
||||
<td class="text-center">
|
||||
<div class="item-action dropdown">
|
||||
|
||||
@ -26,7 +26,15 @@ module.exports = Mn.View.extend({
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('dead_hosts')
|
||||
canManage: App.Cache.User.canManage('dead_hosts'),
|
||||
|
||||
isOnline: function () {
|
||||
return typeof this.meta.nginx_online === 'undefined' ? null : this.meta.nginx_online;
|
||||
},
|
||||
|
||||
getOfflineError: function () {
|
||||
return this.meta.nginx_err || '';
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<th width="30"> </th>
|
||||
<th><%- i18n('str', 'source') %></th>
|
||||
<th><%- i18n('str', 'ssl') %></th>
|
||||
<th><%- i18n('str', 'status') %></th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
|
||||
@ -4,8 +4,6 @@ const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
@ -25,6 +25,17 @@
|
||||
<td>
|
||||
<div><%- access_list_id ? access_list.name : i18n('str', 'public') %></div>
|
||||
</td>
|
||||
<td>
|
||||
<%
|
||||
var o = isOnline();
|
||||
if (o === true) { %>
|
||||
<span class="status-icon bg-success"></span> <%- i18n('str', 'online') %>
|
||||
<% } else if (o === false) { %>
|
||||
<span title="<%- getOfflineError() %>"><span class="status-icon bg-danger"></span> <%- i18n('str', 'offline') %></span>
|
||||
<% } else { %>
|
||||
<span class="status-icon bg-warning"></span> <%- i18n('str', 'unknown') %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% if (canManage) { %>
|
||||
<td class="text-center">
|
||||
<div class="item-action dropdown">
|
||||
|
||||
@ -26,7 +26,15 @@ module.exports = Mn.View.extend({
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('proxy_hosts')
|
||||
canManage: App.Cache.User.canManage('proxy_hosts'),
|
||||
|
||||
isOnline: function () {
|
||||
return typeof this.meta.nginx_online === 'undefined' ? null : this.meta.nginx_online;
|
||||
},
|
||||
|
||||
getOfflineError: function () {
|
||||
return this.meta.nginx_err || '';
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<th><%- i18n('str', 'destination') %></th>
|
||||
<th><%- i18n('str', 'ssl') %></th>
|
||||
<th><%- i18n('str', 'access') %></th>
|
||||
<th><%- i18n('str', 'status') %></th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
|
||||
@ -4,8 +4,6 @@ const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
@ -22,6 +22,17 @@
|
||||
<td>
|
||||
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
|
||||
</td>
|
||||
<td>
|
||||
<%
|
||||
var o = isOnline();
|
||||
if (o === true) { %>
|
||||
<span class="status-icon bg-success"></span> <%- i18n('str', 'online') %>
|
||||
<% } else if (o === false) { %>
|
||||
<span title="<%- getOfflineError() %>"><span class="status-icon bg-danger"></span> <%- i18n('str', 'offline') %></span>
|
||||
<% } else { %>
|
||||
<span class="status-icon bg-warning"></span> <%- i18n('str', 'unknown') %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% if (canManage) { %>
|
||||
<td class="text-center">
|
||||
<div class="item-action dropdown">
|
||||
|
||||
@ -26,7 +26,15 @@ module.exports = Mn.View.extend({
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('redirection_hosts')
|
||||
canManage: App.Cache.User.canManage('redirection_hosts'),
|
||||
|
||||
isOnline: function () {
|
||||
return typeof this.meta.nginx_online === 'undefined' ? null : this.meta.nginx_online;
|
||||
},
|
||||
|
||||
getOfflineError: function () {
|
||||
return this.meta.nginx_err || '';
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<th><%- i18n('str', 'source') %></th>
|
||||
<th><%- i18n('str', 'destination') %></th>
|
||||
<th><%- i18n('str', 'ssl') %></th>
|
||||
<th><%- i18n('str', 'status') %></th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
|
||||
@ -4,8 +4,6 @@ const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./delete.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
@ -24,6 +24,17 @@
|
||||
<% } %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<%
|
||||
var o = isOnline();
|
||||
if (o === true) { %>
|
||||
<span class="status-icon bg-success"></span> <%- i18n('str', 'online') %>
|
||||
<% } else if (o === false) { %>
|
||||
<span title="<%- getOfflineError() %>"><span class="status-icon bg-danger"></span> <%- i18n('str', 'offline') %></span>
|
||||
<% } else { %>
|
||||
<span class="status-icon bg-warning"></span> <%- i18n('str', 'unknown') %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% if (canManage) { %>
|
||||
<td class="text-center">
|
||||
<div class="item-action dropdown">
|
||||
|
||||
@ -26,7 +26,15 @@ module.exports = Mn.View.extend({
|
||||
},
|
||||
|
||||
templateContext: {
|
||||
canManage: App.Cache.User.canManage('streams')
|
||||
canManage: App.Cache.User.canManage('streams'),
|
||||
|
||||
isOnline: function () {
|
||||
return typeof this.meta.nginx_online === 'undefined' ? null : this.meta.nginx_online;
|
||||
},
|
||||
|
||||
getOfflineError: function () {
|
||||
return this.meta.nginx_err || '';
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<th><%- i18n('streams', 'incoming-port') %></th>
|
||||
<th><%- i18n('str', 'destination') %></th>
|
||||
<th><%- i18n('streams', 'protocol') %></th>
|
||||
<th><%- i18n('str', 'status') %></th>
|
||||
<% if (canManage) { %>
|
||||
<th> </th>
|
||||
<% } %>
|
||||
|
||||
Reference in New Issue
Block a user