From d3313a202b02109a50ab7addf6a2db8a2fb0c59c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Mon, 9 Jan 2023 17:35:20 +0800
Subject: [PATCH] Add a clipboard controller and wire up the copy button

---
 .../controllers/clipboard_controller.js          | 16 ++++++++++++++++
 app/views/icons/_check.html.erb                  |  2 +-
 app/views/settings/profile/index.html.erb        | 10 ++++++----
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/controllers/clipboard_controller.js

diff --git a/app/javascript/controllers/clipboard_controller.js b/app/javascript/controllers/clipboard_controller.js
new file mode 100644
index 0000000..e641010
--- /dev/null
+++ b/app/javascript/controllers/clipboard_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "trigger"]
+
+  copy (event) {
+    event.preventDefault();
+    navigator.clipboard.writeText(this.sourceTarget.value);
+    this.triggerTarget.querySelector('.content-initial').classList.add('hidden');
+    this.triggerTarget.querySelector('.content-active').classList.remove('hidden');
+    setTimeout(() => {
+      this.triggerTarget.querySelector('.content-initial').classList.remove('hidden');
+      this.triggerTarget.querySelector('.content-active').classList.add('hidden');
+    }, 2000)
+  }
+}
diff --git a/app/views/icons/_check.html.erb b/app/views/icons/_check.html.erb
index 1c20989..d1b699c 100644
--- a/app/views/icons/_check.html.erb
+++ b/app/views/icons/_check.html.erb
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check <%= custom_class %>"><polyline points="20 6 9 17 4 12"></polyline></svg>
diff --git a/app/views/settings/profile/index.html.erb b/app/views/settings/profile/index.html.erb
index 7a8dd33..b166cee 100644
--- a/app/views/settings/profile/index.html.erb
+++ b/app/views/settings/profile/index.html.erb
@@ -6,15 +6,17 @@
     <p class="mb-1">
       <%= label :user_address, 'User address', class: 'font-bold' %>
     </p>
-    <p class="flex gap-1 mb-2 sm:block">
+    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
       <input type="text" id="user_address" class="flex-1 sm:w-3/5"
-             value=<%= @user.address %> disabled="disabled" />
+             value=<%= @user.address %> disabled="disabled"
+             data-clipboard-target="source" />
       <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+              data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
-        <span class="icon-initial">
+        <span class="content-initial">
           <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
         </span>
-        <span class="icon-active hidden">
+        <span class="content-active hidden">
           <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
         </span>
       </button>