Merge branch 'feature/3705_click_to_copy_api' into develop

doajtest/testbook/user_management/user_management.yml

@@ -40,6 +40,10 @@ fragments:
       - Your API Key at the top of the page is updated
       - You receive a flash message saying your record is updated and the API key has
         changed
+    - step: Click "Click to Copy" icon next to your API key
+      results:
+      - The API key is copied to your clipboard
+      - Confirmation message appears and dissapears after a moment
     - step: Enter mismatched passwords into the "Change your password" boxes and click
         "Update Account"
       results:
@@ -205,3 +209,12 @@ tests:
   - step: Click on the user's journals
     results:
     - All the same journals are still associated with the user
+
+- title: User account without API role
+  context:
+    role: admin
+  steps:
+  - step: Find (or create) a user account which does not have the API role
+  - step: View the user account page at /account/[account name]
+    results:
+    - The API key is not displayed

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