Change hash + clipboard implementations

src/nginxconfig/templates/app.vue

@@ -81,7 +81,7 @@ THE SOFTWARE.
                     <h2>{{ i18n.templates.app.configFiles }}</h2>
                     <div ref="files" class="columns is-multiline">
                         <NginxPrism v-for="(confContents, confName) in confFilesOutput"
-                                    :key="`${confName}-${hash(confContents)}`"
+                                    :key="`${confName}-${sha2_256(confContents)}`"
                                     :name="`${nginxDir}/${confName}`"
                                     :conf="confContents"
                                     :half="Object.keys(confFilesOutput).length > 1 && !splitColumn"
@@ -100,7 +100,7 @@ THE SOFTWARE.
     import { diffLines } from 'diff';
     import escape from 'escape-html';
     import deepEqual from 'deep-equal';
-    import createHash from 'create-hash';
+    import sha2_256 from 'simple-js-sha2-256';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import isChanged from '../util/is_changed';
@@ -197,9 +197,6 @@ THE SOFTWARE.
                 this.$set(this.$data.domains, index, null);
                 if (this.$data.active === index) this.$data.active = this.$data.domains.findIndex(d => d !== null);
             },
-            hash(content) {
-                return createHash('sha256').update(content).digest('base64');
-            },
             checkChange(oldConf) {
                 // If nothing has changed for a tick, we can use the config files
                 if (deepEqual(oldConf, this.confFiles)) {
@@ -232,7 +229,7 @@ THE SOFTWARE.
                     // If a file with the same name existed before, diff!
                     // TODO: Handle diffing across file renames (eg. when a user changes a domain name)
                     const old = oldConf && oldConf[newFileName];
-                    if (old && this.hash(old) !== this.hash(newFileConf)) {
+                    if (old && old !== newFileConf) {
                         console.info(`Diffing ${newFileName}...`);
 
                         // Get the diff
@@ -279,6 +276,7 @@ THE SOFTWARE.
                 this.$data.confFilesOutput = newFiles;
                 this.$nextTick(() => this.$data.confWatcherWaiting = false);
             },
+            sha2_256,
         },
     };
 </script>

src/nginxconfig/templates/setup.vue

@@ -55,7 +55,7 @@ THE SOFTWARE.
 
         <div class="buttons is-centered">
             <a class="button is-success" @click="downloadTar">{{ i18n.templates.setup.downloadConfig }}</a>
-            <a class="button is-primary" @click="copyTar">{{ i18n.templates.setup.copyBase64 }}</a>
+            <a ref="copyTar" class="button is-primary">{{ i18n.templates.setup.copyBase64 }}</a>
         </div>
     </div>
 </template>
@@ -63,7 +63,7 @@ THE SOFTWARE.
 <script>
     import tar from 'tarts';
     import { gzip } from 'pako';
-    import copy from 'copy-to-clipboard';
+    import ClipboardJS from 'clipboard';
     import i18n from '../i18n';
     import * as Sections from './setup_sections';
 
@@ -102,6 +102,9 @@ THE SOFTWARE.
                 return `nginxconfig.io-${domains.join(',')}.tar.gz`;
             },
         },
+        mounted() {
+            this.setupCopy();
+        },
         methods: {
             tabClass(tab) {
                 if (tab === this.$data.active) return 'is-active';
@@ -109,7 +112,7 @@ THE SOFTWARE.
                 if (tabs.indexOf(tab) < tabs.indexOf(this.$data.active)) return 'is-before';
                 return undefined;
             },
-            async tarContents() {
+            tarContents() {
                 const data = [];
 
                 // Add all our config files to the tar
@@ -129,9 +132,9 @@ THE SOFTWARE.
 
                 return gzip(tar(data));
             },
-            async downloadTar() {
+            downloadTar() {
                 // Get the config files as a compressed tar
-                const contents = await this.tarContents();
+                const contents = this.tarContents();
 
                 // Convert it to a blob and download
                 const blob = new Blob([ contents ], { type: 'application/tar+gzip' });
@@ -140,14 +143,37 @@ THE SOFTWARE.
                 link.download = this.tarName;
                 link.click();
             },
-            async copyTar() {
+            copyTar() {
                 // Get the config files as a compressed tar
-                const contents = await this.tarContents();
+                const contents = this.tarContents();
 
                 // Convert it to base64 string
                 const b64 = Buffer.from(contents).toString('base64');
-                const command = `echo '${b64}' | base64 --decode > ${this.nginxDir}/${this.tarName}`;
-                copy(command);
+                return `echo '${b64}' | base64 --decode > ${this.nginxDir}/${this.tarName}`;
+            },
+            setupCopy() {
+                const originalText = this.$refs.copyTar.textContent;
+
+                const resetText = () => {
+                    setTimeout(() => {
+                        this.$refs.copyTar.textContent = originalText;
+                    }, 5000);
+                };
+
+                const clipboard = new ClipboardJS(this.$refs.copyTar, {
+                    text: this.copyTar,
+                });
+
+                clipboard.on('success', e => {
+                    this.$refs.copyTar.textContent = 'Copied';
+                    e.clearSelection();
+                    resetText();
+                });
+
+                clipboard.on('error', () => {
+                    this.$refs.copyTar.textContent = 'Press Ctrl + C to copy';
+                    resetText();
+                });
             },
         },
     };