Using same jquery library

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/static/js/manage.js

@@ -49,5 +49,54 @@
     $('#' + region + ' .alert-' + outcome + ' span').text(text);
     $('#' + region + ' .alert-' + outcome).removeClass('hidden');
   }
+  
+  $('#drop_zone').on('drop',
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      $('#addKey .alert').addClass('hidden');
+      if(ev.originalEvent.dataTransfer.files[0].type != "text/plain") {
+        alert('addKey', 'danger', 'You must import an ascii-armored key file!');
+        return;
+      }      
+      handleFiles(ev.originalEvent.dataTransfer.files);
+  });
+  $('#drop_zone').on('dragover', 
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      ev.originalEvent.dataTransfer.dropEffect = 'copy';
+  });
+  $('#drop_zone').on('dragenter', 
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      ev.originalEvent.dataTransfer.dropEffect = 'copy';
+  });
 
-}(jQuery));
+  $('#fileSelect').click(function() {
+    $('#file-selector').click();
+  });
+
+  $('#file-selector').change(function() {
+    $('#addKey .alert').addClass('hidden');
+    handleFiles(this.files);
+  });
+  
+  function handleFiles(files) {
+    if(files.length > 1) {
+      alert('addKey', 'danger', 'You must import a single file!');
+      return;
+    }
+    const file = files[0];
+    const reader = new FileReader();
+    reader.onload = function(){
+      $('#addKey textarea').val(reader.result);
+    } 
+    reader.readAsText(file);
+   }
+
+}(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.min.js"></script>
+<script src="/js/bootstrap-3.4.1.min.js"></script>
+<script src="/js/key-armored.js"></script>

src/view/manage.html

@@ -24,7 +24,9 @@
         <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
       </div>
       <form action="/pks/add" method="post">
-        <p><textarea class="form-control" name="keytext" rows="5" spellcheck="false" placeholder="Paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
+        <p><textarea id="drop_zone" class="form-control ui-droppable" name="keytext" rows="5" spellcheck="false" placeholder="Drag a single ascii-armored key file here or paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
+        <input type="file" id="file-selector" accept="text/plain" style="display:none">
+        <p>Or <button type="button" id="fileSelect">select a file</button> </p>
         <input class="btn btn-primary btn-lg" type="submit" value="Upload">
       </form>
       <hr>