Certificates polish
This commit is contained in:
Jamie Curnow
18
src/frontend/js/app/nginx/certificates-list-item.ejs
Normal file
18
src/frontend/js/app/nginx/certificates-list-item.ejs
Normal file
@ -0,0 +1,18 @@
|
||||
<div>
|
||||
<% if (id === 'new') { %>
|
||||
<div class="title">
|
||||
<i class="fe fe-shield text-success"></i> Request a new SSL Certificate
|
||||
</div>
|
||||
<span class="description">with Let's Encrypt</span>
|
||||
<% } else if (id > 0) { %>
|
||||
<div class="title">
|
||||
<i class="fe fe-shield text-pink"></i> <%- provider === 'other' ? nice_name : domain_names.join(', ') %>
|
||||
</div>
|
||||
<span class="description"><%- i18n('ssl', provider) %> – Expires: <%- formatDbDate(expires_on, 'Do MMMM YYYY, h:mm a') %></span>
|
||||
<% } else { %>
|
||||
<div class="title">
|
||||
<i class="fe fe-shield-off text-danger"></i> None
|
||||
</div>
|
||||
<span class="description">This host will not use HTTPS</span>
|
||||
<% } %>
|
||||
</div>
|
||||
@ -1,12 +1,12 @@
|
||||
<div class="card">
|
||||
<div class="card-status bg-teal"></div>
|
||||
<div class="card-status bg-pink"></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) { %>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-outline-teal btn-sm ml-2 dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-outline-pink btn-sm ml-2 dropdown-toggle" data-toggle="dropdown">
|
||||
<%- i18n('certificates', 'add') %>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
|
||||
@ -57,7 +57,7 @@ module.exports = Mn.View.extend({
|
||||
title: App.i18n('certificates', 'empty'),
|
||||
subtitle: App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
|
||||
link: manage ? App.i18n('certificates', 'add') : null,
|
||||
btn_color: 'teal',
|
||||
btn_color: 'pink',
|
||||
permission: 'certificates',
|
||||
action: function () {
|
||||
App.Controller.showNginxCertificateForm();
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Access List</label>
|
||||
<label class="form-label"><%- i18n('proxy-hosts', 'access-list') %></label>
|
||||
<select name="access_list_id" class="form-control custom-select">
|
||||
<option value="0" selected="selected"><%- i18n('access-lists', 'public') %></option>
|
||||
</select>
|
||||
@ -64,76 +64,41 @@
|
||||
<!-- SSL -->
|
||||
<div role="tabpanel" class="tab-pane" id="ssl-options">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<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>
|
||||
<label class="form-label">SSL Certificate</label>
|
||||
<select name="certificate_id" class="form-control custom-select" placeholder="None">
|
||||
<option selected value="0" data-data="{"id":0}" <%- certificate_id ? '' : 'selected' %>>None</option>
|
||||
<option selected value="new" data-data="{"id":"new"}">Request a new SSL Certificate</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<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' %>>
|
||||
<input type="checkbox" class="custom-switch-input" name="ssl_forced" value="1"<%- ssl_forced ? ' checked' : '' %><%- certificate_id ? '' : ' 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="col-sm-12 col-md-12 letsencrypt">
|
||||
<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="col-sm-12 col-md-12 letsencrypt">
|
||||
<div class="form-group">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" name="meta[letsencrypt_agree]" value="1" required<%- getLetsencryptAgree() ? ' checked' : '' %>>
|
||||
<input type="checkbox" class="custom-switch-input" name="meta[letsencrypt_agree]" value="1" required>
|
||||
<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>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
const _ = require('underscore');
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const ProxyHostModel = require('../../../models/proxy-host');
|
||||
const template = require('./form.ejs');
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const ProxyHostModel = require('../../../models/proxy-host');
|
||||
const template = require('./form.ejs');
|
||||
const certListItemTemplate = require('../certificates-list-item.ejs');
|
||||
const Helpers = require('../../../lib/helpers');
|
||||
|
||||
require('jquery-serializejson');
|
||||
require('jquery-mask-plugin');
|
||||
@ -16,36 +17,28 @@ module.exports = Mn.View.extend({
|
||||
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'
|
||||
form: 'form',
|
||||
domain_names: 'input[name="domain_names"]',
|
||||
forward_ip: 'input[name="forward_ip"]',
|
||||
buttons: '.modal-footer button',
|
||||
cancel: 'button.cancel',
|
||||
save: 'button.save',
|
||||
certificate_select: 'select[name="certificate_id"]',
|
||||
ssl_options: '#ssl-options input',
|
||||
letsencrypt: '.letsencrypt'
|
||||
},
|
||||
|
||||
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.certificate_select': function () {
|
||||
let id = this.ui.certificate_select.val();
|
||||
if (id === 'new') {
|
||||
this.ui.letsencrypt.show().find('input').prop('disabled', false);
|
||||
} else {
|
||||
this.ui.letsencrypt.hide().find('input').prop('disabled', true);
|
||||
}
|
||||
|
||||
'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);
|
||||
let enabled = id === 'new' || parseInt(id, 10) > 0;
|
||||
this.ui.ssl_options.prop('disabled', !enabled).parents('.form-group').css('opacity', enabled ? 1 : 0.5);
|
||||
},
|
||||
|
||||
'click @ui.save': function (e) {
|
||||
@ -63,23 +56,30 @@ module.exports = Mn.View.extend({
|
||||
data.forward_port = parseInt(data.forward_port, 10);
|
||||
data.block_exploits = !!data.block_exploits;
|
||||
data.caching_enabled = !!data.caching_enabled;
|
||||
data.ssl_enabled = !!data.ssl_enabled;
|
||||
data.ssl_forced = !!data.ssl_forced;
|
||||
|
||||
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;
|
||||
// Check for any domain names containing wildcards, which are not allowed with letsencrypt
|
||||
if (data.certificate_id === 'new') {
|
||||
let domain_err = false;
|
||||
data.domain_names.map(function(name) {
|
||||
if (name.match(/\*/im)) {
|
||||
domain_err = true;
|
||||
}
|
||||
});
|
||||
|
||||
let must_require_ssl_files = require_ssl_files && !view.model.hasSslFiles('other');
|
||||
if (domain_err) {
|
||||
alert('Cannot request Let\'s Encrypt Certificate for wildcard domains');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
data.certificate_id = parseInt(data.certificate_id, 0);
|
||||
}
|
||||
|
||||
let method = App.Api.Nginx.ProxyHosts.create;
|
||||
let is_new = true;
|
||||
|
||||
if (this.model.get('id')) {
|
||||
// edit
|
||||
@ -88,55 +88,11 @@ module.exports = Mn.View.extend({
|
||||
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();
|
||||
@ -152,23 +108,20 @@ module.exports = Mn.View.extend({
|
||||
|
||||
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;
|
||||
return App.Cache.User.get('email');
|
||||
}
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
let view = this;
|
||||
|
||||
// IP Address
|
||||
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');
|
||||
|
||||
// Domain names
|
||||
this.ui.domain_names.selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
@ -181,6 +134,37 @@ module.exports = Mn.View.extend({
|
||||
},
|
||||
createFilter: /^(?:\*\.)?(?:[^.*]+\.?)+[^.]$/
|
||||
});
|
||||
|
||||
// Certificates
|
||||
this.ui.letsencrypt.hide();
|
||||
this.ui.certificate_select.selectize({
|
||||
valueField: 'id',
|
||||
labelField: 'nice_name',
|
||||
searchField: ['nice_name', 'domain_names'],
|
||||
create: false,
|
||||
preload: true,
|
||||
allowEmptyOption: true,
|
||||
render: {
|
||||
option: function (item) {
|
||||
item.i18n = App.i18n;
|
||||
item.formatDbDate = Helpers.formatDbDate;
|
||||
return certListItemTemplate(item);
|
||||
}
|
||||
},
|
||||
load: function (query, callback) {
|
||||
App.Api.Nginx.Certificates.getAll()
|
||||
.then(rows => {
|
||||
callback(rows);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
callback();
|
||||
});
|
||||
},
|
||||
onLoad: function () {
|
||||
view.ui.certificate_select[0].selectize.setValue(view.model.get('certificate_id'));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
|
||||
Reference in New Issue
Block a user