ui rework

ui/js/GetCopy.js

@@ -1,7 +1,7 @@
 const GetCopy = {
     props: [ 'name', 'href', 'token' ],
     data() { return {showCopied: false} },
-    template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
+    template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
     methods: {
         fetch() {
             event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
         },
         handleFetchError(e) {
             console.log("failed to get value:", e)
-            alert('failed to get value')
+            this.$root.toast('failed to get value', 'error')
         },
         fetchAndSave() {
             this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
             this.fetch()
             .then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
             .then((value) => {
-                window.navigator.clipboard.writeText(value)
-                this.showCopied = true
-                setTimeout(() => { this.showCopied = false }, 1000)
+                try {
+                    window.navigator.clipboard.writeText(value)
+                    this.$root.toast('copied!', 'info')
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
             }).catch(this.handleFetchError)
         },
     },