From c756528d32b977484d675cc9f3b127890cd5f04a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Tue, 10 Jan 2023 13:15:40 +0800
Subject: [PATCH] Allow to copy invitation URLs via button

---
 app/views/invitations/index.html.erb | 36 ++++++++++++++++------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index 7ca0699..a606b1c 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -3,23 +3,29 @@
 <%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
-      <p>
+      <p class="mb-8">
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-      <table class="mt-12">
-        <thead>
-          <tr>
-            <th>URL</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @invitations_unused.each do |invitation| %>
-            <tr>
-              <td class="font-mono"><%= invitation_url(invitation.token) %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
+      <ul>
+        <% @invitations_unused.each do |invitation| %>
+          <li class="font-mono mb-1 flex gap-1 md:block"
+              data-controller="clipboard">
+            <input type="text" disabled class="md:w-3/4 flex-1"
+                   value="<%= invitation_url(invitation.token) %>"
+                   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="content-initial">
+                <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+              <span class="content-active hidden">
+                <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+            </button>
+          </li>
+        <% end %>
+      </ul>
     <% else %>
       <p>
         You do not have any invitations to give away yet. We will notify you,