From f23b1e89d6c5e3bc5d3e92cb25be2ff07a1271e7 Mon Sep 17 00:00:00 2001
From: Faiz Azhar <faiz@cloudflare.com>
Date: Thu, 15 Oct 2020 20:23:01 +0800
Subject: [PATCH] #116 Log Cloudflare headers

---
 .../en/templates/domain_sections/logging.js   |  9 +++
 .../templates/domain_sections/logging.vue     | 75 +++++++++++++++++++
 2 files changed, 84 insertions(+)

diff --git a/src/nginxconfig/i18n/en/templates/domain_sections/logging.js b/src/nginxconfig/i18n/en/templates/domain_sections/logging.js
index 16f42e7..015a7cd 100644
--- a/src/nginxconfig/i18n/en/templates/domain_sections/logging.js
+++ b/src/nginxconfig/i18n/en/templates/domain_sections/logging.js
@@ -29,4 +29,13 @@ import common from '../../common';
 export default {
     byDomain: 'by domain',
     enableForThisDomain: `${common.enable} for this domain`,
+    cloudflare: 'Cloudflare Headers',
+    cfIpCountry: 'CF-IPCountry',
+    cfConnectingIp: 'CF-Connecting-IP',
+    xForwardedFor: 'X-Forwarded-For',
+    xForwardedProto: 'X-Forwarded-Proto',
+    trueClientIp: 'True-Client-IP',
+    cfRay: 'CF-Ray',
+    cfVisitor: 'CF-Visitor',
+    cdnLoop: 'CDN-Loop',
 };
diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_sections/logging.vue
index 16fd629..c497f07 100644
--- a/src/nginxconfig/templates/domain_sections/logging.vue
+++ b/src/nginxconfig/templates/domain_sections/logging.vue
@@ -43,6 +43,65 @@ THE SOFTWARE.
                 </div>
             </div>
         </div>
+        <div v-if="accessLogEnabled" :class="`control${accessLogChanged ? ' is-changed' : ''}`">
+        <div class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">{{ i18n.templates.domainSections.logging.cloudflare }}</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.cfIpCountry }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.cfConnectingIp }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.xForwardedFor }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.xForwardedProto }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.trueClientIp }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.cfRay }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.cfVisitor }}
+                        </PrettyCheck>
+                    </div>
+                    <div class="checkbox">
+                        <PrettyCheck v-model="accessLog" class="p-curve p-fill p-icon">
+                            <i slot="extra" class="icon fas fa-check"></i>
+                            {{ i18n.templates.domainSections.logging.cdnLoop }}
+                        </PrettyCheck>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
 
         <div class="field is-horizontal">
             <div class="field-label">
@@ -98,5 +157,21 @@ THE SOFTWARE.
             };
         },
         computed: computedFromDefaults(defaults, 'logging'),    // Getters & setters for the delegated data
+        watch: {
+            // Disable Cloudflare headers if access_log by domain is disabled
+            '$props.data': {
+                handler() {
+                    // hstsSubdomains
+                    if (this.$props.data.accessLog.computed) {
+                        this.$props.data.cloudflare.enabled = true;
+                        this.$props.data.cloudflare.computed = this.$props.data.hstsSubdomains.value;
+                    } else {
+                        this.$props.data.cloudflare.enabled = false;
+                        this.$props.data.cloudflare.computed = false;
+                    }
+                },
+                deep: true,
+            },
+        },
     };
 </script>