From e4d8e8a152aaf5cec7f393428632adac2a93457b Mon Sep 17 00:00:00 2001
From: Simon Vareille <si.vareille@gmail.com>
Date: Sat, 13 Jun 2020 16:47:37 +0200
Subject: [PATCH] Drag'n Drop or choose ASCII-armored key file

---
 src/static/js/manage.js | 51 ++++++++++++++++++++++++++++++++++++++++-
 src/view/manage.html    |  4 +++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/static/js/manage.js b/src/static/js/manage.js
index 923e9d2..6940f23 100644
--- a/src/static/js/manage.js
+++ b/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));
\ No newline at end of file
+  $('#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));
diff --git a/src/view/manage.html b/src/view/manage.html
index 203f913..739496f 100644
--- a/src/view/manage.html
+++ b/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>