mirror of
https://github.com/digitalocean/nginxconfig.io
synced 2024-11-10 12:34:12 +00:00
HTTPS section all done
This commit is contained in:
MattIPv4
parent
fc6fd025b7
commit
361f3d8aa3
8 changed files with 323 additions and 39 deletions
|
|
@ -90,18 +90,9 @@ $highlight: #f2c94c;
|
|||
.field {
|
||||
&.is-horizontal {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.is-changed {
|
||||
input {
|
||||
&,
|
||||
&:focus {
|
||||
background: rgba($highlight, .35);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
background: rgba($highlight, .35);
|
||||
&.is-aligned-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
.filter(d => d.enabled && d.default !== d.value).length;
|
||||
prev += Object.keys(current[1]).filter(key => isChanged(current[1][key], current[0], key)).length;
|
||||
return prev;
|
||||
}, 0);
|
||||
if (changes) return ` (${changes.toLocaleString()})`;
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
.filter(d => d.enabled && d.default !== d.value).length;
|
||||
const changes = Object.keys(this.$props.data[tab])
|
||||
.filter(key => isChanged(this.$props.data[tab][key], tab, key)).length;
|
||||
if (changes) return ` (${changes.toLocaleString()})`;
|
||||
return '';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
@ -52,18 +218,111 @@
|
|||
};
|
||||
|
||||
export default {
|
||||
name: 'DomainHTTPS', // Component name
|
||||
display: 'HTTPS', // Display name for tab
|
||||
key: 'https', // Key for data in parent
|
||||
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||
name: 'DomainHTTPS', // Component name
|
||||
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
|
||||
data: Object, // Data delegated back to us from parent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -27,19 +27,19 @@
|
|||
};
|
||||
|
||||
export default {
|
||||
name: 'DomainPHP', // Component name
|
||||
display: 'PHP', // Display name for tab
|
||||
key: 'php', // Key for data in parent
|
||||
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||
name: 'DomainPHP', // Component name
|
||||
display: 'PHP', // Display name for tab
|
||||
key: 'php', // Key for data in parent
|
||||
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||
props: {
|
||||
data: Object, // Data delegated back to us from parent
|
||||
data: Object, // Data delegated back to us from parent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
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': {
|
||||
|
|
|
|||
|
|
@ -151,22 +151,22 @@
|
|||
};
|
||||
|
||||
export default {
|
||||
name: 'DomainServer', // Component name
|
||||
display: 'Server', // Display name for tab
|
||||
key: 'server', // Key for data in parent
|
||||
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||
name: 'DomainServer', // Component name
|
||||
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
|
||||
data: Object, // Data delegated back to us from parent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
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': {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
8
src/nginxconfig/util/is_changed.js
Normal file
8
src/nginxconfig/util/is_changed.js
Normal file
|
|
@ -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);
|
||||
};
|
||||
Loading…
Reference in a new issue