Copy key to clipboard on lookup page

src/static/js/key-armored.js

@@ -0,0 +1,35 @@
+/* eslint-disable */
+
+;(function($) {
+  'use strict';
+  
+  $('#copy-button').tooltip({
+    trigger: 'manual',
+    placement: 'right',
+  });
+
+  function setTooltip(message) {
+    $('#copy-button').attr('data-original-title', message)
+      .tooltip('show');
+  }
+
+  function hideTooltip() {
+    setTimeout(function() {
+      $('#copy-button').tooltip('hide');
+    }, 1000);
+  }
+
+  $('#copy-button').click(function(e) {
+    const copyText = $('#publickey-block').text();
+    const textArea = document.createElement('textarea');
+    textArea.textContent = copyText;
+    document.body.append(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    textArea.remove();
+    
+    setTooltip('Key copied to clipboard!');
+    hideTooltip();
+  });
+
+}(jQuery));

src/view/key-armored.html

@@ -1,3 +1,13 @@
+<style type="text/css">
+ 
+ textarea {
+    position: absolute;
+    left: -100%;
+  }
+}
+ 
+</style>
+
 <div class="container">
 
   <div class="header clearfix">
@@ -14,10 +24,14 @@
   <div class="row marketing">
     <div class="col-lg-12">
       <h4><%= query.email ? `Email: ${query.email}` : query.fingerprint ? `Fingerprint: ${query.fingerprint}` : `Key ID: ${query.keyId}` %></h4>
-      <pre><%= key.publicKeyArmored %></pre>
+      <button id="copy-button" class="btn btn-primary">Copy key to clipboard</button>
+      <pre id="publickey-block"><%= key.publicKeyArmored %></pre>
     </div> <!-- /col-lg-12 -->
   </div>
 
   <%- include('footer') %>
 
 </div> <!-- /container -->
+<script src="/js/jquery-3.5.1.min.js"></script>
+<script src="/js/bootstrap-3.4.1.min.js"></script>
+<script src="/js/key-armored.js"></script>