cloudflare DNS also possible while adding proxy, redirection and 404

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

@@ -73,6 +73,23 @@
                             </div>
                         </div>
 
+                        <!-- CloudFlare -->
+                        <div class="col-sm-12 col-md-12 letsencrypt">
+                            <div class="form-group">
+                                <label class="custom-switch">
+                                    <input type="checkbox" class="custom-switch-input" name="meta[cloudflare_use]" value="1">
+                                    <span class="custom-switch-indicator"></span>
+                                    <span class="custom-switch-description"><%= i18n('ssl', 'use-cloudflare') %></span>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-sm-12 col-md-12 cloudflare letsencrypt">
+                            <div class="form-group">
+                                <label class="form-label">CloudFlare DNS API Token  <span class="form-required">*</span></label>
+                                <input type="text" name="meta[cloudflare_token]" class="form-control" id="cloudflare_token">
+                            </div>
+                        </div>
+
                         <!-- Lets encrypt -->
                         <div class="col-sm-12 col-md-12 letsencrypt">
                             <div class="form-group">

frontend/js/app/nginx/dead/form.js

@@ -23,6 +23,9 @@ module.exports = Mn.View.extend({
         hsts_enabled:       'input[name="hsts_enabled"]',
         hsts_subdomains:    'input[name="hsts_subdomains"]',
         http2_support:      'input[name="http2_support"]',
+        cloudflare_switch:  'input[name="meta[cloudflare_use]"]',
+        cloudflare_token:   'input[name="meta[cloudflare_token]"',
+        cloudflare:         '.cloudflare',
         letsencrypt:        '.letsencrypt'
     },
 
@@ -31,10 +34,12 @@ module.exports = Mn.View.extend({
             let id = this.ui.certificate_select.val();
             if (id === 'new') {
                 this.ui.letsencrypt.show().find('input').prop('disabled', false);
+                this.ui.cloudflare.hide();
             } else {
                 this.ui.letsencrypt.hide().find('input').prop('disabled', true);
             }
 
+
             let enabled = id === 'new' || parseInt(id, 10) > 0;
 
             let inputs = this.ui.ssl_forced.add(this.ui.http2_support);
@@ -76,6 +81,17 @@ module.exports = Mn.View.extend({
             }
         },
 
+        'change @ui.cloudflare_switch': function() {
+            let checked = this.ui.cloudflare_switch.prop('checked');
+            if (checked) {                
+                this.ui.cloudflare_token.prop('required', 'required');
+                this.ui.cloudflare.show();
+            } else {                
+                this.ui.cloudflare_token.prop('required', false);
+                this.ui.cloudflare.hide();                
+            }
+        },
+
         'click @ui.save': function (e) {
             e.preventDefault();
 
@@ -98,20 +114,23 @@ 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;
-                data.domain_names.map(function (name) {
-                    if (name.match(/\*/im)) {
-                        domain_err = true;
-                    }
-                });
+                if (!data.meta.cloudflare_use) {
+                    data.domain_names.map(function (name) {
+                        if (name.match(/\*/im)) {
+                            domain_err = true;
+                        }
+                    });
+                }
 
                 if (domain_err) {
-                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains');
+                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains without CloudFlare DNS.');
                     return;
                 }
 
-                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';
+                data.meta.cloudflare_use = data.meta.cloudflare_use === '1';
+                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';                
             } else {
                 data.certificate_id = parseInt(data.certificate_id, 10);
             }
@@ -127,6 +146,8 @@ module.exports = Mn.View.extend({
             }
 
             this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
+            this.ui.save.addClass('btn-loading');
+
             method(data)
                 .then(result => {
                     view.model.set(result);
@@ -140,6 +161,7 @@ module.exports = Mn.View.extend({
                 .catch(err => {
                     alert(err.message);
                     this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
+                    this.ui.save.removeClass('btn-loading');
                 });
         }
     },

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

@@ -141,6 +141,23 @@
                             </div>
                         </div>
 
+                        <!-- CloudFlare -->
+                        <div class="col-sm-12 col-md-12 letsencrypt">
+                            <div class="form-group">
+                                <label class="custom-switch">
+                                    <input type="checkbox" class="custom-switch-input" name="meta[cloudflare_use]" value="1">
+                                    <span class="custom-switch-indicator"></span>
+                                    <span class="custom-switch-description"><%= i18n('ssl', 'use-cloudflare') %></span>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-sm-12 col-md-12 cloudflare letsencrypt">
+                            <div class="form-group">
+                                <label class="form-label">CloudFlare DNS API Token  <span class="form-required">*</span></label>
+                                <input type="text" name="meta[cloudflare_token]" class="form-control" id="cloudflare_token">
+                            </div>
+                        </div>
+
                         <!-- Lets encrypt -->
                         <div class="col-sm-12 col-md-12 letsencrypt">
                             <div class="form-group">

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

@@ -33,6 +33,9 @@ module.exports = Mn.View.extend({
         hsts_enabled:       'input[name="hsts_enabled"]',
         hsts_subdomains:    'input[name="hsts_subdomains"]',
         http2_support:      'input[name="http2_support"]',
+        cloudflare_switch:  'input[name="meta[cloudflare_use]"]',
+        cloudflare_token:   'input[name="meta[cloudflare_token]"',
+        cloudflare:         '.cloudflare',
         forward_scheme:     'select[name="forward_scheme"]',
         letsencrypt:        '.letsencrypt'
     },
@@ -46,6 +49,7 @@ module.exports = Mn.View.extend({
             let id = this.ui.certificate_select.val();
             if (id === 'new') {
                 this.ui.letsencrypt.show().find('input').prop('disabled', false);
+                this.ui.cloudflare.hide();
             } else {
                 this.ui.letsencrypt.hide().find('input').prop('disabled', true);
             }
@@ -91,6 +95,17 @@ module.exports = Mn.View.extend({
             }
         },
 
+        'change @ui.cloudflare_switch': function() {
+            let checked = this.ui.cloudflare_switch.prop('checked');
+            if (checked) {                
+                this.ui.cloudflare_token.prop('required', 'required');
+                this.ui.cloudflare.show();
+            } else {                
+                this.ui.cloudflare_token.prop('required', false);
+                this.ui.cloudflare.hide();                
+            }
+        },
+
         'click @ui.add_location_btn': function (e) {
             e.preventDefault();
             
@@ -134,20 +149,23 @@ 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;
-                data.domain_names.map(function (name) {
-                    if (name.match(/\*/im)) {
-                        domain_err = true;
-                    }
-                });
+                if (!data.meta.cloudflare_use) {
+                    data.domain_names.map(function (name) {
+                        if (name.match(/\*/im)) {
+                            domain_err = true;
+                        }
+                    });
+                }
 
                 if (domain_err) {
-                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains');
+                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains without CloudFlare DNS.');
                     return;
                 }
 
-                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';
+                data.meta.cloudflare_use = data.meta.cloudflare_use === '1';
+                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';                
             } else {
                 data.certificate_id = parseInt(data.certificate_id, 10);
             }
@@ -163,6 +181,8 @@ module.exports = Mn.View.extend({
             }
 
             this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
+            this.ui.save.addClass('btn-loading');
+
             method(data)
                 .then(result => {
                     view.model.set(result);
@@ -176,6 +196,7 @@ module.exports = Mn.View.extend({
                 .catch(err => {
                     alert(err.message);
                     this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
+                    this.ui.save.removeClass('btn-loading');
                 });
         }
     },
@@ -203,7 +224,7 @@ module.exports = Mn.View.extend({
                     text:  input
                 };
             },
-            createFilter: /^(?:\*\.)?(?:[^.*]+\.?)+[^.]$/
+            createFilter: /^(?:\.)?(?:[^.*]+\.?)+[^.]$/
         });
 
         // Access Lists

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

@@ -97,6 +97,23 @@
                             </div>
                         </div>
 
+                        <!-- CloudFlare -->
+                        <div class="col-sm-12 col-md-12 letsencrypt">
+                            <div class="form-group">
+                                <label class="custom-switch">
+                                    <input type="checkbox" class="custom-switch-input" name="meta[cloudflare_use]" value="1">
+                                    <span class="custom-switch-indicator"></span>
+                                    <span class="custom-switch-description"><%= i18n('ssl', 'use-cloudflare') %></span>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-sm-12 col-md-12 cloudflare letsencrypt">
+                            <div class="form-group">
+                                <label class="form-label">CloudFlare DNS API Token  <span class="form-required">*</span></label>
+                                <input type="text" name="meta[cloudflare_token]" class="form-control" id="cloudflare_token">
+                            </div>
+                        </div>
+
                         <!-- Lets encrypt -->
                         <div class="col-sm-12 col-md-12 letsencrypt">
                             <div class="form-group">

frontend/js/app/nginx/redirection/form.js

@@ -23,6 +23,9 @@ module.exports = Mn.View.extend({
         hsts_enabled:       'input[name="hsts_enabled"]',
         hsts_subdomains:    'input[name="hsts_subdomains"]',
         http2_support:      'input[name="http2_support"]',
+        cloudflare_switch:  'input[name="meta[cloudflare_use]"]',
+        cloudflare_token:   'input[name="meta[cloudflare_token]"',
+        cloudflare:         '.cloudflare',
         letsencrypt:        '.letsencrypt'
     },
 
@@ -31,6 +34,7 @@ module.exports = Mn.View.extend({
             let id = this.ui.certificate_select.val();
             if (id === 'new') {
                 this.ui.letsencrypt.show().find('input').prop('disabled', false);
+                this.ui.cloudflare.hide();
             } else {
                 this.ui.letsencrypt.hide().find('input').prop('disabled', true);
             }
@@ -76,6 +80,17 @@ module.exports = Mn.View.extend({
             }
         },
 
+        'change @ui.cloudflare_switch': function() {
+            let checked = this.ui.cloudflare_switch.prop('checked');
+            if (checked) {                
+                this.ui.cloudflare_token.prop('required', 'required');
+                this.ui.cloudflare.show();
+            } else {                
+                this.ui.cloudflare_token.prop('required', false);
+                this.ui.cloudflare.hide();                
+            }
+        },
+
         'click @ui.save': function (e) {
             e.preventDefault();
 
@@ -100,20 +115,23 @@ 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;
-                data.domain_names.map(function (name) {
-                    if (name.match(/\*/im)) {
-                        domain_err = true;
-                    }
-                });
+                if (!data.meta.cloudflare_use) {
+                    data.domain_names.map(function (name) {
+                        if (name.match(/\*/im)) {
+                            domain_err = true;
+                        }
+                    });
+                }
 
                 if (domain_err) {
-                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains');
+                    alert('Cannot request Let\'s Encrypt Certificate for wildcard domains without CloudFlare DNS.');
                     return;
                 }
 
-                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';
+                data.meta.cloudflare_use = data.meta.cloudflare_use === '1';
+                data.meta.letsencrypt_agree = data.meta.letsencrypt_agree === '1';                
             } else {
                 data.certificate_id = parseInt(data.certificate_id, 10);
             }
@@ -129,6 +147,8 @@ module.exports = Mn.View.extend({
             }
 
             this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
+            this.ui.save.addClass('btn-loading');
+
             method(data)
                 .then(result => {
                     view.model.set(result);
@@ -142,6 +162,7 @@ module.exports = Mn.View.extend({
                 .catch(err => {
                     alert(err.message);
                     this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
+                    this.ui.save.removeClass('btn-loading');
                 });
         }
     },