fix: add copy fallback for insecure contexts (#2044)

oxy · web-flow · commit 981fb2764f3f · 2022-06-23T16:35:12.000-04:00
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -29,16 +29,29 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
     try {
       await window.navigator.clipboard.writeText(text)
       setIsCopied(true)
-
       window.setTimeout(() => {
         setIsCopied(false)
       }, 1000)
     } catch (err) {
-      const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
-      if (err instanceof Error) {
-        wrappedErr.stack = err.stack
+      const input = document.createElement("input")
+      input.value = text
+      document.body.appendChild(input)
+      input.focus()
+      input.select()
+      const result = document.execCommand("copy")
+      document.body.removeChild(input)
+      if (result) {
+        setIsCopied(true)
+        window.setTimeout(() => {
+          setIsCopied(false)
+        }, 1000)
+      } else {
+        const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
+        if (err instanceof Error) {
+          wrappedErr.stack = err.stack
+        }
+        console.error(wrappedErr)
       }
-      console.error(wrappedErr)
     }
   }
 
