Server section all done

package-lock.json

@@ -6254,6 +6254,19 @@
       "dev": true,
       "optional": true
     },
+    "pretty-checkbox": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-checkbox/-/pretty-checkbox-3.0.3.tgz",
+      "integrity": "sha1-1JyAE6j8CO4MLW695FNGS/28Qo4="
+    },
+    "pretty-checkbox-vue": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/pretty-checkbox-vue/-/pretty-checkbox-vue-1.1.9.tgz",
+      "integrity": "sha512-45HOanzF+BUTD5prwCoNrtEFYVzWtASTIIPtPQxGCajC097pFD/9mbyjEjoTsu8Tk4/rSyA7RNk6JpFWVHpLag==",
+      "requires": {
+        "pretty-checkbox": "^3.0.3"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",

package.json

@@ -37,6 +37,7 @@
     "do-bulma": "git+https://github.com/do-community/do-bulma.git",
     "do-vue": "git+https://github.com/do-community/do-vue.git",
     "parcel-bundler": "^1.12.4",
+    "pretty-checkbox-vue": "^1.1.9",
     "vue": "^2.6.11",
     "vue-hot-reload-api": "^2.3.3",
     "vuex": "^3.3.0"

src/nginxconfig/scss/style.scss

@@ -15,9 +15,14 @@ limitations under the License.
 */
 
 $header: #0071fe;
+$highlight: #f2c94c;
 @import "~do-bulma/src/style";
 
 .do-bulma {
+  $pretty--color-dark: $primary;
+  $pretty--color-default: $primary;
+  @import "~pretty-checkbox/src/pretty-checkbox";
+
   .tabs {
     ul {
       li {
@@ -63,4 +68,92 @@ $header: #0071fe;
     flex-direction: row;
     justify-content: space-between;
   }
+
+  .field-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -.5rem;
+
+    .field {
+      flex-grow: 1;
+      margin: 0 .5rem;
+      text-align: left;
+    }
+
+    + .field-row,
+    + .field {
+      margin-top: 1rem;
+    }
+  }
+
+  .field {
+    &.is-horizontal {
+      align-items: center;
+    }
+
+    &.is-changed {
+      input {
+        &,
+        &:focus {
+          background: rgba($highlight, .35);
+        }
+      }
+
+      .checkbox {
+        background: rgba($highlight, .35);
+      }
+    }
+
+    label {
+      @include sailec-medium;
+
+      color: $dark-blue;
+      font-size: 1rem;
+    }
+
+    .button {
+      &.is-static {
+        background: $panel;
+        border-color: $border;
+        border-style: solid;
+        border-width: 1px 0 1px 1px;
+        color: $dark-grey;
+        padding: 0 ($margin * 1.5);
+      }
+    }
+  }
+
+  .checkbox {
+    border-radius: $border-radius;
+    padding: .25rem .5rem;
+
+    .pretty {
+      &.p-icon {
+        font-size: 18px;
+        margin: 0;
+
+        .state {
+          .icon {
+            &::before {
+              color: $panel;
+              font-size: 14px;
+            }
+          }
+
+          label {
+            color: $dark-grey;
+            font-size: 14px;
+            padding-left: calc(#{$margin / 2} + 1.5em);
+            text-indent: initial;
+
+            &::before,
+            &::after {
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/nginxconfig/templates/app.vue

@@ -76,7 +76,8 @@ 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]).filter(d => d.default !== d.computed).length;
+                    prev += Object.values(current[1])
+                        .filter(d => d.enabled && d.default !== d.value).length;
                     return prev;
                 }, 0);
                 if (changes) return ` (${changes.toLocaleString()})`;

src/nginxconfig/templates/domain.vue

@@ -58,7 +58,8 @@ limitations under the License.
         methods: {
             changes(tab) {
                 if (tab === 'presets') return ''; // Ignore changes from presets
-                const changes = Object.values(this.$props.data[tab]).filter(d => d.default !== d.computed).length;
+                const changes = Object.values(this.$props.data[tab])
+                    .filter(d => d.enabled && d.default !== d.value).length;
                 if (changes) return ` (${changes.toLocaleString()})`;
                 return '';
             },

src/nginxconfig/templates/domain_sections/server.vue

@@ -1,11 +1,116 @@
 <template>
     <div>
-        Hello world server
+        <div class="field-row">
-        <input v-model="domain" type="text" />
+            <div :class="`field${domainChanged ? ' is-changed' : ''}`">
+                <label class="label">Domain</label>
+                <div class="control">
+                    <input v-model="domain" class="input" type="text" :placeholder="domainDefault" />
+                </div>
+            </div>
+
+            <div :class="`field${pathChanged ? ' is-changed' : ''}`">
+                <label class="label">Path</label>
+                <div class="control">
+                    <input v-model="path" class="input" type="text" :placeholder="`/var/www/${domain}`" />
+                </div>
+            </div>
+
+            <div :class="`field${documentRootChanged ? ' is-changed' : ''}`">
+                <label class="label">Document root</label>
+                <div class="control">
+                    <input v-model="documentRoot" class="input" type="text" :placeholder="documentRootDefault" />
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">www subdomain</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${wwwSubdomainChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="wwwSubdomain" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                (www.{{ domain }})
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="cdnSubdomainEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">CDN subdomain</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${cdnSubdomainChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="cdnSubdomain" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                (cdn.{{ domain }})
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Redirect subdomains</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${redirectSubdomainsChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="redirectSubdomains" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                ({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ domain }}
+                                <i class="fas fa-long-arrow-alt-right"></i>
+                                {{ wwwSubdomain ? 'www.' : '' }}{{ domain }})
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">listen</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field has-addons${listenIpv4Changed ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <a class="button is-static">
+                            IPv4
+                        </a>
+                    </div>
+                    <div class="control is-expanded">
+                        <input v-model="listenIpv4" class="input" type="text" :placeholder="listenIpv4Default" />
+                    </div>
+                </div>
+                <div :class="`field has-addons${listenIpv6Changed ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <a class="button is-static">
+                            IPv6
+                        </a>
+                    </div>
+                    <div class="control is-expanded">
+                        <input v-model="listenIpv6" class="input" type="text" :placeholder="listenIpv6Default" />
+                    </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';
@@ -50,6 +155,9 @@
         display: 'Server',                          // Display name for tab
         key: 'server',                              // 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
         },
@@ -59,5 +167,22 @@
             };
         },
         computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        watch: {
+            // Only allow CDN when WWW is enabled first
+            '$props.data.wwwSubdomain': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    const state = data.computed;
+                    if (state) {
+                        this.$props.data.cdnSubdomain.enabled = true;
+                        this.$props.data.cdnSubdomain.computed = this.$props.data.cdnSubdomain.value;
+                    } else {
+                        this.$props.data.cdnSubdomain.enabled = false;
+                        this.$props.data.cdnSubdomain.computed = false;
+                    }
+                },
+                deep: true,
+            },
+        },
     };
 </script>

src/nginxconfig/util/computed_from_defaults.js

@@ -9,6 +9,21 @@ export default (defaults) => {
                 this.$props.data[key].computed = value;
             },
         };
+        prev[key + 'Default'] = {
+            get() {
+                return this.$props.data[key].default;
+            },
+        };
+        prev[key + 'Enabled'] = {
+            get() {
+                return this.$props.data[key].enabled;
+            },
+        };
+        prev[key + 'Changed'] = {
+            get() {
+                return this.$props.data[key].enabled && this.$props.data[key].value !== this.$props.data[key].default;
+            },
+        };
         return prev;
     }, {});
 };