Mirrors/nginxconfig.io
2
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io synced 2024-11-10 12:34:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Reverse proxy section done

Browse source
This commit is contained in:
MattIPv4 2020-04-30 17:02:56 +01:00
parent 8e97e8d4f2
commit 9de2b9978d
1 changed files with 113 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/nginxconfig/templates/domain_sections/reverse_proxy.vue
View file

@ -1,8 +1,82 @@
<template>
<div>Hello world reverse proxy</div>
<div>
<div v-if="!reverseProxyEnabled" class="field is-horizontal is-aligned-top">
<div class="field-label">
<label class="label">Reverse proxy</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<label class="text">
Reverse proxy is disabled.
<template v-if="$parent.$props.data.php.php.computed">
<br />Reverse proxy cannot be enabled whilst PHP is enabled.
</template>
<template v-if="$parent.$props.data.python.python.computed">
<br />Reverse proxy cannot be enabled whilst Python is enabled.
</template>
</label>
</div>
</div>
</div>
</div>
<div v-else class="field is-horizontal">
<div class="field-label">
<label class="label">Reverse proxy</label>
</div>
<div class="field-body">
<div :class="`field${reverseProxyChanged ? ' is-changed' : ''}`">
<div class="control">
<div class="checkbox">
<PrettyCheck v-model="reverseProxy" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable reverse proxy
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div v-if="pathEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">Path</label>
</div>
<div class="field-body">
<div :class="`field${pathChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="path"
class="input"
type="text"
:placeholder="$props.data.path.default"
/>
</div>
</div>
</div>
</div>
<div v-if="proxyPassEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">proxy_pass</label>
</div>
<div class="field-body">
<div :class="`field${proxyPassChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="proxyPass"
class="input"
type="text"
:placeholder="$props.data.proxyPass.default"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
@ -10,7 +84,7 @@
const defaults = {
reverseProxy: {
default: false,
enabled: true,
enabled: false,
},
path: {
default: '/',
@ -27,6 +101,9 @@
display: 'Reverse proxy', // Display name for tab
key: 'reverseProxy', // 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
},
@ -36,5 +113,39 @@
};
},
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data
watch: {
// If the PHP or Python is enabled, the Reverse proxy will be forced off
'$parent.$props.data': {
handler(data) {
// This might cause recursion, but seems not to
if (data.php.php.computed || data.python.python.computed) {
this.$props.data.reverseProxy.enabled = false;
this.$props.data.reverseProxy.computed = false;
} else {
this.$props.data.reverseProxy.enabled = true;
this.$props.data.reverseProxy.computed = this.$props.data.reverseProxy.value;
}
},
deep: true,
},
// Disable all options if Reverse proxy is disabled
'$props.data.reverseProxy': {
handler(data) {
const state = data.computed;
if (state) {
this.$props.data.path.enabled = true;
this.$props.data.path.computed = this.$props.data.path.value;
this.$props.data.proxyPass.enabled = true;
this.$props.data.proxyPass.computed = this.$props.data.proxyPass.value;
} else {
this.$props.data.path.enabled = false;
this.$props.data.path.computed = '';
this.$props.data.proxyPass.enabled = false;
this.$props.data.proxyPass.computed = '';
}
},
deep: true,
},
},
};
</script>