Merge pull request NginxProxyManager#975 from thegamingninja/feature/more-access-ips

Improved Access List Form

Author: jc21

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

@@ -46,6 +46,12 @@
 
                 <!-- Authorization -->
                 <div class="tab-pane" id="auth">
+                    <p>
+                        Basic Authorization via
+                        <a target="_blank" href="https://nginx.org/en/docs/http/ngx_http_auth_basic_module.html">
+                            Nginx HTTP Basic Authentication
+                        </a>
+                    </p>
                     <div class="row">
                         <div class="col-sm-6 col-md-6">
                             <div class="form-group">
@@ -60,10 +66,19 @@
                     </div>
 
                     <div class="items"><!-- items --></div>
+                    <div class="btn-list justify-content-end">
+                        <button type="button" class="btn btn-teal auth_add"><%- i18n('access-lists', 'auth-add') %></button>
+                    </div>
                 </div>
 
                 <!-- Access -->
                 <div class="tab-pane" id="access">
+                    <p>
+                        IP Address Whitelist/Blacklist via
+                        <a target="_blank" href="https://nginx.org/en/docs/http/ngx_http_access_module.html">
+                            Nginx HTTP Access
+                        </a>
+                    </p>
                     <div class="clients"><!-- clients --></div>
                     <div class="row">
                         <div class="col-sm-3 col-md-3">
@@ -78,6 +93,9 @@
                         </div>
                     </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 class="btn-list justify-content-end">
+                        <button type="button" class="btn btn-teal access_add"><%- i18n('access-lists', 'access-add') %></button>
+                    </div>
                 </div>
 
             </div>

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

@@ -25,7 +25,9 @@ module.exports = Mn.View.extend({
         form:           'form',
         buttons:        '.modal-footer button',
         cancel:         'button.cancel',
-        save:           'button.save'
+        save:           'button.save',
+        access_add:     'button.access_add',
+        auth_add:       'button.auth_add'
     },
 
     regions: {
@@ -105,27 +107,34 @@ module.exports = Mn.View.extend({
                     alert(err.message);
                     this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
                 });
+        },
+        'click @ui.access_add': function (e) { 
+            e.preventDefault();
+
+            let clients = this.model.get('clients');
+            clients.push({});
+            this.showChildView('clients_region', new ClientsView({
+                collection: new Backbone.Collection(clients)
+            }));
+        },
+        'click @ui.auth_add': function (e) { 
+            e.preventDefault();
+
+            let items = this.model.get('items');
+            items.push({});
+            this.showChildView('items_region', new ItemsView({
+                collection: new Backbone.Collection(items)
+            }));
         }
     },
 
     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;
-        if (items_to_add) {
-            for (let i = 0; i < items_to_add; i++) {
-                items.push({});
-            }
-        }
-
-        let clients_to_add = 4 - clients.length;
-        if (clients_to_add) {
-            for (let i = 0; i < clients_to_add; i++) {
-                clients.push({});
-            }
-        }
+        // Ensure at least one field is shown initally
+        if (!items.length) items.push({});
+        if (!clients.length) clients.push({});
 
         this.showChildView('items_region', new ItemsView({
             collection: new Backbone.Collection(items)

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

@@ -8,6 +8,6 @@
 </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="">
+        <input type="text" name="address[]" placeholder="IP / Subnet" class="form-control" value="<%- typeof address !== 'undefined' ? address : '' %>" value="">
     </div>
 </div>

frontend/js/i18n/messages.json

@@ -210,7 +210,9 @@
       "access": "Access",
       "satisfy": "Satisfy",
       "satisfy-any": "Satisfy Any",
-      "pass-auth": "Pass Auth to Host"
+      "pass-auth": "Pass Auth to Host",
+      "access-add": "Add",
+      "auth-add": "Add"
     },
     "users": {
       "title": "Users",

frontend/scss/tabler-extra.scss

@@ -25,6 +25,11 @@ $pink: #f66d9b;
     padding: 0;
 }
 
+/* For some reason this class doesn't have 'display: flex' when it should. https://preview.tabler.io/docs/buttons.html#list-of-buttons */
+.btn-list {
+    display: flex;
+}
+
 /* Teal Outline Buttons */
 .btn-outline-teal {
     color: $teal;