From 8ab8ca15f5d8066d0209c30c0ad1afb7a065c334 Mon Sep 17 00:00:00 2001
From: Aga <aga@cottagelabs.com>
Date: Mon, 13 Nov 2023 17:09:45 +0000
Subject: [PATCH] add click to copy widget to api field in the account page

---
 portality/templates/account/view.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/portality/templates/account/view.html b/portality/templates/account/view.html
index ab4c8c0de6..dd1c2aa4a2 100644
--- a/portality/templates/account/view.html
+++ b/portality/templates/account/view.html
@@ -90,7 +90,9 @@ <h2 class="label">Your API access</h2>
         {% if account.has_role("api") %}
         <dt>API Key</dt>
         <dd>
-          <code>{{ account.api_key }}</code>
+          <code id="user-api">{{ account.api_key }}</code>
+          <span class="form__click-to-copy" id="click-to-copy--api" data-feather="copy" aria-hidden="true"></span><span class="sr-only">Copy value</span>
+          <span class="tag tag--confirmation" style="display:none" id="copy-confirmation--api">Copied!</span>
         </dd>
         {% endif %}
       </dl>
@@ -121,6 +123,17 @@ <h2 class="label">Your API access</h2>
       $(window).scrollTop($(firstError).offset().top - 100)
     }
 
+    {% if account.has_role("api") %}
+    // Copy API key to clipboard
+      $('#click-to-copy--api').click(function() {
+        let value_to_copy = $('#user-api').html();
+        navigator.clipboard.writeText(value_to_copy);
+        var confirmation = $("#copy-confirmation--api");
+        confirmation.text("Copied: " + value_to_copy);
+        confirmation.show().delay(3000).fadeOut();
+      });
+    {% endif %}
+
     // If the user is editing their own account, make them confirm when email address is updated
     {% if current_user.id == account.id %}
     $('form#edit_user').submit(function () {