From 9166d887c4aeb7229cf13afec61dd1b86be841a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Tue, 10 Jan 2023 11:19:29 +0800
Subject: [PATCH] Replace vanilla JS with new clipboard code

---
 app/views/wallet/index.html.erb | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index 6288567..7fffecc 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -26,8 +26,14 @@
       accounts should be able to add/import your account using our setup
       code/URL:
     </p>
-    <p class="my-6 text-center md:text-left">
-      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto">Copy setup code/URL</button>
+    <p data-controller="clipboard" class="my-6 text-center md:text-left">
+      <input type="text" disabled class="hidden" aria-hidden=true
+             value="<%= @wallet_url%>" data-clipboard-target="source" />
+      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
+              data-action="clipboard#copy" data-clipboard-target="trigger">
+        <span class="content-initial">Copy setup code/URL</span>
+        <span class="content-active hidden">Copied ✔</span>
+      </button>
       <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
       <button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
       <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
@@ -75,7 +81,6 @@
   (function () {
     const buttonShow = document.querySelector('#show-setup-code');
     const buttonHide = document.querySelector('#hide-setup-code');
-    const buttonCopy = document.querySelector('#copy-setup-code');
     const setupCode = document.querySelector('#setup-code');
 
     buttonShow.addEventListener('click', function(ev) {
@@ -93,16 +98,5 @@
       buttonHide.classList.add('hidden');
       buttonShow.classList.remove('hidden');
     });
-
-    buttonCopy.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      navigator.clipboard.writeText('<%= @wallet_url %>').then(() => {
-        const buttonText = buttonCopy.innerText;
-        buttonCopy.innerText = 'Copied ✔';
-        setTimeout(() => {
-          buttonCopy.innerText = buttonText;
-        }, 2000);
-      });
-    });
   })();
 </script>