Adds frontend improvements and fixes

This commit is contained in:
chaptergy
2020-10-06 14:49:02 +02:00
parent 2523424f68
commit 05f6a55a0b
12 changed files with 147 additions and 37 deletions

View File

@ -1,12 +1,20 @@
<div class="modal-content">
<div class="modal-header">
<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>
<button type="button" class="close cancel non-loader-content" aria-label="Close" data-dismiss="modal">&nbsp;</button>
</div>
<div class="modal-body">
<form>
<div class="text-center loader-content">
<div class="loader mx-auto my-6"></div>
<p><%- i18n('ssl', 'obtaining-certificate-info') %></p>
</div>
<form class="non-loader-content">
<div class="row">
<% if (provider === 'letsencrypt') { %>
<div class="col-sm-12 col-md-12">
<div class="alert alert-danger" id="error-info" role="alert"></div>
</div>
<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>
@ -82,6 +90,10 @@
<i class="fe fe-info"></i>
<%= i18n('ssl', 'credentials-file-content-info') %>
</div>
<div class="text-red small">
<i class="fe fe-alert-triangle"></i>
<%= i18n('ssl', 'stored-as-plaintext-info') %>
</div>
</div>
</div>
</div>
@ -158,7 +170,7 @@
</div>
</form>
</div>
<div class="modal-footer">
<div class="modal-footer non-loader-content">
<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>

View File

@ -16,6 +16,9 @@ module.exports = Mn.View.extend({
ui: {
form: 'form',
loader_content: '.loader-content',
non_loader_content: '.non-loader-content',
error_info: '#error-info',
domain_names: 'input[name="domain_names"]',
buttons: '.modal-footer button',
cancel: 'button.cancel',
@ -65,6 +68,7 @@ module.exports = Mn.View.extend({
'click @ui.save': function (e) {
e.preventDefault();
this.ui.error_info.hide();
if (!this.ui.form[0].checkValidity()) {
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
@ -93,12 +97,16 @@ module.exports = Mn.View.extend({
}
// Manipulate
if (typeof data.meta !== 'undefined' && typeof data.meta.letsencrypt_agree !== 'undefined') {
data.meta.letsencrypt_agree = !!data.meta.letsencrypt_agree;
}
if (typeof data.meta === 'undefined') data.meta = {};
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
data.meta.dns_challenge = data.meta.dns_challenge == 1;
if (typeof data.meta !== 'undefined' && typeof data.meta.dns_challenge !== 'undefined') {
data.meta.dns_challenge = !!data.meta.dns_challenge;
if(!data.meta.dns_challenge){
data.meta.dns_provider = undefined;
data.meta.dns_provider_credentials = undefined;
data.meta.propagation_seconds = undefined;
} else {
if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
}
if (typeof data.domain_names === 'string' && data.domain_names) {
@ -140,8 +148,8 @@ module.exports = Mn.View.extend({
}
}
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
this.ui.save.addClass('btn-loading');
this.ui.loader_content.show();
this.ui.non_loader_content.hide();
// compile file data
let form_data = new FormData();
@ -159,7 +167,8 @@ module.exports = Mn.View.extend({
}
})
.then(() => {
return App.Api.Nginx.Certificates.create(data);
const timeout = 180000 + (data.meta.propagation_seconds ? Number(data.meta.propagation_seconds) : 0);
return App.Api.Nginx.Certificates.create(data, timeout);
})
.then(result => {
view.model.set(result);
@ -178,9 +187,16 @@ module.exports = Mn.View.extend({
});
})
.catch(err => {
alert(err.message);
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
this.ui.save.removeClass('btn-loading');
try{
const error_message = JSON.parse(err.debug).debug.stack.join("\n");
this.ui.error_info[0].innerHTML = `<p>${err.message}</p><pre>${error_message}</pre>`;
} catch(e) {
this.ui.error_info[0].innerHTML = `<p>${err.message}</p>`;
}
this.ui.error_info.show();
this.ui.le_error_info[0].scrollIntoView();
this.ui.loader_content.hide();
this.ui.non_loader_content.show();
});
},
'change @ui.other_certificate_key': function(e){
@ -233,6 +249,8 @@ module.exports = Mn.View.extend({
});
this.ui.dns_challenge_content.hide();
this.ui.credentials_file_content.hide();
this.ui.loader_content.hide();
this.ui.error_info.hide();
},
initialize: function (options) {

View File

@ -28,7 +28,7 @@
</div>
</td>
<td>
<%- i18n('ssl', provider) %><% if (meta.dns_provider) { %> - <% dns_providers[meta.dns_provider].display_name } %>
<%- i18n('ssl', provider) %><% if (meta.dns_provider) { %> - <%- dns_providers[meta.dns_provider].display_name %><% } %>
</td>
<td class="<%- isExpired() ? 'text-danger' : '' %>">
<%- formatDbDate(expires_on, 'Do MMMM YYYY, h:mm a') %>