add basic functionality to front end

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

@@ -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">

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) {

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

@@ -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>

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'
+});

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) {

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",

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
         };