HTTPS section all done

src/nginxconfig/scss/style.scss

@@ -90,18 +90,9 @@ $highlight: #f2c94c;
   .field {
     &.is-horizontal {
       align-items: center;
-    }
 
-    &.is-changed {
+      &.is-aligned-top {
-      input {
+        align-items: flex-start;
-        &,
-        &:focus {
-          background: rgba($highlight, .35);
-        }
-      }
-
-      .checkbox {
-        background: rgba($highlight, .35);
       }
     }
 
@@ -122,9 +113,32 @@ $highlight: #f2c94c;
         padding: 0 ($margin * 1.5);
       }
     }
+
+    .control {
+      + .control {
+        &:not(.is-expanded) {
+          margin-top: .25rem;
+        }
+      }
+    }
   }
 
-  .checkbox {
+  .is-changed {
+    input {
+      &,
+      &:focus {
+        background: rgba($highlight, .35);
+      }
+    }
+
+    .checkbox,
+    .radio {
+      background: rgba($highlight, .35);
+    }
+  }
+
+  .checkbox,
+  .radio {
     border-radius: $border-radius;
     padding: .25rem .5rem;
 

src/nginxconfig/templates/app.vue

@@ -49,9 +49,10 @@ limitations under the License.
 
 <script>
     import clone from 'clone';
-    import i18n from '../i18n';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
+    import isChanged from '../util/is_changed';
+    import i18n from '../i18n';
     import Domain from './domain';
 
     export default {
@@ -76,8 +77,7 @@ limitations under the License.
                 const data = this.$data.domains[index];
                 const changes = Object.entries(data).reduce((prev, current) => {
                     if (current[0] === 'presets') return prev; // Ignore changes from presets
-                    prev += Object.values(current[1])
+                    prev += Object.keys(current[1]).filter(key => isChanged(current[1][key], current[0], key)).length;
-                        .filter(d => d.enabled && d.default !== d.value).length;
                     return prev;
                 }, 0);
                 if (changes) return ` (${changes.toLocaleString()})`;

src/nginxconfig/templates/domain.vue

@@ -35,6 +35,7 @@ limitations under the License.
 </template>
 
 <script>
+    import isChanged from '../util/is_changed';
     import * as Sections from './domain_sections';
 
     const tabs = Object.values(Sections);
@@ -58,8 +59,8 @@ limitations under the License.
         methods: {
             changes(tab) {
                 if (tab === 'presets') return ''; // Ignore changes from presets
-                const changes = Object.values(this.$props.data[tab])
+                const changes = Object.keys(this.$props.data[tab])
-                    .filter(d => d.enabled && d.default !== d.value).length;
+                    .filter(key => isChanged(this.$props.data[tab][key], tab, key)).length;
                 if (changes) return ` (${changes.toLocaleString()})`;
                 return '';
             },

src/nginxconfig/templates/domain_sections/https.vue

@@ -1,8 +1,171 @@
 <template>
-    <div>Hello world https</div>
+    <div>
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">HTTPS</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${httpsChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="https" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable encrypted SSL connections
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="http2Enabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">HTTP/2</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${http2Changed ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="http2" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable HTTP/2 connections
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="forceHttpsEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Force HTTPS</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${forceHttpsChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="forceHttps" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                (http://{{ $parent.$props.data.server.domain.value }}
+                                <i class="fas fa-long-arrow-alt-right"></i>
+                                https://{{ $parent.$props.data.server.domain.value }})
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="hstsEnabled" class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">HSTS</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${hstsChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="hsts" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable Strict Transport Security
+                            </PrettyCheck>
+                        </div>
+                    </div>
+
+                    <div v-if="hstsSubdomainsEnabled" :class="`control${hstsSubdomainsChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="hstsSubdomains" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                includeSubDomains
+                            </PrettyCheck>
+                        </div>
+                    </div>
+
+                    <div v-if="hstsPreloadEnabled" :class="`control${hstsPreloadChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="hstsPreload" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                preload
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="certTypeEnabled" class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">Certification type</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${certTypeChanged ? ' is-changed' : ''}`">
+                    <div v-for="(name, value) in $props.data.certType.options" class="control">
+                        <div class="radio">
+                            <PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                {{ name }}
+                            </PrettyRadio>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="letsEncryptEmailEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Let's Encrypt email</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${letsEncryptEmailChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <input v-model="letsEncryptEmail"
+                               class="input"
+                               type="text"
+                               :placeholder="`info@${$parent.$props.data.server.domain.value}`"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="sslCertificateEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">ssl_certificate</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${sslCertificateChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <input v-model="sslCertificate"
+                               class="input"
+                               type="text"
+                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.value}.crt`"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="sslCertificateKeyEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">ssl_certificate_key</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${sslCertificateKeyChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <input v-model="sslCertificateKey"
+                               class="input"
+                               type="text"
+                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.value}.key`"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import PrettyCheck from 'pretty-checkbox-vue/check';
+    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import i18n from '../../i18n';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
@@ -34,7 +197,10 @@
         },
         certType: {
             default: 'letsEncrypt',
-            options: ['letsEncrypt', 'custom'],
+            options: {
+                letsEncrypt: 'Let\'s Encrypt',
+                custom: 'Custom certificate',
+            },
             enabled: true,
         },
         letsEncryptEmail: {
@@ -56,6 +222,10 @@
         display: 'HTTPS',                                       // Display name for tab
         key: 'https',                                           // Key for data in parent
         delegated: delegatedFromDefaults(defaults),             // Data the parent will present here
+        components: {
+            PrettyCheck,
+            PrettyRadio,
+        },
         props: {
             data: Object,                                       // Data delegated back to us from parent
         },
@@ -64,6 +234,95 @@
                 i18n,
             };
         },
-        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        computed: computedFromDefaults(defaults, 'https'), // Getters & setters for the delegated data
+        watch: {
+            // Disable everything if https is disabled
+            '$props.data.https': {
+                handler(data) {
+                    const state = data.computed;
+                    if (state) {
+                        this.$props.data.http2.enabled = true;
+                        this.$props.data.http2.computed = this.$props.data.http2.value;
+                        this.$props.data.forceHttps.enabled = true;
+                        this.$props.data.forceHttps.computed = this.$props.data.forceHttps.value;
+                        this.$props.data.hsts.enabled = true;
+                        this.$props.data.hsts.computed = this.$props.data.hsts.value;
+                        this.$props.data.certType.enabled = true;
+                        this.$props.data.certType.computed = this.$props.data.certType.value;
+                    } else {
+                        this.$props.data.http2.enabled = false;
+                        this.$props.data.http2.computed = false;
+                        this.$props.data.forceHttps.enabled = false;
+                        this.$props.data.forceHttps.computed = false;
+                        this.$props.data.hsts.enabled = false;
+                        this.$props.data.hsts.computed = false;
+                        this.$props.data.certType.enabled = false;
+                        this.$props.data.certType.computed = '';
+                    }
+                },
+                deep: true,
+            },
+            // Disable hsts options if hsts is disabled
+            '$props.data': {
+                handler() {
+                    // hstsSubdomains
+                    if (this.$props.data.hsts.computed) {
+                        this.$props.data.hstsSubdomains.enabled = true;
+                        this.$props.data.hstsSubdomains.computed = this.$props.data.hstsSubdomains.value;
+                    } else {
+                        this.$props.data.hstsSubdomains.enabled = false;
+                        this.$props.data.hstsSubdomains.computed = false;
+                    }
+
+                    // hstsPreload
+                    if (this.$props.data.hsts.computed && this.$props.data.hstsSubdomains.computed) {
+                        this.$props.data.hstsPreload.enabled = true;
+                        this.$props.data.hstsPreload.computed = this.$props.data.hstsPreload.value;
+                    } else {
+                        this.$props.data.hstsPreload.enabled = false;
+                        this.$props.data.hstsPreload.computed = false;
+                    }
+                },
+                deep: true,
+            },
+            // Toggle form elms based on cert selection
+            '$props.data.certType': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    // Hide all if disabled
+                    if (!data.enabled) {
+                        this.$props.data.letsEncryptEmail.enabled = false;
+                        this.$props.data.letsEncryptEmail.computed = '';
+                        this.$props.data.sslCertificate.enabled = false;
+                        this.$props.data.sslCertificate.computed = '';
+                        this.$props.data.sslCertificateKey.enabled = false;
+                        this.$props.data.sslCertificateKey.computed = '';
+                    } else {
+                        // First, check its valid
+                        if (!Object.keys(data.options).includes(data.computed)) data.computed = data.default;
+
+                        // Show the correct fields
+                        if (data.computed === 'letsEncrypt') {
+                            this.$props.data.letsEncryptEmail.enabled = true;
+                            this.$props.data.letsEncryptEmail.computed = this.$props.data.letsEncryptEmail.value;
+
+                            this.$props.data.sslCertificate.enabled = false;
+                            this.$props.data.sslCertificate.computed = '';
+                            this.$props.data.sslCertificateKey.enabled = false;
+                            this.$props.data.sslCertificateKey.computed = '';
+                        } else {
+                            this.$props.data.sslCertificate.enabled = true;
+                            this.$props.data.sslCertificate.computed = this.$props.data.sslCertificate.value;
+                            this.$props.data.sslCertificateKey.enabled = true;
+                            this.$props.data.sslCertificateKey.computed = this.$props.data.sslCertificateKey.value;
+
+                            this.$props.data.letsEncryptEmail.enabled = false;
+                            this.$props.data.letsEncryptEmail.computed = '';
+                        }
+                    }
+                },
+                deep: true,
+            },
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/php.vue

@@ -39,7 +39,7 @@
                 i18n,
             };
         },
-        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        computed: computedFromDefaults(defaults, 'php'), // Getters & setters for the delegated data
         watch: {
             // If the Reverse proxy is enabled, PHP will be forced off
             '$parent.$props.data': {

src/nginxconfig/templates/domain_sections/server.vue

@@ -166,7 +166,7 @@
                 i18n,
             };
         },
-        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        computed: computedFromDefaults(defaults, 'server'), // Getters & setters for the delegated data
         watch: {
             // Only allow CDN when WWW is enabled first
             '$props.data.wwwSubdomain': {

src/nginxconfig/util/computed_from_defaults.js

@@ -1,4 +1,6 @@
-export default (defaults) => {
+import isChanged from './is_changed';
+
+export default (defaults, cat) => {
     return Object.keys(defaults).reduce((prev, key) => {
         prev[key] = {
             get() {
@@ -21,7 +23,7 @@ export default (defaults) => {
         };
         prev[key + 'Changed'] = {
             get() {
-                return this.$props.data[key].enabled && this.$props.data[key].value !== this.$props.data[key].default;
+                return isChanged(this.$props.data[key], cat, key);
             },
         };
         return prev;

src/nginxconfig/util/is_changed.js

@@ -0,0 +1,8 @@
+export default (prop, cat, key) => {
+    // Show as changed when enabled & not default
+    // Show php as changed when completely disabled (by reverse proxy)
+    // Show reverse proxy as changed when completely disabled (by php)
+    return (prop.enabled && prop.value !== prop.default)
+        || (cat === 'php' && key === 'php' && prop.computed !== prop.default)
+        || (cat === 'reverseProxy' && key === 'reverseProxy' && prop.computed !== prop.default);
+};