Skip to content

Commit 46a9f5c

Browse files
Indemnity83Indemnity83
committed
add basic functionality to front end
1 parent f990d3f commit 46a9f5c

File tree

7 files changed

+106
-28
lines changed

7 files changed

+106
-28
lines changed

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

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,52 @@
33
<h5 class="modal-title"><%- i18n('access-lists', 'form-title', {id: id}) %></h5>
44
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
55
</div>
6-
<div class="modal-body">
6+
<div class="modal-body has-tabs">
77
<form>
8-
<div class="row">
9-
<div class="col-sm-12 col-md-12">
10-
<div class="form-group">
11-
<label class="form-label"><%- i18n('str', 'name') %> <span class="form-required">*</span></label>
12-
<input type="text" name="name" class="form-control" value="<%- name %>" required>
8+
<ul class="nav nav-tabs" role="tablist">
9+
<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>
10+
<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>
11+
<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>
12+
</ul>
13+
14+
<div class="tab-content">
15+
<!-- Details -->
16+
<div role="tabpanel" class="tab-pane active show" id="details">
17+
<div class="row">
18+
<div class="col-sm-12 col-md-12">
19+
<div class="form-group">
20+
<label class="form-label"><%- i18n('str', 'name') %> <span class="form-required">*</span></label>
21+
<input type="text" name="name" class="form-control" value="<%- name %>" required>
22+
</div>
23+
</div>
1324
</div>
1425
</div>
15-
<div class="col-sm-6 col-md-6">
16-
<div class="form-group">
17-
<label class="form-label"><%- i18n('str', 'username') %></label>
26+
27+
<!-- Authorization -->
28+
<div class="tab-pane" id="auth">
29+
<div class="row">
30+
<div class="col-sm-6 col-md-6">
31+
<div class="form-group">
32+
<label class="form-label"><%- i18n('str', 'username') %></label>
33+
</div>
34+
</div>
35+
<div class="col-sm-6 col-md-6">
36+
<div class="form-group">
37+
<label class="form-label"><%- i18n('str', 'password') %></label>
38+
</div>
39+
</div>
1840
</div>
41+
42+
<div class="items"><!-- items --></div>
1943
</div>
20-
<div class="col-sm-6 col-md-6">
21-
<div class="form-group">
22-
<label class="form-label"><%- i18n('str', 'password') %></label>
23-
</div>
44+
45+
<!-- Clients -->
46+
<div class="tab-pane" id="clients">
47+
<div class="clients"><!-- clients --></div>
48+
<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>
2449
</div>
25-
</div>
2650

27-
<div class="items"><!-- items --></div>
51+
</div>
2852
</form>
2953
</div>
3054
<div class="modal-footer">

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

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,34 @@ const App = require('../../main');
33
const AccessListModel = require('../../../models/access-list');
44
const template = require('./form.ejs');
55
const ItemView = require('./form/item');
6+
const ClientView = require('./form/client');
67

78
require('jquery-serializejson');
89

910
const ItemsView = Mn.CollectionView.extend({
1011
childView: ItemView
1112
});
1213

14+
const ClientsView = Mn.CollectionView.extend({
15+
childView: ClientView
16+
});
17+
1318
module.exports = Mn.View.extend({
1419
template: template,
1520
className: 'modal-dialog',
1621

1722
ui: {
18-
items_region: '.items',
19-
form: 'form',
20-
buttons: '.modal-footer button',
21-
cancel: 'button.cancel',
22-
save: 'button.save'
23+
items_region: '.items',
24+
clients_region: '.clients',
25+
form: 'form',
26+
buttons: '.modal-footer button',
27+
cancel: 'button.cancel',
28+
save: 'button.save'
2329
},
2430

2531
regions: {
26-
items_region: '@ui.items_region'
32+
items_region: '@ui.items_region',
33+
clients_region: '@ui.clients_region'
2734
},
2835

2936
events: {
@@ -35,9 +42,10 @@ module.exports = Mn.View.extend({
3542
return;
3643
}
3744

38-
let view = this;
39-
let form_data = this.ui.form.serializeJSON();
40-
let items_data = [];
45+
let view = this;
46+
let form_data = this.ui.form.serializeJSON();
47+
let items_data = [];
48+
let clients_data = [];
4149

4250
form_data.username.map(function (val, idx) {
4351
if (val.trim().length) {
@@ -48,14 +56,24 @@ module.exports = Mn.View.extend({
4856
}
4957
});
5058

59+
form_data.address.map(function (val, idx) {
60+
if (val.trim().length) {
61+
clients_data.push({
62+
address: val.trim(),
63+
directive: form_data.directive[idx]
64+
})
65+
}
66+
});
67+
5168
if (!items_data.length) {
5269
alert('You must specify at least 1 Username and Password combination');
5370
return;
5471
}
5572

5673
let data = {
57-
name: form_data.name,
58-
items: items_data
74+
name: form_data.name,
75+
items: items_data,
76+
clients: clients_data
5977
};
6078

6179
let method = App.Api.Nginx.AccessLists.create;
@@ -88,6 +106,7 @@ module.exports = Mn.View.extend({
88106

89107
onRender: function () {
90108
let items = this.model.get('items');
109+
let clients = this.model.get('clients');
91110

92111
// Add empty items to the end of the list. This is cheating but hey I don't have the time to do it right
93112
let items_to_add = 5 - items.length;
@@ -97,9 +116,20 @@ module.exports = Mn.View.extend({
97116
}
98117
}
99118

119+
let clients_to_add = 5 - clients.length;
120+
if (clients_to_add) {
121+
for (let i = 0; i < clients_to_add; i++) {
122+
clients.push({});
123+
}
124+
}
125+
100126
this.showChildView('items_region', new ItemsView({
101127
collection: new Backbone.Collection(items)
102128
}));
129+
130+
this.showChildView('clients_region', new ClientsView({
131+
collection: new Backbone.Collection(clients)
132+
}));
103133
},
104134

105135
initialize: function (options) {

‎frontend/js/app/nginx/access/form/client.ejs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="col-sm-3 col-md-3">
2+
<div class="form-group">
3+
<select name="directive[]" class="form-control custom-select" placeholder="http">
4+
<option value="allow" <%- typeof directive == 'undefined' || directive === 'allow' ? 'selected' : '' %>>allow</option>
5+
<option value="deny" <%- typeof directive !== 'undefined' && directive === 'deny' ? 'selected' : '' %>>deny</option>
6+
</select>
7+
</div>
8+
</div>
9+
<div class="col-sm-9 col-md-9">
10+
<div class="form-group">
11+
<input type="text" name="address[]" class="form-control" value="<%- typeof address !== 'undefined' ? address : '' %>" value="">
12+
</div>
13+
</div>

‎frontend/js/app/nginx/access/form/client.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const Mn = require('backbone.marionette');
2+
const template = require('./client.ejs');
3+
4+
module.exports = Mn.View.extend({
5+
template: template,
6+
className: 'row'
7+
});

‎frontend/js/app/nginx/access/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ module.exports = Mn.View.extend({
4040
onRender: function () {
4141
let view = this;
4242

43-
App.Api.Nginx.AccessLists.getAll(['owner', 'items'])
43+
App.Api.Nginx.AccessLists.getAll(['owner', 'items', 'clients'])
4444
.then(response => {
4545
if (!view.isDestroyed()) {
4646
if (response && response.length) {

‎frontend/js/i18n/messages.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,10 @@
187187
"help-content": "Access Lists provide authentication for the Proxy Hosts via Basic HTTP Authentication.\nYou can configure multiple usernames and passwords for a single Access List and then apply that to a Proxy Host.\nThis is most useful for forwarded web services that do not have authentication mechanisms built in.",
188188
"item-count": "{count} {count, select, 1{User} other{Users}}",
189189
"proxy-host-count": "{count} {count, select, 1{Proxy Host} other{Proxy Hosts}}",
190-
"delete-has-hosts": "This Access List is associated with {count} Proxy Hosts. They will become publicly available upon deletion."
190+
"delete-has-hosts": "This Access List is associated with {count} Proxy Hosts. They will become publicly available upon deletion.",
191+
"details": "Details",
192+
"authorization": "Authorization",
193+
"clients": "Clients"
191194
},
192195
"users": {
193196
"title": "Users",

‎frontend/js/models/access-list.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const model = Backbone.Model.extend({
1010
modified_on: null,
1111
name: '',
1212
items: [],
13+
clients: [],
1314
// The following are expansions:
1415
owner: null
1516
};

0 commit comments

Comments
 (0)