mirror of
https://github.com/digitalocean/nginxconfig.io.git
synced 2025-10-15 19:19:21 +08:00
Add SSL, certbot & go live setup steps
This commit is contained in:
@@ -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,
|
||||
},
|
||||
|
Reference in New Issue
Block a user