Closes #2638: Copy Button for Secrets (#2860)

* Added clipboard.min.js

* Added copy button to secrets

* renamed clipboard JS library

netbox/project-static/js/secrets.js

@@ -1,4 +1,6 @@
 $(document).ready(function() {
+    // Instantiate ClipboardJS on all copy buttons
+    new ClipboardJS('button.copy-secret');
 
     // Unlocking a secret
     $('button.unlock-secret').click(function(event) {
@@ -45,6 +47,7 @@ $(document).ready(function() {
                     console.log("Secret retrieved successfully");
                     $('#secret_' + secret_id).text(response.plaintext);
                     $('button.unlock-secret[secret-id=' + secret_id + ']').hide();
+                    $('button.copy-secret[secret-id=' + secret_id + ']').show();
                     $('button.lock-secret[secret-id=' + secret_id + ']').show();
                 } else {
                     console.log("Secret was not decrypted. Prompt user for private key.");
@@ -67,6 +70,7 @@ $(document).ready(function() {
         var secret_div = $('#secret_' + secret_id);
         secret_div.html('********');
         $('button.lock-secret[secret-id=' + secret_id + ']').hide();
+        $('button.copy-secret[secret-id=' + secret_id + ']').hide();
         $('button.unlock-secret[secret-id=' + secret_id + ']').show();
     }
 

netbox/templates/_base.html

@@ -69,6 +69,7 @@
 <script src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
 <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
 <script src="{% static 'select2-4.0.5/js/select2.min.js' %}"></script>
+<script src="{% static 'clipboard-2.0.4.min.js' %}"></script>
 <script src="{% static 'js/forms.js' %}?v{{ settings.VERSION }}"></script>
 <script type="text/javascript">
     var netbox_api_path = "/{{ settings.BASE_PATH }}api/";

netbox/templates/secrets/inc/secret_tr.html

@@ -8,6 +8,9 @@
             <button class="btn btn-xs btn-success unlock-secret" secret-id="{{ secret.pk }}">
                 <i class="fa fa-lock"></i> Unlock
             </button>
+            <button class="btn btn-xs btn-default copy-secret collapse" secret-id="{{ secret.pk }}" data-clipboard-target="#secret_{{ secret.pk }}">
+                <i class="fa fa-copy"></i> Copy
+            </button>
             <button class="btn btn-xs btn-danger lock-secret collapse" secret-id="{{ secret.pk }}">
                 <i class="fa fa-unlock-alt"></i> Lock
             </button>

netbox/templates/secrets/secret.html

@@ -77,11 +77,14 @@
                     </form>
                     <div class="row">
                         <div class="col-md-2">Secret</div>
-                        <div class="col-md-8" id="secret_{{ secret.pk }}">********</div>
-                        <div class="col-md-2 text-right">
+                        <div class="col-md-6" id="secret_{{ secret.pk }}">********</div>
+                        <div class="col-md-4 text-right">
                             <button class="btn btn-xs btn-success unlock-secret" secret-id="{{ secret.pk }}">
                                 <i class="fa fa-lock"></i> Unlock
                             </button>
+                            <button class="btn btn-xs btn-default copy-secret collapse" secret-id="{{ secret.pk }}" data-clipboard-target="#secret_{{ secret.pk }}">
+                                <i class="fa fa-copy"></i> Copy
+                            </button>
                             <button class="btn btn-xs btn-danger lock-secret collapse" secret-id="{{ secret.pk }}">
                                 <i class="fa fa-unlock-alt"></i> Lock
                             </button>