Reverse proxy section done

src/nginxconfig/templates/domain_sections/reverse_proxy.vue

@@ -1,8 +1,82 @@
 <template>
-    <div>Hello world reverse proxy</div>
+    <div>
+        <div v-if="!reverseProxyEnabled" class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">Reverse proxy</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div class="control">
+                        <label class="text">
+                            Reverse proxy is disabled.
+                            <template v-if="$parent.$props.data.php.php.computed">
+                                <br />Reverse proxy cannot be enabled whilst PHP is enabled.
+                            </template>
+                            <template v-if="$parent.$props.data.python.python.computed">
+                                <br />Reverse proxy cannot be enabled whilst Python is enabled.
+                            </template>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-else class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Reverse proxy</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${reverseProxyChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="reverseProxy" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable reverse proxy
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="pathEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Path</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${pathChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <input v-model="path"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.path.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="proxyPassEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">proxy_pass</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${proxyPassChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <input v-model="proxyPass"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.proxyPass.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import PrettyCheck from 'pretty-checkbox-vue/check';
     import i18n from '../../i18n';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
@@ -10,7 +84,7 @@
     const defaults = {
         reverseProxy: {
             default: false,
-            enabled: true,
+            enabled: false,
         },
         path: {
             default: '/',
@@ -27,6 +101,9 @@
         display: 'Reverse proxy',                   // Display name for tab
         key: 'reverseProxy',                        // Key for data in parent
         delegated: delegatedFromDefaults(defaults), // Data the parent will present here
+        components: {
+            PrettyCheck,
+        },
         props: {
             data: Object,                           // Data delegated back to us from parent
         },
@@ -36,5 +113,39 @@
             };
         },
         computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        watch: {
+            // If the PHP or Python is enabled, the Reverse proxy will be forced off
+            '$parent.$props.data': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    if (data.php.php.computed || data.python.python.computed) {
+                        this.$props.data.reverseProxy.enabled = false;
+                        this.$props.data.reverseProxy.computed = false;
+                    } else {
+                        this.$props.data.reverseProxy.enabled = true;
+                        this.$props.data.reverseProxy.computed = this.$props.data.reverseProxy.value;
+                    }
+                },
+                deep: true,
+            },
+            // Disable all options if Reverse proxy is disabled
+            '$props.data.reverseProxy': {
+                handler(data) {
+                    const state = data.computed;
+                    if (state) {
+                        this.$props.data.path.enabled = true;
+                        this.$props.data.path.computed = this.$props.data.path.value;
+                        this.$props.data.proxyPass.enabled = true;
+                        this.$props.data.proxyPass.computed = this.$props.data.proxyPass.value;
+                    } else {
+                        this.$props.data.path.enabled = false;
+                        this.$props.data.path.computed = '';
+                        this.$props.data.proxyPass.enabled = false;
+                        this.$props.data.proxyPass.computed = '';
+                    }
+                },
+                deep: true,
+            },
+        },
     };
 </script>