add click to copy widget to api field in the account page

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 () {