Frontend form and marionette modifications to allow static hosts and locations

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

@@ -35,7 +35,7 @@
                         </div>
                         <div class="col-sm-3 col-md-3">
                             <div class="form-group">
-                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-scheme') %><span class="form-required">*</span></label>
+                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-scheme') %></label>
                                 <select name="forward_scheme" class="form-control custom-select" placeholder="http">
                                     <option value="http" <%- forward_scheme === 'http' ? 'selected' : '' %>>http</option>
                                     <option value="https" <%- forward_scheme === 'https' ? 'selected' : '' %>>https</option>
@@ -44,14 +44,26 @@
                         </div>
                         <div class="col-sm-5 col-md-5">
                             <div class="form-group">
-                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-host') %><span class="form-required">*</span></label>
-                                <input type="text" name="forward_host" class="form-control text-monospace" placeholder="" value="<%- forward_host %>" autocomplete="off" maxlength="255" required>
+                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-host') %><% if (!static) { %> <span class="form-required">*</span><% } %></label>
+                                <input type="text" name="forward_host" class="form-control text-monospace" placeholder="" value="<%- forward_host %>" <%- !static ? 'required' : '' %> autocomplete="off" maxlength="255">
                             </div>
                         </div>
                         <div class="col-sm-4 col-md-4">
                             <div class="form-group">
-                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-port') %> <span class="form-required">*</span></label>
-                                <input name="forward_port" type="number" class="form-control text-monospace" placeholder="80" value="<%- forward_port %>" required>
+                                <label class="form-label"><%- i18n('proxy-hosts', 'forward-port') %><% if (!static) { %> <span class="form-required">*</span><% } %> </label>
+                                <input name="forward_port" type="number" class="form-control text-monospace" placeholder="80" value="<%- forward_port %>" <%- !static ? 'required' : '' %>>
+                            </div>
+                        </div>
+                        <div class="col-sm-5 col-md-5">
+                            <div class="form-group">
+                                <label class="form-label"><%- i18n('proxy-hosts', 'root-dir') %><% if (static) { %> <span class="form-required">*</span><% } %></label>
+                                <input type="text" name="root_dir" class="form-control text-monospace" placeholder="" value="<%- root_dir %>" <%- static ? 'required' : '' %> autocomplete="off" maxlength="255">
+                            </div>
+                        </div>
+                        <div class="col-sm-5 col-md-5">
+                            <div class="form-group">
+                                <label class="form-label"><%- i18n('proxy-hosts', 'index-file') %><% if (static) { %> <span class="form-required">*</span><% } %></label>
+                                <input type="text" name="index_file" class="form-control text-monospace" placeholder="" value="<%- index_file %>" <%- static ? 'required' : '' %> autocomplete="off" maxlength="255">
                             </div>
                         </div>
                         <div class="col-sm-6 col-md-6">
@@ -81,6 +93,15 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="col-sm-12 col-md-12">
+                            <div class="form-group">
+                                <label class="custom-switch">
+                                    <input type="checkbox" class="custom-switch-input static-checkbox" name="static" value="1"<%- static ? ' checked' : '' %>>
+                                    <span class="custom-switch-indicator"></span>
+                                    <span class="custom-switch-description"><%- i18n('proxy-hosts', 'static') %></span>
+                                </label>
+                            </div>
+                        </div>
 
                         <div class="col-sm-12 col-md-12">
                             <div class="form-group">

frontend/js/app/nginx/proxy/form.js

@@ -43,7 +43,10 @@ module.exports = Mn.View.extend({
         dns_provider_credentials: 'textarea[name="meta[dns_provider_credentials]"]',
         propagation_seconds:      'input[name="meta[propagation_seconds]"]',
         forward_scheme:           'select[name="forward_scheme"]',
-        letsencrypt:              '.letsencrypt'
+        letsencrypt:              '.letsencrypt',
+        root_dir:                 'input[name="root_dir"]',
+        index_file:               'input[name="index_file"]',
+        static:                   'input[type="checkbox"].static-checkbox',
     },
 
     regions: {
@@ -113,7 +116,7 @@ module.exports = Mn.View.extend({
             } else {
                 this.ui.dns_provider.prop('required', false);
                 this.ui.dns_provider_credentials.prop('required', false);
-                this.ui.dns_challenge_content.hide();                
+                this.ui.dns_challenge_content.hide();
             }
         },
 
@@ -125,17 +128,26 @@ module.exports = Mn.View.extend({
                 this.ui.credentials_file_content.show();
             } else {
                 this.ui.dns_provider_credentials.prop('required', false);
-                this.ui.credentials_file_content.hide();                
+                this.ui.credentials_file_content.hide();
             }
         },
 
         'click @ui.add_location_btn': function (e) {
             e.preventDefault();
-            
+
             const model = new ProxyLocationModel.Model();
             this.locationsCollection.add(model);
         },
 
+        'click @ui.static': function(e){
+            const map = {};
+            let value = e.target.value
+            if(e.target.type == 'checkbox') value = e.target.checked;
+            map[e.target.name] = value;
+            this.model.set(map);
+            setTimeout(this.render.bind(this), 300)
+        },
+
         'click @ui.save': function (e) {
             e.preventDefault();
             this.ui.le_error_info.hide();
@@ -167,17 +179,18 @@ module.exports = Mn.View.extend({
             data.hsts_enabled            = !!data.hsts_enabled;
             data.hsts_subdomains         = !!data.hsts_subdomains;
             data.ssl_forced              = !!data.ssl_forced;
-            
+            data.static                  = !!data.static;
+
             if (typeof data.meta === 'undefined') data.meta = {};
             data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
             data.meta.dns_challenge = data.meta.dns_challenge == 1;
-            
+
             if(!data.meta.dns_challenge){
                 data.meta.dns_provider = undefined;
                 data.meta.dns_provider_credentials = undefined;
                 data.meta.propagation_seconds = undefined;
             } else {
-                if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined; 
+                if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
             }
 
             if (typeof data.domain_names === 'string' && data.domain_names) {
@@ -185,7 +198,7 @@ module.exports = Mn.View.extend({
             }
 
             // Check for any domain names containing wildcards, which are not allowed with letsencrypt
-            if (data.certificate_id === 'new') {                
+            if (data.certificate_id === 'new') {
                 let domain_err = false;
                 if (!data.meta.dns_challenge) {
                     data.domain_names.map(function (name) {

frontend/js/app/nginx/proxy/list/item.ejs

@@ -23,7 +23,13 @@
     </div>
 </td>
 <td>
-    <div class="text-monospace"><%- forward_scheme %>://<%- forward_host %>:<%- forward_port %></div>
+		<!-- <div> <%- static %> </div> -->
+		<% if (!static) { %>
+			<div class="text-monospace"><%- forward_scheme %>://<%- forward_host %>:<%- forward_port %></div>
+		<% } else { %>
+			<div class="text-monospace"><%- root_dir %></div>
+			<div class="text-monospace"><%- index_file %></div>
+		<% } %>
 </td>
 <td>
     <div><%- certificate && certificate_id ? i18n('ssl', certificate.provider) : i18n('ssl', 'none') %></div>

frontend/js/app/nginx/proxy/location-item.ejs

@@ -16,7 +16,7 @@
                         <div class="col-auto">
                             <div class="selectgroup">
                                 <label class="selectgroup-item">
-                                    <input type="checkbox" class="selectgroup-input">
+                                    <input type="checkbox" class="selectgroup-input settings-checkbox">
                                     <span class="selectgroup-button">
                                         <i class="fe fe-settings"></i>
                                     </span>
@@ -28,7 +28,7 @@
             </div>
             <div class="col-sm-3 col-md-3">
                 <div class="form-group">
-                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-scheme') %><span class="form-required">*</span></label>
+                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-scheme') %></label>
                     <select name="forward_scheme" class="form-control custom-select model" placeholder="http">
                         <option value="http" <%- forward_scheme === 'http' ? 'selected' : '' %>>http</option>
                         <option value="https" <%- forward_scheme === 'https' ? 'selected' : '' %>>https</option>
@@ -37,17 +37,38 @@
             </div>
             <div class="col-sm-5 col-md-5">
                 <div class="form-group">
-                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-host') %><span class="form-required">*</span></label>
-                    <input type="text" name="forward_host" class="form-control text-monospace model" placeholder="" value="<%- forward_host %>" autocomplete="off" maxlength="200" required>
+                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-host') %> <% if (!static) { %> <span class="form-required">*</span> <% } %> </label>
+                    <input type="text" name="forward_host" class="form-control text-monospace model" placeholder="" value="<%- forward_host %>" <%- !static ? 'checked' : '' %> autocomplete="off" maxlength="200">
                     <span style="font-size: 9px;"><%- i18n('proxy-hosts', 'custom-forward-host-help') %></span>
                 </div>
             </div>
             <div class="col-sm-4 col-md-4">
                 <div class="form-group">
-                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-port') %> <span class="form-required">*</span></label>
-                    <input name="forward_port" type="number" class="form-control text-monospace model" placeholder="80" value="<%- forward_port %>" required>
+                    <label class="form-label"><%- i18n('proxy-hosts', 'forward-port') %> <% if (!static) { %> <span class="form-required">*</span><% } %> </label>
+                    <input name="forward_port" type="number" class="form-control text-monospace model" placeholder="80" value="<%- forward_port %>" <%- !static ? 'checked' : '' %> >
                 </div>
             </div>
+            <div class="col-sm-5 col-md-5">
+                <div class="form-group">
+                    <label class="form-label"><%- i18n('proxy-hosts', 'root-dir') %><% if (static) { %> <span class="form-required">*</span><% } %></label>
+                    <input type="text" name="root_dir" class="form-control text-monospace model" placeholder="" value="<%- root_dir %>" <%- static ? 'required' : '' %> autocomplete="off" maxlength="200">
+                </div>
+            </div>
+            <div class="col-sm-5 col-md-5">
+                <div class="form-group">
+                    <label class="form-label"><%- i18n('proxy-hosts', 'index-file') %><% if (static) { %> <span class="form-required">*</span><% } %></label>
+                    <input type="text" name="index_file" class="form-control text-monospace model" placeholder="" value="<%- index_file %>" <%- static ? 'required' : false %> autocomplete="off" maxlength="200">
+                </div>
+            </div>
+						<div class="col-sm-12 col-md-12">
+								<div class="form-group">
+										<label class="custom-switch">
+												<input type="checkbox" class="custom-switch-input location-static-checkbox model" name="static" value="1"<%- static ? ' checked' : '' %> >
+												<span class="custom-switch-indicator"></span>
+												<span class="custom-switch-description"><%- i18n('proxy-hosts', 'static') %></span>
+										</label>
+								</div>
+						</div>
         </div>
         <div class="row config">
             <div class="col-md-12">

frontend/js/app/nginx/proxy/location.js

@@ -7,13 +7,15 @@ const LocationView = Mn.View.extend({
     className: 'location_block',
 
     ui: {
-        toggle:     'input[type="checkbox"]',
+        settings:   'input[type="checkbox"].settings-checkbox',
+        static:     'input[type="checkbox"].location-static-checkbox',
         config:     '.config',
         delete:     '.location-delete'
     },
 
     events: {
-        'change @ui.toggle': function(el) {
+			
+        'change @ui.settings': function(el) {
             if (el.target.checked) {
                 this.ui.config.show();
             } else {
@@ -22,11 +24,20 @@ const LocationView = Mn.View.extend({
         },
 
         'change .model': function (e) {
+					
             const map = {};
-            map[e.target.name] = e.target.value;
+
+						let value = e.target.value
+						if(e.target.type == 'checkbox') value = e.target.checked ? 1 : 0
+            map[e.target.name] = value
             this.model.set(map);
+
+						setTimeout(this.render.bind(this), 300)
+						
         },
 
+				// 'click @ui.static': 'render',
+
         'click @ui.delete': function () {
             this.model.destroy();
         }

frontend/js/i18n/messages.json

@@ -123,6 +123,9 @@
       "forward-scheme": "Scheme",
       "forward-host": "Forward Hostname / IP",
       "forward-port": "Forward Port",
+			"root-dir": "Root Directory",
+			"static": "Static File Proxy",
+			"index-file": "Index File",
       "delete": "Delete Proxy Host",
       "delete-confirm": "Are you sure you want to delete the Proxy host for: <strong>{domains}</strong>?",
       "help-title": "What is a Proxy Host?",

frontend/js/models/proxy-host-location.js

@@ -9,8 +9,11 @@ const model = Backbone.Model.extend({
             path:               '',
             advanced_config:    '',
             forward_scheme:     'http',
-            forward_host:       '',
-            forward_port:       '80'
+            forward_host:       null,
+            forward_port:       '80',
+						root_dir:						null,
+						static:							false,
+						index_file:					'index.html',
         }
     },
 

frontend/js/models/proxy-host.js

@@ -10,8 +10,11 @@ const model = Backbone.Model.extend({
             modified_on:             null,
             domain_names:            [],
             forward_scheme:          'http',
-            forward_host:            '',
+            forward_host:            null,
             forward_port:            null,
+            root_dir:            		 null,
+						static:									 false,
+            index_file:            	 'index.html',
             access_list_id:          0,
             certificate_id:          0,
             ssl_forced:              false,