7x31/nginxconfig.io
1
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io.git synced 2025-08-08 15:16:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add download & copy buttons

Browse Source
This commit is contained in:
MattIPv4
2020-05-07 17:31:40 +01:00
parent 2809d5fa7a
commit 8ee4a8eb88
7 changed files with 371 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,25 +113,6 @@ $highlight: #f2c94c;
}
}
&.setup {
p {
color: $dark-blue;
overflow-wrap: break-word;
a {
text-decoration: none;
}
}
ol {
margin: 0 1rem;
li {
margin: 0 0 1.5rem;
}
}
}
.container {
padding: 0 1.5rem;
}
@@ -372,4 +353,30 @@ $highlight: #f2c94c;
text-align: left;
}
}
.setup {
.panel {
p {
color: $dark-blue;
overflow-wrap: break-word;
a {
text-decoration: none;
}
}
ol {
margin: 0 1rem;
li {
margin: 0 0 1.5rem;
}
}
}
.buttons {
margin: 1rem 0;
}
}
}

15
src/nginxconfig/templates/global_sections/tools.vue
View File

@@ -18,7 +18,7 @@
</div>
</div>
<div class="field is-horizontal">
<div v-if="symlinkVhostEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">Symlink vhost</label>
</div>
@@ -173,6 +173,19 @@
shareQuery(query) {
window.history.replaceState({}, '', `?${query}`);
},
// Disable symlink if modularized structure is disabled
'$props.data.modularizedStructure': {
handler(data) {
if (data.computed) {
this.$props.data.symlinkVhost.enabled = true;
this.$props.data.symlinkVhost.computed = this.$props.data.symlinkVhost.value;
} else {
this.$props.data.symlinkVhost.enabled = false;
this.$props.data.symlinkVhost.computed = false;
}
},
deep: true,
},
},
methods: {
confirm(title, body, callback) {

65
src/nginxconfig/templates/setup.vue
View File

@@ -15,30 +15,37 @@ limitations under the License.
-->
<template>
<div class="panel setup">
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="tabClass(tab.key)">
<a @click="active = tab.key">{{ tab.display }}</a>
</li>
</ul>
<div class="setup">
<div class="panel">
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="tabClass(tab.key)">
<a @click="active = tab.key">{{ tab.display }}</a>
</li>
</ul>
</div>
<component :is="tab"
v-for="tab in tabs"
:key="tab.key"
:data="$props.data"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
></component>
<div class="navigation-buttons">
<a v-if="previousTab !== false" class="button is-mini" @click="active = previousTab">
<i class="fas fa-long-arrow-alt-left"></i> <span>Back</span>
</a>
<a v-if="nextTab !== false" class="button is-primary is-mini" @click="active = nextTab">
<span>Next</span> <i class="fas fa-long-arrow-alt-right"></i>
</a>
</div>
</div>
<component :is="tab"
v-for="tab in tabs"
:key="tab.key"
:data="$props.data"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
></component>
<div class="navigation-buttons">
<a v-if="previousTab !== false" class="button is-mini" @click="active = previousTab">
<i class="fas fa-long-arrow-alt-left"></i> <span>Back</span>
</a>
<a v-if="nextTab !== false" class="button is-primary is-mini" @click="active = nextTab">
<span>Next</span> <i class="fas fa-long-arrow-alt-right"></i>
</a>
<div class="buttons is-centered">
<a class="button is-success" @click="downloadZip">Download Config</a>
<a class="button is-primary" @click="copyZip">Copy Base64</a>
</div>
</div>
</template>
@@ -72,6 +79,13 @@ limitations under the License.
if (index >= 0) return tabs[index];
return false;
},
nginxDir() {
return this.$props.data.global.nginx.nginxConfigDirectory.computed.replace(/\/+$/, '');
},
zipName() {
const domains = this.$props.data.domains.filter(d => d !== null).map(d => d.server.domain.computed);
return `nginxconfig.io-${domains.join(',')}.zip`;
},
},
methods: {
tabClass(tab) {
@@ -80,6 +94,13 @@ limitations under the License.
if (tabs.indexOf(tab) < tabs.indexOf(this.$data.active)) return 'is-before';
return undefined;
},
downloadZip() {
alert('Imagine I\'m a working download');
},
copyZip() {
const command = `echo 'BASE64 HERE' | base64 --decode > ${this.nginxDir}/${this.zipName}`;
alert(`Imagine I'm a working copy to clipboard\n\n${command}`);
},
},
};
</script>

2
src/nginxconfig/templates/setup_sections/certbot.vue
View File

@@ -100,6 +100,8 @@
return false;
},
sitesAvailable() {
if (!this.$props.data.global.tools.modularizedStructure.computed) return `${this.nginxDir}/nginx.conf`;
const enabledAvailable = this.$props.data.global.tools.symlinkVhost.computed ? 'available' : 'enabled';
return this.$props.data.domains
.filter(domain => domain.https.certType.computed === 'letsEncrypt')

28
src/nginxconfig/templates/setup_sections/download.vue
View File

@@ -3,12 +3,12 @@
<ol>
<li>
<p>
<b>Download</b> the generated config: <b><a @click="downloadZip">{{ zipName }}</a></b>
<b>Download</b> the generated config: <b><a @click="$parent.downloadZip">{{ $parent.zipName }}</a></b>
<br />
and <b>upload</b> it to your server's <code class="slim">{{ nginxDir }}</code> directory.
and <b>upload</b> it to your server's <code class="slim">{{ $parent.nginxDir }}</code> directory.
</p>
<p>
or, <b><a @click="copyZip">Copy a base64 string of the compressed config</a></b>, paste it in
or, <b><a @click="$parent.copyZip">Copy a base64 string of the compressed config</a></b>, paste it in
your server's command line and execute it.
</p>
</li>
@@ -25,7 +25,7 @@
<p>
Navigate to your NGINX <b>configuration directory</b> on your server:
<br />
<code class="slim">cd {{ nginxDir }}</code>
<code class="slim">cd {{ $parent.nginxDir }}</code>
</p>
</li>
@@ -41,7 +41,7 @@
<p>
<b>Unzip</b> the new compressed configuration archive:
<br />
<code class="slim">unzip -o {{ zipName }}</code>
<code class="slim">unzip -o {{ $parent.zipName }}</code>
</p>
</li>
</ol>
@@ -63,23 +63,5 @@
i18n,
};
},
computed: {
nginxDir() {
return this.$props.data.global.nginx.nginxConfigDirectory.computed;
},
zipName() {
const domains = this.$props.data.domains.filter(d => d !== null).map(d => d.server.domain.computed);
return `nginxconfig.io-${domains.join(',')}.zip`;
},
},
methods: {
downloadZip() {
alert('Imagine I\'m a working download');
},
copyZip() {
const command = `echo 'BASE64 HERE' | base64 --decode > ${this.nginxDir}${this.zipName}`;
alert(`Imagine I'm a working copy to clipboard\n\n${command}`);
},
},
};
</script>