mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-06-18 18:16:26 +00:00
Default Site customisation and new Settings space (#91)
This commit is contained in:
@ -662,5 +662,34 @@ module.exports = {
|
||||
getHostStats: function () {
|
||||
return fetch('get', 'reports/hosts');
|
||||
}
|
||||
},
|
||||
|
||||
Settings: {
|
||||
|
||||
/**
|
||||
* @param {String} setting_id
|
||||
* @returns {Promise}
|
||||
*/
|
||||
getById: function (setting_id) {
|
||||
return fetch('get', 'settings/' + setting_id);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns {Promise}
|
||||
*/
|
||||
getAll: function () {
|
||||
return getAllObjects('settings');
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Object} data
|
||||
* @param {Number} data.id
|
||||
* @returns {Promise}
|
||||
*/
|
||||
update: function (data) {
|
||||
let id = data.id;
|
||||
delete data.id;
|
||||
return fetch('put', 'settings/' + id, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -383,6 +383,36 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Settings
|
||||
*/
|
||||
showSettings: function () {
|
||||
let controller = this;
|
||||
if (Cache.User.isAdmin()) {
|
||||
require(['./main', './settings/main'], (App, View) => {
|
||||
controller.navigate('/settings');
|
||||
App.UI.showAppContent(new View());
|
||||
});
|
||||
} else {
|
||||
this.showDashboard();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Settings Item Form
|
||||
*
|
||||
* @param model
|
||||
*/
|
||||
showSettingForm: function (model) {
|
||||
if (Cache.User.isAdmin()) {
|
||||
if (model.get('id') === 'default-site') {
|
||||
require(['./main', './settings/default-site/main'], function (App, View) {
|
||||
App.UI.showModalDialog(new View({model: model}));
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Logout
|
||||
*/
|
||||
|
@ -15,6 +15,7 @@ module.exports = AppRouter.default.extend({
|
||||
'nginx/access': 'showNginxAccess',
|
||||
'nginx/certificates': 'showNginxCertificates',
|
||||
'audit-log': 'showAuditLog',
|
||||
'settings': 'showSettings',
|
||||
'*default': 'showDashboard'
|
||||
}
|
||||
});
|
||||
|
77
src/frontend/js/app/settings/default-site/main.ejs
Normal file
77
src/frontend/js/app/settings/default-site/main.ejs
Normal file
@ -0,0 +1,77 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><%- i18n('settings', id) %></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">
|
||||
<div class="form-group">
|
||||
<div class="form-label"><%- description %></div>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input class="custom-control-input" name="value" value="congratulations" type="radio" required <%- value === 'congratulations' ? 'checked' : '' %>>
|
||||
<div class="custom-control-label"><%- i18n('settings', 'default-site-congratulations') %></div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input class="custom-control-input" name="value" value="404" type="radio" required <%- value === '404' ? 'checked' : '' %>>
|
||||
<div class="custom-control-label"><%- i18n('settings', 'default-site-404') %></div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input class="custom-control-input" name="value" value="redirect" type="radio" required <%- value === 'redirect' ? 'checked' : '' %>>
|
||||
<div class="custom-control-label"><%- i18n('settings', 'default-site-redirect') %></div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input class="custom-control-input" name="value" value="html" type="radio" required <%- value === 'html' ? 'checked' : '' %>>
|
||||
<div class="custom-control-label"><%- i18n('settings', 'default-site-html') %></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-12 option-item option-redirect">
|
||||
<div class="form-group">
|
||||
<div class="form-label">Redirect to</div>
|
||||
<input class="form-control redirect-input" name="meta[redirect]" placeholder="https://" type="url" value="<%- meta && typeof meta.redirect !== 'undefined' ? meta.redirect : '' %>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-12 option-item option-html">
|
||||
<div class="form-group">
|
||||
<label class="form-label">HTTP Status Code</label>
|
||||
<%
|
||||
var code = meta && typeof meta.http_code !== 'undefined' ? parseInt(meta.http_code, 10) : 200;
|
||||
var codes = [
|
||||
[200, 'OK'],
|
||||
[204, 'No Content'],
|
||||
[400, 'Bad Request'],
|
||||
[401, 'Unauthorized'],
|
||||
[403, 'Forbidden'],
|
||||
[404, 'Not Found'],
|
||||
[418, 'I\'m a Teapot'],
|
||||
[500, 'Internal Server Error'],
|
||||
[501, 'Not Implemented'],
|
||||
[502, 'Bad Gateway'],
|
||||
[503, 'Service Unavailable']
|
||||
];
|
||||
%>
|
||||
<select class="custom-select" name="meta[http_code]">
|
||||
<% codes.map(function(item) { %>
|
||||
<option value="<%- item[0] %>"<%- code === item[0] ? ' selected' : '' %>><%- item[0] %> - <%- item[1] %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">HTML Content</div>
|
||||
<textarea class="form-control text-monospace html-content" name="meta[html]" rows="6" placeholder="<!-- Enter your HTML here -->"><%- meta && typeof meta.html !== 'undefined' ? meta.html : '' %></textarea>
|
||||
</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>
|
71
src/frontend/js/app/settings/default-site/main.js
Normal file
71
src/frontend/js/app/settings/default-site/main.js
Normal file
@ -0,0 +1,71 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../../main');
|
||||
const template = require('./main.ejs');
|
||||
|
||||
require('jquery-serializejson');
|
||||
require('selectize');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
template: template,
|
||||
className: 'modal-dialog',
|
||||
|
||||
ui: {
|
||||
form: 'form',
|
||||
buttons: '.modal-footer button',
|
||||
cancel: 'button.cancel',
|
||||
save: 'button.save',
|
||||
options: '.option-item',
|
||||
value: 'input[name="value"]',
|
||||
redirect: '.redirect-input',
|
||||
html: '.html-content'
|
||||
},
|
||||
|
||||
events: {
|
||||
'change @ui.value': function (e) {
|
||||
let val = this.ui.value.filter(':checked').val();
|
||||
this.ui.options.hide();
|
||||
this.ui.options.filter('.option-' + val).show();
|
||||
},
|
||||
|
||||
'click @ui.save': function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let val = this.ui.value.filter(':checked').val();
|
||||
|
||||
// Clear redirect field before validation
|
||||
if (val !== 'redirect') {
|
||||
this.ui.redirect.val('').attr('required', false);
|
||||
} else {
|
||||
this.ui.redirect.attr('required', true);
|
||||
}
|
||||
|
||||
this.ui.html.attr('required', val === 'html');
|
||||
|
||||
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();
|
||||
data.id = this.model.get('id');
|
||||
|
||||
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
|
||||
App.Api.Settings.update(data)
|
||||
.then(result => {
|
||||
view.model.set(result);
|
||||
App.UI.closeModal();
|
||||
})
|
||||
.catch(err => {
|
||||
alert(err.message);
|
||||
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
this.ui.value.trigger('change');
|
||||
}
|
||||
});
|
21
src/frontend/js/app/settings/list/item.ejs
Normal file
21
src/frontend/js/app/settings/list/item.ejs
Normal file
@ -0,0 +1,21 @@
|
||||
<td>
|
||||
<div><%- name %></div>
|
||||
<div class="small text-muted">
|
||||
<%- description %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<% if (id === 'default-site') { %>
|
||||
<%- i18n('settings', 'default-site-' + value) %>
|
||||
<% } %>
|
||||
</div>
|
||||
</td>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
25
src/frontend/js/app/settings/list/item.js
Normal file
25
src/frontend/js/app/settings/list/item.js
Normal file
@ -0,0 +1,25 @@
|
||||
'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'
|
||||
},
|
||||
|
||||
events: {
|
||||
'click @ui.edit': function (e) {
|
||||
e.preventDefault();
|
||||
App.Controller.showSettingForm(this.model);
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.listenTo(this.model, 'change', this.render);
|
||||
}
|
||||
});
|
8
src/frontend/js/app/settings/list/main.ejs
Normal file
8
src/frontend/js/app/settings/list/main.ejs
Normal file
@ -0,0 +1,8 @@
|
||||
<thead>
|
||||
<th><%- i18n('str', 'name') %></th>
|
||||
<th><%- i18n('str', 'value') %></th>
|
||||
<th> </th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- items -->
|
||||
</tbody>
|
29
src/frontend/js/app/settings/list/main.js
Normal file
29
src/frontend/js/app/settings/list/main.js
Normal file
@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
this.showChildView('body', new TableBody({
|
||||
collection: this.collection
|
||||
}));
|
||||
}
|
||||
});
|
14
src/frontend/js/app/settings/main.ejs
Normal file
14
src/frontend/js/app/settings/main.ejs
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-status bg-teal"></div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><%- i18n('settings', 'title') %></h3>
|
||||
</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>
|
50
src/frontend/js/app/settings/main.js
Normal file
50
src/frontend/js/app/settings/main.js
Normal file
@ -0,0 +1,50 @@
|
||||
'use strict';
|
||||
|
||||
const Mn = require('backbone.marionette');
|
||||
const App = require('../main');
|
||||
const SettingModel = require('../../models/setting');
|
||||
const ListView = require('./list/main');
|
||||
const ErrorView = require('../error/main');
|
||||
const template = require('./main.ejs');
|
||||
|
||||
module.exports = Mn.View.extend({
|
||||
id: 'settings',
|
||||
template: template,
|
||||
|
||||
ui: {
|
||||
list_region: '.list-region',
|
||||
add: '.add-item',
|
||||
dimmer: '.dimmer'
|
||||
},
|
||||
|
||||
regions: {
|
||||
list_region: '@ui.list_region'
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
let view = this;
|
||||
|
||||
App.Api.Settings.getAll()
|
||||
.then(response => {
|
||||
if (!view.isDestroyed() && response && response.length) {
|
||||
view.showChildView('list_region', new ListView({
|
||||
collection: new SettingModel.Collection(response)
|
||||
}));
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
view.showChildView('list_region', new ErrorView({
|
||||
code: err.code,
|
||||
message: err.message,
|
||||
retry: function () {
|
||||
App.Controller.showSettings();
|
||||
}
|
||||
}));
|
||||
|
||||
console.error(err);
|
||||
})
|
||||
.then(() => {
|
||||
view.ui.dimmer.removeClass('active');
|
||||
});
|
||||
}
|
||||
});
|
@ -42,6 +42,9 @@
|
||||
<li class="nav-item">
|
||||
<a href="/audit-log" class="nav-link"><i class="fe fe-book-open"></i> <%- i18n('audit-log', 'title') %></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/settings" class="nav-link"><i class="fe fe-settings"></i> <%- i18n('settings', 'title') %></a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user