From 63d3c2d06f8e958b5840952e196c0ae950ed5b8b Mon Sep 17 00:00:00 2001
From: THEGamingninja <michael.gault.jr@protonmail.com>
Date: Thu, 25 Mar 2021 14:59:07 -0400
Subject: [PATCH 1/2] Add More Access List Entries & Access List Help

---
 frontend/js/app/nginx/access/form.ejs        | 18 +++++++++
 frontend/js/app/nginx/access/form.js         | 39 ++++++++++++--------
 frontend/js/app/nginx/access/form/client.ejs |  2 +-
 frontend/js/i18n/messages.json               |  4 +-
 frontend/scss/tabler-extra.scss              |  5 +++
 5 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/frontend/js/app/nginx/access/form.ejs b/frontend/js/app/nginx/access/form.ejs
index b22b99a..9f6fe80 100644
--- a/frontend/js/app/nginx/access/form.ejs
+++ b/frontend/js/app/nginx/access/form.ejs
@@ -46,6 +46,12 @@
 
                 <!-- Authorization -->
                 <div class="tab-pane" id="auth">
+                    <p>
+                        Basic Authorization via
+                        <a 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 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>
diff --git a/frontend/js/app/nginx/access/form.js b/frontend/js/app/nginx/access/form.js
index 92581f8..bb07554 100644
--- a/frontend/js/app/nginx/access/form.js
+++ b/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,6 +107,24 @@ 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)
+            }));
         }
     },
 
@@ -112,20 +132,9 @@ module.exports = Mn.View.extend({
         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)
diff --git a/frontend/js/app/nginx/access/form/client.ejs b/frontend/js/app/nginx/access/form/client.ejs
index 20436e8..6b767b8 100644
--- a/frontend/js/app/nginx/access/form/client.ejs
+++ b/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>
diff --git a/frontend/js/i18n/messages.json b/frontend/js/i18n/messages.json
index 3437b10..d1f79b3 100644
--- a/frontend/js/i18n/messages.json
+++ b/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",
diff --git a/frontend/scss/tabler-extra.scss b/frontend/scss/tabler-extra.scss
index cb2dcbb..3ddd0ed 100644
--- a/frontend/scss/tabler-extra.scss
+++ b/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;

From d3337322dd334b892f3301b17ffa233a81086bed Mon Sep 17 00:00:00 2001
From: THEGamingninja <thegamingninjamj@gmail.com>
Date: Wed, 5 May 2021 21:02:04 -0400
Subject: [PATCH 2/2] Add target _blank to href

---
 frontend/js/app/nginx/access/form.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/js/app/nginx/access/form.ejs b/frontend/js/app/nginx/access/form.ejs
index 9f6fe80..79220b1 100644
--- a/frontend/js/app/nginx/access/form.ejs
+++ b/frontend/js/app/nginx/access/form.ejs
@@ -48,7 +48,7 @@
                 <div class="tab-pane" id="auth">
                     <p>
                         Basic Authorization via
-                        <a href="https://nginx.org/en/docs/http/ngx_http_auth_basic_module.html">
+                        <a target="_blank" href="https://nginx.org/en/docs/http/ngx_http_auth_basic_module.html">
                             Nginx HTTP Basic Authentication
                         </a>
                     </p>
@@ -75,7 +75,7 @@
                 <div class="tab-pane" id="access">
                     <p>
                         IP Address Whitelist/Blacklist via
-                        <a href="https://nginx.org/en/docs/http/ngx_http_access_module.html">
+                        <a target="_blank" href="https://nginx.org/en/docs/http/ngx_http_access_module.html">
                             Nginx HTTP Access
                         </a>
                     </p>