Add support for proxy_protocol in proxy_hosts and streams

Closes #1114
Related To #1882
Related To #3537
Related To #3618

Co-authored-by: jwklijnsma <janwiebe@janwiebe.eu>
Co-authored-by: SBado <16034687+SBado@users.noreply.github.com>

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

@@ -72,7 +72,7 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="col-sm-12 col-md-12">
+                        <div class="col-sm-6 col-md-6">
                             <div class="form-group">
                                 <label class="custom-switch">
                                     <input type="checkbox" class="custom-switch-input" name="allow_websocket_upgrade" value="1"<%- allow_websocket_upgrade ? ' checked' : '' %>>
@@ -81,6 +81,24 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="col-sm-6 col-md-6">
+                            <div class="form-group">
+                                <label class="custom-switch">
+                                    <input type="checkbox" class="custom-switch-input" name="proxy_protocol_enabled" value="1"<%- proxy_protocol_enabled ? ' checked' : '' %>>
+
+
+                                    <span class="custom-switch-indicator"></span>
+                                    <span class="custom-switch-description"><%- i18n('proxy-hosts', 'enable-proxy-protocol') %><a href="https://docs.nginx.com/nginx/admin-guide/load-balancer/using-proxy-protocol/#introduction" target="_blank"><i class="fe fe-help-circle"></i></a></span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="col-sm-12 col-md-12">
+                            <div class="form-group">
+                                <label class="form-label"><%- i18n('proxy-hosts', 'load-balancer-ip') %>  <a href="https://docs.nginx.com/nginx/admin-guide/load-balancer/using-proxy-protocol/#changing-the-load-balancers-ip-address-to-the-client-ip-address" target="_blank"><i class="fe fe-help-circle"></i></a></label>
+                                <input type="text" name="loadbalancer_address" class="form-control text-monospace" placeholder="" value="<%- loadbalancer_address %>" autocomplete="off" maxlength="255" <%- proxy_protocol_enabled ? '' : ' disabled' %>>
+                            </div>
+                        </div>
 
                         <div class="col-sm-12 col-md-12">
                             <div class="form-group">

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

@@ -43,7 +43,9 @@ 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',
+        proxy_protocol_enabled:   'input[name="proxy_protocol_enabled"]',
+        loadbalancer_address:     'input[name="loadbalancer_address"]',
     },
 
     regions: {
@@ -101,6 +103,14 @@ module.exports = Mn.View.extend({
             }
         },
 
+        'change @ui.proxy_protocol_enabled': function () {
+            let checked = this.ui.proxy_protocol_enabled.prop('checked');
+            this.ui.loadbalancer_address
+                .prop('disabled', !checked)
+                .parents('.form-group')
+                .css('opacity', checked ? 1 : 0.5);
+        },
+
         'change @ui.dns_challenge_switch': function () {
             const checked = this.ui.dns_challenge_switch.prop('checked');
             if (checked) {
@@ -167,6 +177,7 @@ module.exports = Mn.View.extend({
             data.hsts_enabled            = !!data.hsts_enabled;
             data.hsts_subdomains         = !!data.hsts_subdomains;
             data.ssl_forced              = !!data.ssl_forced;
+            data.proxy_protocol_enabled  = !!data.proxy_protocol_enabled;
             
             if (typeof data.meta === 'undefined') data.meta = {};
             data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
@@ -266,6 +277,7 @@ module.exports = Mn.View.extend({
 
         this.ui.ssl_forced.trigger('change');
         this.ui.hsts_enabled.trigger('change');
+        this.ui.proxy_protocol_enabled.trigger('change');
 
         // Domain names
         this.ui.domain_names.selectize({

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

@@ -42,6 +42,24 @@
                         </label>
                     </div>
                 </div>
+                <div class="col-sm-6 col-md-6">
+                    <div class="form-group">
+                        <label class="custom-switch">
+                            <input type="checkbox" class="custom-switch-input" name="proxy_protocol_enabled" value="1"<%- proxy_protocol_enabled ? ' checked' : '' %>>
+
+
+                            <span class="custom-switch-indicator"></span>
+                            <span class="custom-switch-description"><%- i18n('streams', 'enable-proxy-protocol') %><a href="https://docs.nginx.com/nginx/admin-guide/load-balancer/using-proxy-protocol/#introduction" target="_blank"><i class="fe fe-help-circle"></i></a></span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12">
+                    <div class="form-group">
+                        <label class="form-label"><%- i18n('streams', 'load-balancer-ip') %><a href="https://docs.nginx.com/nginx/admin-guide/load-balancer/using-proxy-protocol/#changing-the-load-balancers-ip-address-to-the-client-ip-address" target="_blank"><i class="fe fe-help-circle"></i></a></label>
+                        <input type="text" name="loadbalancer_address" class="form-control text-monospace" placeholder="" value="<%- loadbalancer_address %>" autocomplete="off" maxlength="255" <%- proxy_protocol_enabled ? '' : ' disabled' %>>
+                    </div>
+                </div>
                 <div class="col-sm-12 col-md-12">
                     <div class="forward-type-error invalid-feedback"><%- i18n('streams', 'forward-type-error') %></div>
                 </div>

frontend/js/app/nginx/stream/form.js

@@ -14,6 +14,8 @@ module.exports = Mn.View.extend({
     ui: {
         form:       'form',
         forwarding_host: 'input[name="forwarding_host"]',
+        proxy_protocol_enabled: 'input[name="proxy_protocol_enabled"]',
+        loadbalancer_address:      'input[name="loadbalancer_address"]',
         type_error: '.forward-type-error',
         buttons:    '.modal-footer button',
         switches:   '.custom-switch-input',
@@ -25,6 +27,13 @@ module.exports = Mn.View.extend({
         'change @ui.switches': function () {
             this.ui.type_error.hide();
         },
+        'change @ui.proxy_protocol_enabled': function () {
+            let checked = this.ui.proxy_protocol_enabled.prop('checked');
+            this.ui.loadbalancer_address
+                .prop('disabled', !checked)
+                .parents('.form-group')
+                .css('opacity', checked ? 1 : 0.5);
+        },
 
         'click @ui.save': function (e) {
             e.preventDefault();
@@ -47,6 +56,7 @@ module.exports = Mn.View.extend({
             data.forwarding_port = parseInt(data.forwarding_port, 10);
             data.tcp_forwarding  = !!data.tcp_forwarding;
             data.udp_forwarding  = !!data.udp_forwarding;
+            data.proxy_protocol_enabled = !!data.proxy_protocol_enabled;
 
             let method = App.Api.Nginx.Streams.create;
             let is_new = true;
@@ -76,6 +86,10 @@ module.exports = Mn.View.extend({
         }
     },
 
+    onRender: function () {
+        this.ui.proxy_protocol_enabled.trigger('change');
+    },
+
     initialize: function (options) {
         if (typeof options.model === 'undefined' || !options.model) {
             this.model = new StreamModel.Model();

frontend/js/i18n/messages.json

@@ -133,7 +133,9 @@
       "allow-websocket-upgrade": "Websockets Support",
       "ignore-invalid-upstream-ssl": "Ignore Invalid SSL",
       "custom-forward-host-help": "Add a path for sub-folder forwarding.\nExample: 203.0.113.25/path/",
-      "search": "Search Host…"
+      "search": "Search Host…",
+      "enable-proxy-protocol": "Enable Proxy Protocol",
+      "load-balancer-ip": "Load balancer or TCP proxy IP / CIDR range"
     },
     "redirection-hosts": {
       "title": "Redirection Hosts",
@@ -179,7 +181,9 @@
       "delete-confirm": "Are you sure you want to delete this Stream?",
       "help-title": "What is a Stream?",
       "help-content": "A relatively new feature for Nginx, a Stream will serve to forward TCP/UDP traffic directly to another computer on the network.\nIf you're running game servers, FTP or SSH servers this can come in handy.",
-      "search": "Search Incoming Port…"
+      "search": "Search Incoming Port…",
+      "enable-proxy-protocol": "Enable Proxy Protocol",
+      "load-balancer-ip": "Load balancer or TCP proxy IP / CIDR range"
     },
     "certificates": {
       "title": "SSL Certificates",

frontend/js/models/proxy-host.js

@@ -21,6 +21,8 @@ const model = Backbone.Model.extend({
             allow_websocket_upgrade: false,
             block_exploits:          false,
             http2_support:           false,
+            proxy_protocol_enabled:   false,
+            loadbalancer_address:        '',
             advanced_config:         '',
             enabled:                 true,
             meta:                    {},

frontend/js/models/stream.js

@@ -13,6 +13,8 @@ const model = Backbone.Model.extend({
             forwarding_port: null,
             tcp_forwarding:  true,
             udp_forwarding:  false,
+            proxy_protocol_enabled: false,
+            loadbalancer_address:      "",
             enabled:         true,
             meta:            {},
             // The following are expansions: