From 46a9f5cb965a597c83c648743c6f3e9063d63d96 Mon Sep 17 00:00:00 2001 From: Kyle Klaus Date: Fri, 10 Apr 2020 17:33:14 -0700 Subject: [PATCH] add basic functionality to front end --- frontend/js/app/nginx/access/form.ejs | 64 ++++++++++++++------ frontend/js/app/nginx/access/form.js | 52 ++++++++++++---- frontend/js/app/nginx/access/form/client.ejs | 13 ++++ frontend/js/app/nginx/access/form/client.js | 7 +++ frontend/js/app/nginx/access/main.js | 2 +- frontend/js/i18n/messages.json | 5 +- frontend/js/models/access-list.js | 1 + 7 files changed, 111 insertions(+), 33 deletions(-) create mode 100644 frontend/js/app/nginx/access/form/client.ejs create mode 100644 frontend/js/app/nginx/access/form/client.js diff --git a/frontend/js/app/nginx/access/form.ejs b/frontend/js/app/nginx/access/form.ejs index a85e3968..4866171f 100644 --- a/frontend/js/app/nginx/access/form.ejs +++ b/frontend/js/app/nginx/access/form.ejs @@ -3,28 +3,52 @@
<%- i18n('access-lists', 'form-title', {id: id}) %>
-
+
-
-
-
- - -
-
-
-
- -
-
-
-
- -
-
-
+ -
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+ + +
+
+
Note that the allow and deny directives will be applied in the order they are defined.
+
+ +
diff --git a/frontend/js/app/nginx/access/form.js b/frontend/js/app/nginx/access/form.js index d4e77c90..c932e86b 100644 --- a/frontend/js/app/nginx/access/form.js +++ b/frontend/js/app/nginx/access/form.js @@ -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) { diff --git a/frontend/js/app/nginx/access/form/client.ejs b/frontend/js/app/nginx/access/form/client.ejs new file mode 100644 index 00000000..20436e8b --- /dev/null +++ b/frontend/js/app/nginx/access/form/client.ejs @@ -0,0 +1,13 @@ +
+
+ +
+
+
+
+ +
+
diff --git a/frontend/js/app/nginx/access/form/client.js b/frontend/js/app/nginx/access/form/client.js new file mode 100644 index 00000000..b4c00e2e --- /dev/null +++ b/frontend/js/app/nginx/access/form/client.js @@ -0,0 +1,7 @@ +const Mn = require('backbone.marionette'); +const template = require('./client.ejs'); + +module.exports = Mn.View.extend({ + template: template, + className: 'row' +}); diff --git a/frontend/js/app/nginx/access/main.js b/frontend/js/app/nginx/access/main.js index 6b86f55c..d14a9eb4 100644 --- a/frontend/js/app/nginx/access/main.js +++ b/frontend/js/app/nginx/access/main.js @@ -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) { diff --git a/frontend/js/i18n/messages.json b/frontend/js/i18n/messages.json index 3d4d0ae4..f9e30251 100644 --- a/frontend/js/i18n/messages.json +++ b/frontend/js/i18n/messages.json @@ -187,7 +187,10 @@ "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.", "item-count": "{count} {count, select, 1{User} other{Users}}", "proxy-host-count": "{count} {count, select, 1{Proxy Host} other{Proxy Hosts}}", - "delete-has-hosts": "This Access List is associated with {count} Proxy Hosts. They will become publicly available upon deletion." + "delete-has-hosts": "This Access List is associated with {count} Proxy Hosts. They will become publicly available upon deletion.", + "details": "Details", + "authorization": "Authorization", + "clients": "Clients" }, "users": { "title": "Users", diff --git a/frontend/js/models/access-list.js b/frontend/js/models/access-list.js index 8cd9306f..0c2c4abe 100644 --- a/frontend/js/models/access-list.js +++ b/frontend/js/models/access-list.js @@ -10,6 +10,7 @@ const model = Backbone.Model.extend({ modified_on: null, name: '', items: [], + clients: [], // The following are expansions: owner: null };