Add SSL, certbot & go live setup steps

This commit is contained in:
MattIPv4
2020-05-07 17:14:04 +01:00
parent 7584d018f6
commit 2809d5fa7a
6 changed files with 356 additions and 66 deletions

View File

@@ -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,
},