ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-04 01:15:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add basic functionality to front end

Browse Source
This commit is contained in:
Kyle Klaus
2020-04-10 17:33:14 -07:00
parent f990d3f674
commit 46a9f5cb96
7 changed files with 111 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/js/app/nginx/access/form.ejs
View File

@@ -3,28 +3,52 @@
<h5 class="modal-title"><%- i18n('access-lists', 'form-title', {id: id}) %></h5>
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
</div>
<div class="modal-body">
<div class="modal-body has-tabs">
<form>
<div class="row">
<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 type="text" name="name" class="form-control" value="<%- name %>" required>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="form-label"><%- i18n('str', 'username') %></label>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="form-label"><%- i18n('str', 'password') %></label>
</div>
</div>
</div>
<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 show" aria-selected="true"><i class="fe fe-zap"></i> <%- i18n('access-lists', 'details') %></a></li>
<li role="presentation" class="nav-item"><a href="#auth" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-users"></i> <%- i18n('access-lists', 'authorization') %></a></li>
<li role="presentation" class="nav-item"><a href="#clients" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-radio"></i> <%- i18n('access-lists', 'clients') %></a></li>
</ul>
<div class="items"><!-- items --></div>
<div class="tab-content">
<!-- Details -->
<div role="tabpanel" class="tab-pane active show" id="details">
<div class="row">
<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 type="text" name="name" class="form-control" value="<%- name %>" required>
</div>
</div>
</div>
</div>
<!-- Authorization -->
<div class="tab-pane" id="auth">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="form-label"><%- i18n('str', 'username') %></label>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="form-label"><%- i18n('str', 'password') %></label>
</div>
</div>
</div>
<div class="items"><!-- items --></div>
</div>
<!-- Clients -->
<div class="tab-pane" id="clients">
<div class="clients"><!-- clients --></div>
<div class="text-muted">Note that the <code>allow</code> and <code>deny</code> directives will be applied in the order they are defined.</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">

52
frontend/js/app/nginx/access/form.js
View File

@@ -3,6 +3,7 @@ const App = require('../../main');
const AccessListModel = require('../../../models/access-list');
const template = require('./form.ejs');
const ItemView = require('./form/item');
const ClientView = require('./form/client');
require('jquery-serializejson');
@@ -10,20 +11,26 @@ const ItemsView = Mn.CollectionView.extend({
childView: ItemView
});
const ClientsView = Mn.CollectionView.extend({
childView: ClientView
});
module.exports = Mn.View.extend({
template: template,
className: 'modal-dialog',
ui: {
items_region: '.items',
form: 'form',
buttons: '.modal-footer button',
cancel: 'button.cancel',
save: 'button.save'
items_region: '.items',
clients_region: '.clients',
form: 'form',
buttons: '.modal-footer button',
cancel: 'button.cancel',
save: 'button.save'
},
regions: {
items_region: '@ui.items_region'
items_region: '@ui.items_region',
clients_region: '@ui.clients_region'
},
events: {
@@ -35,9 +42,10 @@ module.exports = Mn.View.extend({
return;
}
let view = this;
let form_data = this.ui.form.serializeJSON();
let items_data = [];
let view = this;
let form_data = this.ui.form.serializeJSON();
let items_data = [];
let clients_data = [];
form_data.username.map(function (val, idx) {
if (val.trim().length) {
@@ -48,14 +56,24 @@ module.exports = Mn.View.extend({
}
});
form_data.address.map(function (val, idx) {
if (val.trim().length) {
clients_data.push({
address: val.trim(),
directive: form_data.directive[idx]
})
}
});
if (!items_data.length) {
alert('You must specify at least 1 Username and Password combination');
return;
}
let data = {
name: form_data.name,
items: items_data
name: form_data.name,
items: items_data,
clients: clients_data
};
let method = App.Api.Nginx.AccessLists.create;
@@ -88,6 +106,7 @@ module.exports = Mn.View.extend({
onRender: function () {
let items = this.model.get('items');
let clients = this.model.get('clients');
// Add empty items to the end of the list. This is cheating but hey I don't have the time to do it right
let items_to_add = 5 - items.length;
@@ -97,9 +116,20 @@ module.exports = Mn.View.extend({
}
}
let clients_to_add = 5 - clients.length;
if (clients_to_add) {
for (let i = 0; i < clients_to_add; i++) {
clients.push({});
}
}
this.showChildView('items_region', new ItemsView({
collection: new Backbone.Collection(items)
}));
this.showChildView('clients_region', new ClientsView({
collection: new Backbone.Collection(clients)
}));
},
initialize: function (options) {

13
frontend/js/app/nginx/access/form/client.ejs Normal file
View File

@@ -0,0 +1,13 @@
<div class="col-sm-3 col-md-3">
<div class="form-group">
<select name="directive[]" class="form-control custom-select" placeholder="http">
<option value="allow" <%- typeof directive == 'undefined' || directive === 'allow' ? 'selected' : '' %>>allow</option>
<option value="deny" <%- typeof directive !== 'undefined' && directive === 'deny' ? 'selected' : '' %>>deny</option>
</select>
</div>
</div>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<input type="text" name="address[]" class="form-control" value="<%- typeof address !== 'undefined' ? address : '' %>" value="">
</div>
</div>

7
frontend/js/app/nginx/access/form/client.js Normal file
View File

@@ -0,0 +1,7 @@
const Mn = require('backbone.marionette');
const template = require('./client.ejs');
module.exports = Mn.View.extend({
template: template,
className: 'row'
});

2
frontend/js/app/nginx/access/main.js
View File

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