github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

HTTPS section all done

Browse Source
pull/111/head
MattIPv4 5 years ago
parent fc6fd025b7
commit 361f3d8aa3
8 changed files with 323 additions and 39 deletions
Show Stats Download Patch File Download Diff File

38
src/nginxconfig/scss/style.scss
Unescape View File

@ -90,18 +90,9 @@ $highlight: #f2c94c;
.field { .field {
&.is-horizontal { &.is-horizontal {
align-items: center; align-items: center;
}
&.is-changed {
input {
&,
&:focus {
background: rgba($highlight, .35);
}
}
.checkbox { &.is-aligned-top {
background: rgba($highlight, .35); align-items: flex-start;
} }
} }
@ -122,9 +113,32 @@ $highlight: #f2c94c;
padding: 0 ($margin * 1.5); padding: 0 ($margin * 1.5);
} }
} }
.control {
+ .control {
&:not(.is-expanded) {
margin-top: .25rem;
}
}
}
}
.is-changed {
input {
&,
&:focus {
background: rgba($highlight, .35);
}
}
.checkbox,
.radio {
background: rgba($highlight, .35);
}
} }
.checkbox { .checkbox,
.radio {
border-radius: $border-radius; border-radius: $border-radius;
padding: .25rem .5rem; padding: .25rem .5rem;

6
src/nginxconfig/templates/app.vue
Unescape View File

@ -49,9 +49,10 @@ limitations under the License.
<script> <script>
import clone from 'clone'; import clone from 'clone';
import i18n from '../i18n';
import Header from 'do-vue/src/templates/header'; import Header from 'do-vue/src/templates/header';
import Footer from 'do-vue/src/templates/footer'; import Footer from 'do-vue/src/templates/footer';
import isChanged from '../util/is_changed';
import i18n from '../i18n';
import Domain from './domain'; import Domain from './domain';
export default { export default {
@ -76,8 +77,7 @@ limitations under the License.
const data = this.$data.domains[index]; const data = this.$data.domains[index];
const changes = Object.entries(data).reduce((prev, current) => { const changes = Object.entries(data).reduce((prev, current) => {
if (current[0] === 'presets') return prev; // Ignore changes from presets if (current[0] === 'presets') return prev; // Ignore changes from presets
prev += Object.values(current[1]) prev += Object.keys(current[1]).filter(key => isChanged(current[1][key], current[0], key)).length;
.filter(d => d.enabled && d.default !== d.value).length;
return prev; return prev;
}, 0); }, 0);
if (changes) return ` (${changes.toLocaleString()})`; if (changes) return ` (${changes.toLocaleString()})`;

5
src/nginxconfig/templates/domain.vue
Unescape View File

@ -35,6 +35,7 @@ limitations under the License.
</template> </template>
<script> <script>
import isChanged from '../util/is_changed';
import * as Sections from './domain_sections'; import * as Sections from './domain_sections';
const tabs = Object.values(Sections); const tabs = Object.values(Sections);
@ -58,8 +59,8 @@ limitations under the License.
methods: { methods: {
changes(tab) { changes(tab) {
if (tab === 'presets') return ''; // Ignore changes from presets if (tab === 'presets') return ''; // Ignore changes from presets
const changes = Object.values(this.$props.data[tab]) const changes = Object.keys(this.$props.data[tab])
.filter(d => d.enabled && d.default !== d.value).length; .filter(key => isChanged(this.$props.data[tab][key], tab, key)).length;
if (changes) return ` (${changes.toLocaleString()})`; if (changes) return ` (${changes.toLocaleString()})`;
return ''; return '';
}, },

275
src/nginxconfig/templates/domain_sections/https.vue
Unescape View File

@ -1,8 +1,171 @@
<template> <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> </template>
<script> <script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';
import i18n from '../../i18n'; import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults'; import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults'; import computedFromDefaults from '../../util/computed_from_defaults';
@ -34,7 +197,10 @@
}, },
certType: { certType: {
default: 'letsEncrypt', default: 'letsEncrypt',
options: ['letsEncrypt', 'custom'], options: {
letsEncrypt: 'Let\'s Encrypt',
custom: 'Custom certificate',
},
enabled: true, enabled: true,
}, },
letsEncryptEmail: { letsEncryptEmail: {
@ -52,18 +218,111 @@
}; };
export default { export default {
name: 'DomainHTTPS', // Component name name: 'DomainHTTPS', // Component name
display: 'HTTPS', // Display name for tab display: 'HTTPS', // Display name for tab
key: 'https', // Key for data in parent key: 'https', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
PrettyRadio,
},
props: { props: {
data: Object, // Data delegated back to us from parent data: Object, // Data delegated back to us from parent
}, },
data () { data () {
return { return {
i18n, 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> </script>

12
src/nginxconfig/templates/domain_sections/php.vue
Unescape View File

@ -27,19 +27,19 @@
}; };
export default { export default {
name: 'DomainPHP', // Component name name: 'DomainPHP', // Component name
display: 'PHP', // Display name for tab display: 'PHP', // Display name for tab
key: 'php', // Key for data in parent key: 'php', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here delegated: delegatedFromDefaults(defaults), // Data the parent will present here
props: { props: {
data: Object, // Data delegated back to us from parent data: Object, // Data delegated back to us from parent
}, },
data () { data () {
return { return {
i18n, i18n,
}; };
}, },
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data computed: computedFromDefaults(defaults, 'php'), // Getters & setters for the delegated data
watch: { watch: {
// If the Reverse proxy is enabled, PHP will be forced off // If the Reverse proxy is enabled, PHP will be forced off
'$parent.$props.data': { '$parent.$props.data': {

12
src/nginxconfig/templates/domain_sections/server.vue
Unescape View File

@ -151,22 +151,22 @@
}; };
export default { export default {
name: 'DomainServer', // Component name name: 'DomainServer', // Component name
display: 'Server', // Display name for tab display: 'Server', // Display name for tab
key: 'server', // Key for data in parent key: 'server', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: { components: {
PrettyCheck, PrettyCheck,
}, },
props: { props: {
data: Object, // Data delegated back to us from parent data: Object, // Data delegated back to us from parent
}, },
data () { data () {
return { return {
i18n, i18n,
}; };
}, },
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data computed: computedFromDefaults(defaults, 'server'), // Getters & setters for the delegated data
watch: { watch: {
// Only allow CDN when WWW is enabled first // Only allow CDN when WWW is enabled first
'$props.data.wwwSubdomain': { '$props.data.wwwSubdomain': {

6
src/nginxconfig/util/computed_from_defaults.js
Unescape View File

@ -1,4 +1,6 @@
export default (defaults) => { import isChanged from './is_changed';
export default (defaults, cat) => {
return Object.keys(defaults).reduce((prev, key) => { return Object.keys(defaults).reduce((prev, key) => {
prev[key] = { prev[key] = {
get() { get() {
@ -21,7 +23,7 @@ export default (defaults) => {
}; };
prev[key + 'Changed'] = { prev[key + 'Changed'] = {
get() { 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; return prev;

8
src/nginxconfig/util/is_changed.js
Unescape View 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);
};
Write Preview
Loading…
Cancel
Save