Fixed copy not working in insecure contexts

assets/js/app.js

@@ -38,6 +38,30 @@ let liveSocket = new LiveSocket('/live', Socket, {
   }
 })
 
+window.copyTextToClipboard = async (text) => {
+  // Navigator clipboard api needs a secure context (https)
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text)
+  } else {
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    // Move textarea out of the viewport so it's not visible
+    textArea.style.position = 'absolute'
+    textArea.style.left = '-999999px'
+
+    document.body.prepend(textArea)
+    textArea.select()
+
+    try {
+      document.execCommand('copy')
+    } catch (error) {
+      console.error(error)
+    } finally {
+      textArea.remove()
+    }
+  }
+}
+
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
 window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300))

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -25,12 +25,13 @@
             <span
               x-data="{ copied: false }"
               x-on:click={"
-                navigator.clipboard.writeText('#{rss_feed_url(@conn, @source)}');
+                window.copyTextToClipboard('#{rss_feed_url(@conn, @source)}')
-                copied = true;
+                copied = true
-                setTimeout(() => copied = false, 4000);
+                setTimeout(() => copied = false, 4000)
               "}
             >
-              Copy RSS Feed <span x-show="copied"><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+              Copy RSS Feed
+              <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
             </span>
           </:option>
           <:option>