Merge pull request #815 from acasajus/new/drag-drop-pgp

Allow drag and drop of keys into the text area

static/js/utils/drag-drop-into-text.js

@@ -0,0 +1,28 @@
+const MAX_BYTES = 10240; // 10KiB
+
+function enableDragDropForPGPKeys(inputID) {
+    function drop(event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        let files = event.dataTransfer.files;
+        for (let i = 0; i < files.length; i++) {
+            let file = files[i];
+            if(file.type !== 'text/plain'){
+                toastr.warning(`File ${file.name} is not a public key file`);
+                continue;
+            }
+            let reader = new FileReader();
+            reader.onloadend = onFileLoaded;
+            reader.readAsBinaryString(file);
+        }
+    }
+
+    function onFileLoaded(event) {
+        const initialData = event.currentTarget.result.substr(0, MAX_BYTES);
+        $(inputID).val(initialData);
+    }
+
+    const dropArea = $(inputID).get(0);
+    dropArea.addEventListener("drop", drop, false);
+}

templates/dashboard/contact_detail.html

@@ -49,8 +49,10 @@
 
               <textarea name="pgp"
                   {% if not current_user.is_premium() %} disabled {% endif %}
-                        class="form-control" rows=10
+                        class="form-control" rows=10 id="pgp-public-key"
                         placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ contact.pgp_public_key or "" }}</textarea>
+              <div class="alert alert-info mt-2">You can drag and drop the pgp key file into the text area</div>
+
             </div>
 
             <button class="btn btn-primary" name="action"
@@ -70,4 +72,9 @@
   </div>
 {% endblock %}
 
-
+{% block script %}
+    <script src="/static/js/utils/drag-drop-into-text.js"></script>
+    <script>
+        enableDragDropForPGPKeys('#pgp-public-key');
+    </script>
+{% endblock %}

templates/dashboard/mailbox_detail.html

@@ -123,8 +123,9 @@
 
               <textarea name="pgp"
                   {% if not current_user.is_premium() %} disabled {% endif %}
-                        class="form-control" rows=10
+                        class="form-control" rows=10 id="pgp-public-key"
                         placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ mailbox.pgp_public_key or "" }}</textarea>
+              <div class="alert alert-info mt-2">You can drag and drop the pgp key file into the text area</div>
             </div>
 
             <input type="hidden" name="form-name" value="pgp">
@@ -263,10 +264,12 @@
 {% endblock %}
 
 {% block script %}
+  <script src="/static/js/utils/drag-drop-into-text.js"></script>
   <script>
     $(".custom-switch-input").change(function (e) {
       $(this).closest("form").submit();
     });
+    enableDragDropForPGPKeys('#pgp-public-key');
   </script>
 {% endblock %}