fix: clipboard copy on non-secure context

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

src/components/ui/AppTextFieldWithCopy.vue

@@ -38,6 +38,8 @@
 
 <script lang="ts">
 import { Component, VModel, Vue } from 'vue-property-decorator'
+import clipboardCopy from '@/util/clipboard-copy'
+import sleep from '@/util/sleep'
 
 @Component({
   inheritAttrs: false
@@ -47,19 +49,23 @@ export default class AppTextFieldWithCopy extends Vue {
   inputValue!: unknown
 
   hasCopied = false
+  abortController: AbortController | null = null
 
-  handleCopy () {
-    if (
-      this.inputValue &&
-      navigator.clipboard
-    ) {
-      navigator.clipboard.writeText(this.inputValue.toString())
+  async handleCopy () {
+    if (this.inputValue) {
+      if (await clipboardCopy(this.inputValue.toString(), this.$el)) {
+        this.abortController?.abort()
 
-      this.hasCopied = true
+        this.hasCopied = true
 
-      setTimeout(() => {
-        this.hasCopied = false
-      }, 2000)
+        try {
+          const abortController = this.abortController = new AbortController()
+
+          await sleep(2000, abortController.signal)
+
+          this.hasCopied = false
+        } catch {}
+      }
     }
   }
 }

src/util/clipboard-copy.ts

@@ -0,0 +1,43 @@
+import consola from 'consola'
+
+const clipboardCopy = async (text: string, parentElement?: Element): Promise<boolean> => {
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text)
+
+      return true
+    } catch (e) {
+      consola.error('Error while copying text to clipboard', e)
+
+      return false
+    }
+  }
+
+  parentElement ??= document.body
+
+  const textarea = document.createElement('textarea')
+
+  textarea.value = text
+  textarea.style.position = 'absolute'
+  textarea.style.top = '0'
+  textarea.style.left = '0'
+  textarea.style.zIndex = '100000'
+  textarea.style.opacity = '0'
+
+  parentElement.appendChild(textarea)
+
+  try {
+    textarea.focus()
+    textarea.select()
+
+    return document.execCommand('copy')
+  } catch (e) {
+    consola.error('Error while copying text to clipboard', e)
+
+    return false
+  } finally {
+    parentElement.removeChild(textarea)
+  }
+}
+
+export default clipboardCopy