Closes #13962: Add a copy-to-clipboard button to the key field of the API token creation form

Author: jeremystretch

netbox/project-static/dist/netbox.js

@@ -2,7 +2,7 @@ import Clipboard from 'clipboard';
 import { getElements } from './util';
 
 export function initClipboard(): void {
-  for (const element of getElements('a.copy-content')) {
+  for (const element of getElements('.copy-content')) {
     new Clipboard(element);
   }
 }

netbox/project-static/dist/netbox.js.map

@@ -15,11 +15,6 @@
 {% block content %}
   <div class="row">
     <div class="col col-md-12">
-      {% if key and not settings.ALLOW_TOKEN_RETRIEVAL %}
-        <div class="alert alert-danger" role="alert">
-          <i class="mdi mdi-alert"></i> Tokens cannot be retrieved at a later time. You must <a href="#" class="copy-content" data-clipboard-target="#token_id" title="Copy to clipboard">copy the token value</a> below and store it securely.
-        </div>
-      {% endif %}
       <div class="card">
         <h5 class="card-header">{% trans "Token" %}</h5>
         <div class="card-body">

netbox/project-static/src/clipboard.ts

@@ -114,6 +114,9 @@ class UserTokenForm(BootstrapMixin, forms.ModelForm):
         help_text=_(
             'Keys must be at least 40 characters in length. <strong>Be sure to record your key</strong> prior to '
             'submitting this form, as it may no longer be accessible once the token has been created.'
+        ),
+        widget=forms.TextInput(
+            attrs={'data-clipboard': 'true'}
         )
     )
     allowed_ips = SimpleArrayField(

netbox/templates/account/token.html

@@ -29,6 +29,14 @@
           {{ label }}
         </label>
       </div>
+    {# Include a copy-to-clipboard button #}
+    {% elif 'data-clipboard' in field.field.widget.attrs %}
+      <div class="input-group">
+        {{ field }}
+        <button type="button" title="{% trans "Copy to clipboard" %}" class="btn btn-outline-dark border-input copy-content" data-clipboard-target="#{{ field.id_for_label }}">
+          <i class="mdi mdi-content-copy"></i>
+        </button>
+      </div>
     {# Default field rendering #}
     {% else %}
       {{ field }}