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

global security tab

pull/111/head
MattIPv4 2020-05-01 18:54:01 +01:00
parent 89d8af3912
commit 3d2ae20ecf
5 changed files with 215 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -8291,6 +8291,11 @@
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
},
"vue-select": {
"version": "3.10.3",
"resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.3.tgz",
"integrity": "sha512-SgLmiSwnJwT2erxjq42AA1iTzu1uqhA5MPuF4UDtGot5YSgJLKy71H0LO0hHaBpIjb7d/nJHiufYKcrSakaupw=="
},
"vue-template-compiler": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",

1
package.json
View File

@ -40,6 +40,7 @@
"pretty-checkbox-vue": "^1.1.9",
"vue": "^2.6.11",
"vue-hot-reload-api": "^2.3.3",
"vue-select": "^3.10.3",
"vuex": "^3.3.0"
},
"devDependencies": {

73
src/nginxconfig/scss/style.scss
View File

@ -22,6 +22,8 @@ $highlight: #f2c94c;
$pretty--color-dark: $primary;
$pretty--color-default: $primary;
@import "~pretty-checkbox/src/pretty-checkbox";
$vs-state-active-bg: $primary;
@import "~vue-select/src/scss/vue-select";
.tabs {
ul {
@ -141,9 +143,11 @@ $highlight: #f2c94c;
.is-changed {
input {
&,
&:focus {
background: rgba($highlight, .35);
&:not(.vs__search) {
&,
&:focus {
background: rgba($highlight, .35);
}
}
}
@ -158,6 +162,12 @@ $highlight: #f2c94c;
padding: .25rem .5rem;
}
}
.v-select {
.vs__dropdown-toggle {
background: rgba($highlight, .35);
}
}
}
label {
@ -228,4 +238,61 @@ $highlight: #f2c94c;
}
}
}
.v-select {
&.vs--open {
> ul {
opacity: 1;
}
.vs__dropdown-toggle {
border-color: $primary;
box-shadow: 0 0 2px rgba($success, .5);
.vs__selected {
top: .75em;
}
}
}
> ul {
display: block !important;
margin: 0;
opacity: 0;
transition: opacity $transition;
}
.vs__dropdown-toggle {
border: 1px solid $border;
box-shadow: none;
padding: 0 16px;
transition: border $transition, box-shadow $transition;
.vs__selected-options {
padding: 0;
.vs__selected {
margin: 0;
padding: 0;
transition: opacity $transition;
}
.vs__search {
&,
&:focus {
background: none;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
width: 0;
}
}
}
.vs__actions {
padding: 0;
}
}
}
}

1
src/nginxconfig/templates/global_sections/index.js
View File

@ -1 +1,2 @@
export { default as HTTPS } from './https';
export { default as Security } from './security';

138
src/nginxconfig/templates/global_sections/security.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Referrer-Policy</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${referrerPolicyChanged ? ' is-changed' : ''}`">
<VueSelect v-model="referrerPolicy" :options="$props.data.referrerPolicy.options" :clearable="false"></VueSelect>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Content-Security-Policy</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${contentSecurityPolicyChanged ? ' is-changed' : ''}`">
<input v-model="contentSecurityPolicy"
class="input"
type="text"
:placeholder="$props.data.contentSecurityPolicy.default"
/>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">server_tokens</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${serverTokensChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="serverTokens" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">limit_req</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${limitReqChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="limitReq" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import VueSelect from 'vue-select';
import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
const defaults = {
referrerPolicy: {
default: 'no-referrer-when-downgrade',
options: [
'no-referrer',
'no-referrer-when-downgrade',
'origin',
'origin-when-cross-origin',
'same-origin',
'strict-origin',
'strict-origin-when-cross-origin',
'unsafe-url',
],
enabled: true,
},
contentSecurityPolicy: {
default: 'default-src \'self\' http: https: data: blob: \'unsafe-inline\'',
enabled: true,
},
serverTokens: {
default: false,
enabled: true,
},
limitReq: {
default: false,
enabled: true,
},
};
export default {
name: 'GlobalSecurity', // Component name
display: 'Security', // Display name for tab
key: 'security', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
VueSelect,
},
props: {
data: Object, // Data delegated back to us from parent
},
data () {
return {
i18n,
};
},
computed: computedFromDefaults(defaults, 'security'), // Getters & setters for the delegated data
watch: {
// Check referrer policy selection is valid
'$props.data.referrerPolicy': {
handler(data) {
// This might cause recursion, but seems not to
if (data.enabled)
if (!data.options.includes(data.computed))
data.computed = data.default;
},
deep: true,
},
},
};
</script>