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

Certificates into their own section

Browse Source
This commit is contained in:
Jamie Curnow
2018-08-07 20:27:20 +10:00
parent 1c57ccdc87
commit c749a22b52
41 changed files with 599 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/js/app/nginx/access/list/item.ejs
View File

@ -26,7 +26,7 @@
<div><%- access_list_id ? access_list.name : i18n('str', 'public') %></div>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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">

146
src/frontend/js/app/nginx/certificates/form.ejs
View File

@ -1,118 +1,62 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><%- i18n('certificates', 'form-title', {id: id}) %></h5>
<h5 class="modal-title"><%- i18n('certificates', 'form-title', {provider: provider}) %></h5>
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
</div>
<div class="modal-body has-tabs">
<div class="modal-body">
<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 class="row">
<% if (provider === 'letsencrypt') { %>
<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 class="text-blue"><i class="fe fe-alert-triangle"></i> <%- i18n('ssl', 'hosts-warning') %></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-12 col-md-12">
<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 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 class="col-sm-12 col-md-12">
<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>
<% } else if (provider === 'other') { %>
<!-- Other -->
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label class="form-label"><%- i18n('str', 'name') %> <span class="form-required">*</span></label>
<input name="nice_name" type="text" class="form-control" placeholder="" value="<%- nice_name %>" required>
</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') %></div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="meta[other_ssl_certificate]" id="other_ssl_certificate" required>
<label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
</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 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" required>
<label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
</div>
</div>
</div>
</div>
<% } %>
</div>
</form>
</div>
<div class="modal-footer">

87
src/frontend/js/app/nginx/certificates/form.js
View File

@ -7,7 +7,6 @@ const CertificateModel = require('../../../models/certificate');
const template = require('./form.ejs');
require('jquery-serializejson');
require('jquery-mask-plugin');
require('selectize');
module.exports = Mn.View.extend({
@ -18,36 +17,14 @@ module.exports = Mn.View.extend({
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'
other_ssl_certificate_key: '#other_ssl_certificate_key'
},
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();
@ -58,66 +35,50 @@ module.exports = Mn.View.extend({
let view = this;
let data = this.ui.form.serializeJSON();
data.provider = this.model.get('provider');
// 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.meta !== 'undefined' && typeof data.meta.letsencrypt_agree !== 'undefined') {
data.meta.letsencrypt_agree = !!data.meta.letsencrypt_agree;
}
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');
let method = App.Api.Nginx.Certificates.create;
let is_new = true;
let ssl_files = [];
if (this.model.get('id')) {
// edit
is_new = false;
method = App.Api.Nginx.ProxyHosts.update;
method = App.Api.Nginx.Certificates.update;
data.id = this.model.get('id');
}
// check files are attached
if (require_ssl_files) {
if (this.model.get('provider') === 'other' && !this.model.hasSslFiles()) {
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;
}
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]});
ssl_files.push({name: '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;
}
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]});
ssl_files.push({name: 'certificate_key', file: this.ui.other_ssl_certificate_key[0].files[0]});
}
}
@ -134,7 +95,7 @@ module.exports = Mn.View.extend({
form_data.append(file.name, file.file);
});
return App.Api.Nginx.ProxyHosts.setCerts(view.model.get('id'), form_data)
return App.Api.Nginx.Certificates.upload(view.model.get('id'), form_data)
.then(result => {
view.model.set('meta', _.assign({}, view.model.get('meta'), result));
});
@ -143,7 +104,7 @@ module.exports = Mn.View.extend({
.then(() => {
App.UI.closeModal(function () {
if (is_new) {
App.Controller.showNginxProxy();
App.Controller.showNginxCertificates();
}
});
})
@ -165,14 +126,6 @@ module.exports = Mn.View.extend({
},
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,
@ -183,13 +136,13 @@ module.exports = Mn.View.extend({
text: input
};
},
createFilter: /^(?:\*\.)?(?:[^.*]+\.?)+[^.]$/
createFilter: /^(?:[^.*]+\.?)+[^.]$/
});
},
initialize: function (options) {
if (typeof options.model === 'undefined' || !options.model) {
this.model = new CertificateModel.Model();
this.model = new CertificateModel.Model({provider: 'letsencrypt'});
}
}
});

30
src/frontend/js/app/nginx/certificates/list/item.ejs
View File

@ -5,34 +5,32 @@
</td>
<td>
<div>
<% domain_names.map(function(host) {
%>
<span class="tag"><%- host %></span>
<%
});
%>
<% if (provider === 'letsencrypt') { %>
<% domain_names.map(function(host) {
%>
<span class="tag"><%- host %></span>
<%
});
%>
<% } else { %>
<%- nice_name %>
<% } %>
</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>
<%- i18n('ssl', provider) %>
</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 class="<%- isExpired() ? 'text-danger' : '' %>">
<%- formatDbDate(expires_on, 'Do MMMM YYYY, h:mm a') %>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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>

12
src/frontend/js/app/nginx/certificates/list/item.js
View File

@ -1,6 +1,7 @@
'use strict';
const Mn = require('backbone.marionette');
const moment = require('moment');
const App = require('../../../main');
const template = require('./item.ejs');
@ -9,16 +10,10 @@ module.exports = Mn.View.extend({
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);
@ -26,7 +21,10 @@ module.exports = Mn.View.extend({
},
templateContext: {
canManage: App.Cache.User.canManage('certificates')
canManage: App.Cache.User.canManage('certificates'),
isExpired: function () {
return moment(this.expires_on).isBefore(moment());
}
},
initialize: function () {

7
src/frontend/js/app/nginx/certificates/list/main.ejs
View File

@ -1,9 +1,8 @@
<thead>
<th width="30">&nbsp;</th>
<th><%- i18n('str', 'source') %></th>
<th><%- i18n('str', 'destination') %></th>
<th><%- i18n('str', 'ssl') %></th>
<th><%- i18n('str', 'access') %></th>
<th><%- i18n('str', 'name') %></th>
<th><%- i18n('all-hosts', 'cert-provider') %></th>
<th><%- i18n('str', 'expires') %></th>
<% if (canManage) { %>
<th>&nbsp;</th>
<% } %>

10
src/frontend/js/app/nginx/certificates/main.ejs
View File

@ -5,7 +5,15 @@
<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 class="dropdown">
<button type="button" class="btn btn-outline-teal btn-sm ml-2 dropdown-toggle" data-toggle="dropdown">
<%- i18n('certificates', 'add') %>
</button>
<div class="dropdown-menu">
<a class="dropdown-item add-item" data-cert="letsencrypt" href="#"><%- i18n('ssl', 'letsencrypt') %></a>
<a class="dropdown-item add-item" data-cert="other" href="#"><%- i18n('ssl', 'other') %></a>
</div>
</div>
<% } %>
</div>
</div>

3
src/frontend/js/app/nginx/certificates/main.js
View File

@ -26,7 +26,8 @@ module.exports = Mn.View.extend({
events: {
'click @ui.add': function (e) {
e.preventDefault();
App.Controller.showNginxCertificateForm();
let model = new CertificateModel.Model({provider: $(e.currentTarget).data('cert')});
App.Controller.showNginxCertificateForm(model);
},
'click @ui.help': function (e) {

4
src/frontend/js/app/nginx/dead/list/item.ejs
View File

@ -17,7 +17,7 @@
</div>
</td>
<td>
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
<div><%- certificate ? i18n('ssl', certificate.provider) : i18n('ssl', 'none') %></div>
</td>
<td>
<%
@ -31,7 +31,7 @@
<% } %>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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">

2
src/frontend/js/app/nginx/dead/main.js
View File

@ -42,7 +42,7 @@ module.exports = Mn.View.extend({
onRender: function () {
let view = this;
App.Api.Nginx.DeadHosts.getAll(['owner'])
App.Api.Nginx.DeadHosts.getAll(['owner', 'certificate'])
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {

4
src/frontend/js/app/nginx/proxy/list/item.ejs
View File

@ -20,7 +20,7 @@
<div class="text-monospace"><%- forward_ip %>:<%- forward_port %></div>
</td>
<td>
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
<div><%- certificate ? i18n('ssl', certificate.provider) : i18n('ssl', 'none') %></div>
</td>
<td>
<div><%- access_list_id ? access_list.name : i18n('str', 'public') %></div>
@ -37,7 +37,7 @@
<% } %>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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">

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

@ -42,7 +42,7 @@ module.exports = Mn.View.extend({
onRender: function () {
let view = this;
App.Api.Nginx.ProxyHosts.getAll(['owner', 'access_list'])
App.Api.Nginx.ProxyHosts.getAll(['owner', 'access_list', 'certificate'])
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {

4
src/frontend/js/app/nginx/redirection/list/item.ejs
View File

@ -20,7 +20,7 @@
<div class="text-monospace"><%- forward_domain_name %></div>
</td>
<td>
<div><%- ssl_enabled && ssl_provider ? i18n('ssl', ssl_provider) : i18n('ssl', 'none') %></div>
<div><%- certificate ? i18n('ssl', certificate.provider) : i18n('ssl', 'none') %></div>
</td>
<td>
<%
@ -34,7 +34,7 @@
<% } %>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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">

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

@ -42,7 +42,7 @@ module.exports = Mn.View.extend({
onRender: function () {
let view = this;
App.Api.Nginx.RedirectionHosts.getAll(['owner'])
App.Api.Nginx.RedirectionHosts.getAll(['owner', 'certificate'])
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {

2
src/frontend/js/app/nginx/stream/list/item.ejs
View File

@ -36,7 +36,7 @@
<% } %>
</td>
<% if (canManage) { %>
<td class="text-center">
<td class="text-right">
<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">