Skip to content

Commit 05f6a55

Browse files
chaptergychaptergy
committed
Adds frontend improvements and fixes
1 parent 2523424 commit 05f6a55

File tree

12 files changed

+147
-37
lines changed

12 files changed

+147
-37
lines changed

‎frontend/js/app/api.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function fetch(verb, path, data, options) {
5353
contentType: options.contentType || 'application/json; charset=UTF-8',
5454
processData: options.processData || true,
5555
crossDomain: true,
56-
timeout: options.timeout ? options.timeout : 30000,
56+
timeout: options.timeout ? options.timeout : 180000,
5757
xhrFields: {
5858
withCredentials: true
5959
},
@@ -586,8 +586,8 @@ module.exports = {
586586
/**
587587
* @param {Object} data
588588
*/
589-
create: function (data) {
590-
return fetch('post', 'nginx/certificates', data);
589+
create: function (data, timeout = 180000) {
590+
return fetch('post', 'nginx/certificates', data, {timeout});
591591
},
592592

593593
/**
@@ -630,8 +630,8 @@ module.exports = {
630630
* @param {Number} id
631631
* @returns {Promise}
632632
*/
633-
renew: function (id) {
634-
return fetch('post', 'nginx/certificates/' + id + '/renew');
633+
renew: function (id, timeout = 180000) {
634+
return fetch('post', 'nginx/certificates/' + id + '/renew', undefined, {timeout});
635635
}
636636
}
637637
},

‎frontend/js/app/nginx/certificates/form.ejs‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
<div class="modal-content">
22
<div class="modal-header">
33
<h5 class="modal-title"><%- i18n('certificates', 'form-title', {provider: provider}) %></h5>
4-
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
4+
<button type="button" class="close cancel non-loader-content" aria-label="Close" data-dismiss="modal">&nbsp;</button>
55
</div>
66
<div class="modal-body">
7-
<form>
7+
<div class="text-center loader-content">
8+
<div class="loader mx-auto my-6"></div>
9+
<p><%- i18n('ssl', 'obtaining-certificate-info') %></p>
10+
</div>
11+
<form class="non-loader-content">
812
<div class="row">
913
<% if (provider === 'letsencrypt') { %>
14+
<div class="col-sm-12 col-md-12">
15+
<div class="alert alert-danger" id="error-info" role="alert"></div>
16+
</div>
17+
1018
<div class="col-sm-12 col-md-12">
1119
<div class="form-group">
1220
<label class="form-label"><%- i18n('all-hosts', 'domain-names') %> <span class="form-required">*</span></label>
@@ -82,6 +90,10 @@
8290
<i class="fe fe-info"></i>
8391
<%= i18n('ssl', 'credentials-file-content-info') %>
8492
</div>
93+
<div class="text-red small">
94+
<i class="fe fe-alert-triangle"></i>
95+
<%= i18n('ssl', 'stored-as-plaintext-info') %>
96+
</div>
8597
</div>
8698
</div>
8799
</div>
@@ -158,7 +170,7 @@
158170
</div>
159171
</form>
160172
</div>
161-
<div class="modal-footer">
173+
<div class="modal-footer non-loader-content">
162174
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal"><%- i18n('str', 'cancel') %></button>
163175
<button type="button" class="btn btn-teal save"><%- i18n('str', 'save') %></button>
164176
</div>

‎frontend/js/app/nginx/certificates/form.js‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ module.exports = Mn.View.extend({
1616

1717
ui: {
1818
form: 'form',
19+
loader_content: '.loader-content',
20+
non_loader_content: '.non-loader-content',
21+
error_info: '#error-info',
1922
domain_names: 'input[name="domain_names"]',
2023
buttons: '.modal-footer button',
2124
cancel: 'button.cancel',
@@ -65,6 +68,7 @@ module.exports = Mn.View.extend({
6568

6669
'click @ui.save': function (e) {
6770
e.preventDefault();
71+
this.ui.error_info.hide();
6872

6973
if (!this.ui.form[0].checkValidity()) {
7074
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
@@ -93,12 +97,16 @@ module.exports = Mn.View.extend({
9397
}
9498

9599
// Manipulate
96-
if (typeof data.meta !== 'undefined' && typeof data.meta.letsencrypt_agree !== 'undefined') {
97-
data.meta.letsencrypt_agree = !!data.meta.letsencrypt_agree;
98-
}
100+
if (typeof data.meta === 'undefined') data.meta = {};
101+
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
102+
data.meta.dns_challenge = data.meta.dns_challenge == 1;
99103

100-
if (typeof data.meta !== 'undefined' && typeof data.meta.dns_challenge !== 'undefined') {
101-
data.meta.dns_challenge = !!data.meta.dns_challenge;
104+
if(!data.meta.dns_challenge){
105+
data.meta.dns_provider = undefined;
106+
data.meta.dns_provider_credentials = undefined;
107+
data.meta.propagation_seconds = undefined;
108+
} else {
109+
if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
102110
}
103111

104112
if (typeof data.domain_names === 'string' && data.domain_names) {
@@ -140,8 +148,8 @@ module.exports = Mn.View.extend({
140148
}
141149
}
142150

143-
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
144-
this.ui.save.addClass('btn-loading');
151+
this.ui.loader_content.show();
152+
this.ui.non_loader_content.hide();
145153

146154
// compile file data
147155
let form_data = new FormData();
@@ -159,7 +167,8 @@ module.exports = Mn.View.extend({
159167
}
160168
})
161169
.then(() => {
162-
return App.Api.Nginx.Certificates.create(data);
170+
const timeout = 180000 + (data.meta.propagation_seconds ? Number(data.meta.propagation_seconds) : 0);
171+
return App.Api.Nginx.Certificates.create(data, timeout);
163172
})
164173
.then(result => {
165174
view.model.set(result);
@@ -178,9 +187,16 @@ module.exports = Mn.View.extend({
178187
});
179188
})
180189
.catch(err => {
181-
alert(err.message);
182-
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
183-
this.ui.save.removeClass('btn-loading');
190+
try{
191+
const error_message = JSON.parse(err.debug).debug.stack.join("\n");
192+
this.ui.error_info[0].innerHTML = `<p>${err.message}</p><pre>${error_message}</pre>`;
193+
} catch(e) {
194+
this.ui.error_info[0].innerHTML = `<p>${err.message}</p>`;
195+
}
196+
this.ui.error_info.show();
197+
this.ui.le_error_info[0].scrollIntoView();
198+
this.ui.loader_content.hide();
199+
this.ui.non_loader_content.show();
184200
});
185201
},
186202
'change @ui.other_certificate_key': function(e){
@@ -233,6 +249,8 @@ module.exports = Mn.View.extend({
233249
});
234250
this.ui.dns_challenge_content.hide();
235251
this.ui.credentials_file_content.hide();
252+
this.ui.loader_content.hide();
253+
this.ui.error_info.hide();
236254
},
237255

238256
initialize: function (options) {

‎frontend/js/app/nginx/certificates/list/item.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</div>
2929
</td>
3030
<td>
31-
<%- i18n('ssl', provider) %><% if (meta.dns_provider) { %> - <% dns_providers[meta.dns_provider].display_name } %>
31+
<%- i18n('ssl', provider) %><% if (meta.dns_provider) { %> - <%- dns_providers[meta.dns_provider].display_name %><% } %>
3232
</td>
3333
<td class="<%- isExpired() ? 'text-danger' : '' %>">
3434
<%- formatDbDate(expires_on, 'Do MMMM YYYY, h:mm a') %>

‎frontend/js/app/nginx/dead/form.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
55
</div>
66
<div class="modal-body has-tabs">
7+
<div class="alert alert-danger mb-0 rounded-0" id="le-error-info" role="alert"></div>
78
<form>
89
<ul class="nav nav-tabs" role="tablist">
910
<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>
@@ -134,6 +135,10 @@
134135
<i class="fe fe-info"></i>
135136
<%= i18n('ssl', 'credentials-file-content-info') %>
136137
</div>
138+
<div class="text-red small">
139+
<i class="fe fe-alert-triangle"></i>
140+
<%= i18n('ssl', 'stored-as-plaintext-info') %>
141+
</div>
137142
</div>
138143
</div>
139144
</div>

‎frontend/js/app/nginx/dead/form.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = Mn.View.extend({
2020
buttons: '.modal-footer button',
2121
cancel: 'button.cancel',
2222
save: 'button.save',
23+
le_error_info: '#le-error-info',
2324
certificate_select: 'select[name="certificate_id"]',
2425
ssl_forced: 'input[name="ssl_forced"]',
2526
hsts_enabled: 'input[name="hsts_enabled"]',
@@ -116,6 +117,7 @@ module.exports = Mn.View.extend({
116117

117118
'click @ui.save': function (e) {
118119
e.preventDefault();
120+
this.ui.le_error_info.hide();
119121

120122
if (!this.ui.form[0].checkValidity()) {
121123
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
@@ -130,7 +132,18 @@ module.exports = Mn.View.extend({
130132
data.hsts_subdomains = !!data.hsts_subdomains;
131133
data.http2_support = !!data.http2_support;
132134
data.ssl_forced = !!data.ssl_forced;
133-
data.meta.dns_challenge = !!data.meta.dns_challenge;
135+
136+
if (typeof data.meta === 'undefined') data.meta = {};
137+
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
138+
data.meta.dns_challenge = data.meta.dns_challenge == 1;
139+
140+
if(!data.meta.dns_challenge){
141+
data.meta.dns_provider = undefined;
142+
data.meta.dns_provider_credentials = undefined;
143+
data.meta.propagation_seconds = undefined;
144+
} else {
145+
if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
146+
}
134147

135148
if (typeof data.domain_names === 'string' && data.domain_names) {
136149
data.domain_names = data.domain_names.split(',');
@@ -151,8 +164,6 @@ module.exports = Mn.View.extend({
151164
alert(i18n('ssl', 'no-wildcard-without-dns'));
152165
return;
153166
}
154-
155-
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';
156167
} else {
157168
data.certificate_id = parseInt(data.certificate_id, 10);
158169
}
@@ -181,7 +192,15 @@ module.exports = Mn.View.extend({
181192
});
182193
})
183194
.catch(err => {
184-
alert(err.message);
195+
let more_info = '';
196+
if(err.code === 500){
197+
try{
198+
more_info = JSON.parse(err.debug).debug.stack.join("\n");
199+
} catch(e) {}
200+
}
201+
this.ui.le_error_info[0].innerHTML = `${err.message}${more_info !== '' ? `<pre class="mt-3">${more_info}</pre>`:''}`;
202+
this.ui.le_error_info.show();
203+
this.ui.le_error_info[0].scrollIntoView();
185204
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
186205
this.ui.save.removeClass('btn-loading');
187206
});
@@ -225,6 +244,7 @@ module.exports = Mn.View.extend({
225244
});
226245

227246
// Certificates
247+
this.ui.le_error_info.hide();
228248
this.ui.dns_challenge_content.hide();
229249
this.ui.credentials_file_content.hide();
230250
this.ui.letsencrypt.hide();

‎frontend/js/app/nginx/proxy/form.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
55
</div>
66
<div class="modal-body has-tabs">
7+
<div class="alert alert-danger mb-0 rounded-0" id="le-error-info" role="alert"></div>
78
<form>
89
<ul class="nav nav-tabs" role="tablist">
910
<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>
@@ -202,6 +203,10 @@
202203
<i class="fe fe-info"></i>
203204
<%= i18n('ssl', 'credentials-file-content-info') %>
204205
</div>
206+
<div class="text-red small">
207+
<i class="fe fe-alert-triangle"></i>
208+
<%= i18n('ssl', 'stored-as-plaintext-info') %>
209+
</div>
205210
</div>
206211
</div>
207212
</div>

‎frontend/js/app/nginx/proxy/form.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ module.exports = Mn.View.extend({
2929
save: 'button.save',
3030
add_location_btn: 'button.add_location',
3131
locations_container: '.locations_container',
32+
le_error_info: '#le-error-info',
3233
certificate_select: 'select[name="certificate_id"]',
3334
access_list_select: 'select[name="access_list_id"]',
3435
ssl_forced: 'input[name="ssl_forced"]',
@@ -137,6 +138,7 @@ module.exports = Mn.View.extend({
137138

138139
'click @ui.save': function (e) {
139140
e.preventDefault();
141+
this.ui.le_error_info.hide();
140142

141143
if (!this.ui.form[0].checkValidity()) {
142144
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
@@ -165,7 +167,18 @@ module.exports = Mn.View.extend({
165167
data.hsts_enabled = !!data.hsts_enabled;
166168
data.hsts_subdomains = !!data.hsts_subdomains;
167169
data.ssl_forced = !!data.ssl_forced;
168-
data.meta.dns_challenge = !!data.meta.dns_challenge;
170+
171+
if (typeof data.meta === 'undefined') data.meta = {};
172+
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
173+
data.meta.dns_challenge = data.meta.dns_challenge == 1;
174+
175+
if(!data.meta.dns_challenge){
176+
data.meta.dns_provider = undefined;
177+
data.meta.dns_provider_credentials = undefined;
178+
data.meta.propagation_seconds = undefined;
179+
} else {
180+
if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
181+
}
169182

170183
if (typeof data.domain_names === 'string' && data.domain_names) {
171184
data.domain_names = data.domain_names.split(',');
@@ -186,8 +199,6 @@ module.exports = Mn.View.extend({
186199
alert(i18n('ssl', 'no-wildcard-without-dns'));
187200
return;
188201
}
189-
190-
data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';
191202
} else {
192203
data.certificate_id = parseInt(data.certificate_id, 10);
193204
}
@@ -216,7 +227,15 @@ module.exports = Mn.View.extend({
216227
});
217228
})
218229
.catch(err => {
219-
alert(err.message);
230+
let more_info = '';
231+
if(err.code === 500){
232+
try{
233+
more_info = JSON.parse(err.debug).debug.stack.join("\n");
234+
} catch(e) {}
235+
}
236+
this.ui.le_error_info[0].innerHTML = `${err.message}${more_info !== '' ? `<pre class="mt-3">${more_info}</pre>`:''}`;
237+
this.ui.le_error_info.show();
238+
this.ui.le_error_info[0].scrollIntoView();
220239
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
221240
this.ui.save.removeClass('btn-loading');
222241
});
@@ -293,6 +312,7 @@ module.exports = Mn.View.extend({
293312
});
294313

295314
// Certificates
315+
this.ui.le_error_info.hide();
296316
this.ui.dns_challenge_content.hide();
297317
this.ui.credentials_file_content.hide();
298318
this.ui.letsencrypt.hide();

‎frontend/js/app/nginx/redirection/form.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
55
</div>
66
<div class="modal-body has-tabs">
7+
<div class="alert alert-danger mb-0 rounded-0" id="le-error-info" role="alert"></div>
78
<form>
89
<ul class="nav nav-tabs" role="tablist">
910
<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>
@@ -158,6 +159,10 @@
158159
<i class="fe fe-info"></i>
159160
<%= i18n('ssl', 'credentials-file-content-info') %>
160161
</div>
162+
<div class="text-red small">
163+
<i class="fe fe-alert-triangle"></i>
164+
<%= i18n('ssl', 'stored-as-plaintext-info') %>
165+
</div>
161166
</div>
162167
</div>
163168
</div>

0 commit comments

Comments
 (0)