From 2809d5fa7a0031ed5e30c2da374243f3adc3f3ec Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Thu, 7 May 2020 17:14:04 +0100
Subject: [PATCH] Add SSL, certbot & go live setup steps

---
 src/nginxconfig/scss/style.scss               |  22 ++-
 .../templates/global_sections/https.vue       | 158 ++++++++++++------
 .../templates/setup_sections/certbot.vue      | 126 ++++++++++++++
 .../templates/setup_sections/go_live.vue      |  30 ++++
 .../templates/setup_sections/index.js         |   3 +
 .../templates/setup_sections/ssl.vue          |  83 +++++++++
 6 files changed, 356 insertions(+), 66 deletions(-)
 create mode 100644 src/nginxconfig/templates/setup_sections/certbot.vue
 create mode 100644 src/nginxconfig/templates/setup_sections/go_live.vue
 create mode 100644 src/nginxconfig/templates/setup_sections/ssl.vue

diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 9a1e82c..3b9e2e3 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -81,10 +81,9 @@ $highlight: #f2c94c;
   .panel {
     margin-top: 0;
     padding: 1.5rem 0 2rem;
+    text-align: left;
 
     &.presets {
-      text-align: left;
-
       .header-group,
       .buttons-group {
         display: flex;
@@ -115,21 +114,20 @@ $highlight: #f2c94c;
     }
 
     &.setup {
-      ol {
+      p {
         color: $dark-blue;
+        overflow-wrap: break-word;
+
+        a {
+          text-decoration: none;
+        }
+      }
+
+      ol {
         margin: 0 1rem;
-        text-align: left;
 
         li {
           margin: 0 0 1.5rem;
-
-          p {
-            overflow-wrap: break-word;
-
-            a {
-              text-decoration: none;
-            }
-          }
         }
       }
     }
diff --git a/src/nginxconfig/templates/global_sections/https.vue b/src/nginxconfig/templates/global_sections/https.vue
index 3beffd1..dadb0cd 100644
--- a/src/nginxconfig/templates/global_sections/https.vue
+++ b/src/nginxconfig/templates/global_sections/https.vue
@@ -1,77 +1,94 @@
 <template>
     <div>
-        <div class="field is-horizontal is-aligned-top">
+        <div v-if="!sslProfileEnabled" class="field is-horizontal is-aligned-top">
             <div class="field-label">
                 <label class="label">SSL profile</label>
             </div>
             <div class="field-body">
                 <div class="field">
+                    <div class="control">
+                        <label class="text">
+                            HTTPS must be enabled on at least one site to configure global HTTPS settings.
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <template v-else>
+            <div class="field is-horizontal is-aligned-top">
+                <div class="field-label">
+                    <label class="label">SSL profile</label>
+                </div>
+                <div class="field-body">
                     <div class="field">
-                        <div v-for="(name, value) in $props.data.sslProfile.options"
-                             :class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
-                        >
-                            <div class="radio">
-                                <PrettyRadio v-model="sslProfile" :value="value" class="p-default p-round p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
-                                    {{ name }}
-                                </PrettyRadio>
+                        <div class="field">
+                            <div v-for="(name, value) in $props.data.sslProfile.options"
+                                 :class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
+                            >
+                                <div class="radio">
+                                    <PrettyRadio v-model="sslProfile" :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>
-        </div>
 
-        <div class="field is-horizontal is-aligned-top">
-            <div class="field-label">
-                <label class="label">OCSP DNS Resolvers</label>
-            </div>
-            <div class="field-body">
-                <div class="field">
-                    <div :class="`control${ocspCloudflareChanged ? ' is-changed' : ''}`">
-                        <div class="checkbox">
-                            <PrettyCheck v-model="ocspCloudflare" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
-                                Cloudflare Resolver
-                            </PrettyCheck>
+            <div class="field is-horizontal is-aligned-top">
+                <div class="field-label">
+                    <label class="label">OCSP DNS Resolvers</label>
+                </div>
+                <div class="field-body">
+                    <div class="field">
+                        <div :class="`control${ocspCloudflareChanged ? ' is-changed' : ''}`">
+                            <div class="checkbox">
+                                <PrettyCheck v-model="ocspCloudflare" class="p-default p-curve p-fill p-icon">
+                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    Cloudflare Resolver
+                                </PrettyCheck>
+                            </div>
                         </div>
-                    </div>
-                    <div :class="`control${ocspGoogleChanged ? ' is-changed' : ''}`">
-                        <div class="checkbox">
-                            <PrettyCheck v-model="ocspGoogle" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
-                                Google Public DNS
-                            </PrettyCheck>
+                        <div :class="`control${ocspGoogleChanged ? ' is-changed' : ''}`">
+                            <div class="checkbox">
+                                <PrettyCheck v-model="ocspGoogle" class="p-default p-curve p-fill p-icon">
+                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    Google Public DNS
+                                </PrettyCheck>
+                            </div>
                         </div>
-                    </div>
-                    <div :class="`control${ocspOpenDnsChanged ? ' is-changed' : ''}`">
-                        <div class="checkbox">
-                            <PrettyCheck v-model="ocspOpenDns" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
-                                OpenDNS
-                            </PrettyCheck>
+                        <div :class="`control${ocspOpenDnsChanged ? ' is-changed' : ''}`">
+                            <div class="checkbox">
+                                <PrettyCheck v-model="ocspOpenDns" class="p-default p-curve p-fill p-icon">
+                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    OpenDNS
+                                </PrettyCheck>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div v-if="letsEncryptRootEnabled" class="field is-horizontal">
-            <div class="field-label">
-                <label class="label">Let's Encrypt webroot</label>
-            </div>
-            <div class="field-body">
-                <div class="field">
-                    <div :class="`control${letsEncryptRootChanged ? ' is-changed' : ''}`">
-                        <input v-model="letsEncryptRoot"
-                               class="input"
-                               type="text"
-                               :placeholder="$props.data.letsEncryptRoot.default"
-                        />
+            <div v-if="letsEncryptRootEnabled" class="field is-horizontal">
+                <div class="field-label">
+                    <label class="label">Let's Encrypt webroot</label>
+                </div>
+                <div class="field-body">
+                    <div class="field">
+                        <div :class="`control${letsEncryptRootChanged ? ' is-changed' : ''}`">
+                            <input v-model="letsEncryptRoot"
+                                   class="input"
+                                   type="text"
+                                   :placeholder="$props.data.letsEncryptRoot.default"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 
@@ -139,19 +156,52 @@
                 },
                 deep: true,
             },
-            // Enable LE webroot if any site uses LE
             '$parent.$parent.$data.domains': {
                 handler(data) {
+                    let httpsEnabled = false, leEnabled = false;
+
                     for (const domain of data) {
+                        // Enable HTTPS server settings if any site uses HTTPS
+                        if (domain && domain.https && domain.https.https && domain.https.https.computed) {
+                            this.$props.data.sslProfile.enabled = true;
+                            this.$props.data.sslProfile.computed = this.$props.data.sslProfile.value;
+                            this.$props.data.ocspCloudflare.enabled = true;
+                            this.$props.data.ocspCloudflare.computed = this.$props.data.ocspCloudflare.value;
+                            this.$props.data.ocspGoogle.enabled = true;
+                            this.$props.data.ocspGoogle.computed = this.$props.data.ocspGoogle.value;
+                            this.$props.data.ocspOpenDns.enabled = true;
+                            this.$props.data.ocspOpenDns.computed = this.$props.data.ocspOpenDns.value;
+                            this.$props.data.letsEncryptRoot.enabled = true;
+                            this.$props.data.letsEncryptRoot.computed = this.$props.data.letsEncryptRoot.value;
+                            httpsEnabled = true;
+                        }
+
+                        // Enable LE webroot if any site uses LE
                         if (domain && domain.https && domain.https.certType
                             && domain.https.certType.computed === 'letsEncrypt') {
                             this.$props.data.letsEncryptRoot.enabled = true;
                             this.$props.data.letsEncryptRoot.computed = this.$props.data.letsEncryptRoot.value;
-                            return;
+                            leEnabled = true;
                         }
                     }
-                    this.$props.data.letsEncryptRoot.enabled = false;
-                    this.$props.data.letsEncryptRoot.computed = '';
+
+                    if (!httpsEnabled) {
+                        this.$props.data.sslProfile.enabled = false;
+                        this.$props.data.sslProfile.computed = '';
+                        this.$props.data.ocspCloudflare.enabled = false;
+                        this.$props.data.ocspCloudflare.computed = false;
+                        this.$props.data.ocspGoogle.enabled = false;
+                        this.$props.data.ocspGoogle.computed = false;
+                        this.$props.data.ocspOpenDns.enabled = false;
+                        this.$props.data.ocspOpenDns.computed = false;
+                        this.$props.data.letsEncryptRoot.enabled = false;
+                        this.$props.data.letsEncryptRoot.computed = '';
+                    }
+
+                    if (!leEnabled) {
+                        this.$props.data.letsEncryptRoot.enabled = false;
+                        this.$props.data.letsEncryptRoot.computed = '';
+                    }
                 },
                 deep: true,
             },
diff --git a/src/nginxconfig/templates/setup_sections/certbot.vue b/src/nginxconfig/templates/setup_sections/certbot.vue
new file mode 100644
index 0000000..f9f86fc
--- /dev/null
+++ b/src/nginxconfig/templates/setup_sections/certbot.vue
@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <ol v-if="letsEncryptActive">
+            <li>
+                <p>
+                    Comment out SSL related directives in the configuration:
+                    <br />
+                    <code class="slim">sed -i -r 's/(listen .*443)/\1;#/g;
+                        s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' {{ sitesAvailable }}</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Reload your NGINX server:
+                    <br />
+                    <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Obtain SSL certificates from Let's Encrypt using Certbot:
+                    <template v-for="cmd in certbotCmds">
+                        <br />
+                        <code class="slim">{{ cmd }}</code>
+                    </template>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Uncomment SSL related directives in the configuration:
+                    <br />
+                    <code class="slim">sed -i -r 's/#?;#//g' {{ sitesAvailable }}</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Reload your NGINX server:
+                    <br />
+                    <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Configure Certbot to reload NGINX when it successfully renews certificates:
+                    <br />
+                    <code class="slim">echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code>
+                    <br />
+                    <code class="slim">sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code>
+                </p>
+            </li>
+        </ol>
+
+        <div v-else class="field is-horizontal">
+            <div class="field-body">
+                <div class="field">
+                    <div class="control">
+                        <label class="text">
+                            Certbot does not need to be set up for your NGINX configuration.
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import i18n from '../../i18n';
+
+    export default {
+        name: 'SetupCertbot',
+        display: 'Certbot',
+        key: 'certbot',
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                i18n,
+            };
+        },
+        computed: {
+            nginxDir() {
+                return this.$props.data.global.nginx.nginxConfigDirectory.computed.replace(/\/+$/, '');
+            },
+            letsEncryptDir() {
+                return this.$props.data.global.https.letsEncryptRoot.computed.replace(/\/+$/, '');
+            },
+            letsEncryptActive() {
+                for (const domain of this.$props.data.domains) {
+                    if (domain && domain.https.certType.computed === 'letsEncrypt') {
+                        return true;
+                    }
+                }
+                return false;
+            },
+            sitesAvailable() {
+                const enabledAvailable = this.$props.data.global.tools.symlinkVhost.computed ? 'available' : 'enabled';
+                return this.$props.data.domains
+                    .filter(domain => domain.https.certType.computed === 'letsEncrypt')
+                    .map(domain => `${this.nginxDir}/sites-${enabledAvailable}/${domain.server.domain.computed}.conf`)
+                    .join(' ');
+            },
+            certbotCmds() {
+                return this.$props.data.domains
+                    .filter(domain => domain.https.certType.computed === 'letsEncrypt')
+                    .map(domain => (
+                        [
+                            'certbot certonly --webroot',
+                            `-d ${domain.server.domain.computed}`,
+                            domain.server.wwwSubdomain.computed ? `-d www.${domain.server.domain.computed}` : null,
+                            domain.server.cdnSubdomain.computed ? `-d cdn.${domain.server.domain.computed}` : null,
+                            `--email ${domain.https.letsEncryptEmail.computed}`,
+                            `-w ${this.letsEncryptDir}`,
+                            '-n --agree-tos --force-renewal',
+                        ].filter(x => x !== null).join(' ')
+                    ));
+            },
+        },
+    };
+</script>
diff --git a/src/nginxconfig/templates/setup_sections/go_live.vue b/src/nginxconfig/templates/setup_sections/go_live.vue
new file mode 100644
index 0000000..30c81d5
--- /dev/null
+++ b/src/nginxconfig/templates/setup_sections/go_live.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <p>
+            <b>Let's go live!</b> 🎉
+        </p>
+        <p>
+            Reload NGINX to load in your new configuration:
+            <br />
+            <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+        </p>
+    </div>
+</template>
+
+<script>
+    import i18n from '../../i18n';
+
+    export default {
+        name: 'SetupGoLive',
+        display: 'Go live!',
+        key: 'goLive',
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                i18n,
+            };
+        },
+    };
+</script>
diff --git a/src/nginxconfig/templates/setup_sections/index.js b/src/nginxconfig/templates/setup_sections/index.js
index ae26dd7..f149966 100644
--- a/src/nginxconfig/templates/setup_sections/index.js
+++ b/src/nginxconfig/templates/setup_sections/index.js
@@ -1 +1,4 @@
 export { default as Download } from './download';
+export { default as SSL } from './ssl';
+export { default as Certbot } from './certbot';
+export { default as GoLive } from './go_live';
diff --git a/src/nginxconfig/templates/setup_sections/ssl.vue b/src/nginxconfig/templates/setup_sections/ssl.vue
new file mode 100644
index 0000000..cdd1cde
--- /dev/null
+++ b/src/nginxconfig/templates/setup_sections/ssl.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <ol v-if="diffieHellmanValue || letsEncryptActive">
+            <li v-if="diffieHellmanValue">
+                <p>
+                    Generate <b>Diffie-Hellman keys</b> by running this command on your server:
+                    <br />
+                    <code class="slim">openssl dhparam -out {{ nginxDir }}/dhparam.pem {{ diffieHellmanValue }}</code>
+                </p>
+            </li>
+
+            <li v-if="letsEncryptActive">
+                <p>
+                    Create a common <b>ACME-challenge</b> directory (for <b>Let's Encrypt</b>):
+                    <br />
+                    <code class="slim">mkdir -p {{ letsEncryptDir }}</code>
+                    <br />
+                    <code class="slim">chown {{ nginxUser }} {{ letsEncryptDir }}</code>
+                </p>
+            </li>
+        </ol>
+
+        <div v-else class="field is-horizontal">
+            <div class="field-body">
+                <div class="field">
+                    <div class="control">
+                        <label class="text">
+                            No additional steps are needed to set up SSL for your NGINX configuration.
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import i18n from '../../i18n';
+
+    export default {
+        name: 'SetupSSL',
+        display: 'SSL init',
+        key: 'ssl',
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                i18n,
+            };
+        },
+        computed: {
+            nginxDir() {
+                return this.$props.data.global.nginx.nginxConfigDirectory.computed.replace(/\/+$/, '');
+            },
+            letsEncryptDir() {
+                return this.$props.data.global.https.letsEncryptRoot.computed.replace(/\/+$/, '');
+            },
+            nginxUser() {
+                return this.$props.data.global.nginx.user.computed;
+            },
+            diffieHellmanValue() {
+                switch (this.$props.data.global.https.sslProfile.computed) {
+                case 'intermediate':
+                    return 2048;
+                case 'old':
+                    return 1024;
+                case 'modern':
+                default:
+                    return 0;
+                }
+            },
+            letsEncryptActive() {
+                for (const domain of this.$props.data.domains) {
+                    if (domain && domain.https.certType.computed === 'letsEncrypt') {
+                        return true;
+                    }
+                }
+                return false;
+            },
+        },
+    };
+</script>