From 1c65094da8fb0c421c58c90f81e807c3764b88b7 Mon Sep 17 00:00:00 2001
From: D-Bao <49440133+D-Bao@users.noreply.github.com>
Date: Mon, 27 Mar 2023 08:48:27 +0000
Subject: [PATCH] Fix drag and drop to upload PGP public key not working on
 Firefox and Chromium (but working on Safari) (#1658)

* Fix pgp file drag and drop only worked on Safari

* Minor UI improvement of pgp public key text area

* add dashed outline only during dragover event
---
 static/js/utils/drag-drop-into-text.js  | 21 +++++++++++++++++++--
 static/style.css                        |  5 +++++
 templates/dashboard/contact_detail.html |  2 +-
 templates/dashboard/mailbox_detail.html |  2 +-
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/static/js/utils/drag-drop-into-text.js b/static/js/utils/drag-drop-into-text.js
index ab4b062f..81c6948b 100644
--- a/static/js/utils/drag-drop-into-text.js
+++ b/static/js/utils/drag-drop-into-text.js
@@ -8,7 +8,8 @@ function enableDragDropForPGPKeys(inputID) {
         let files = event.dataTransfer.files;
         for (let i = 0; i < files.length; i++) {
             let file = files[i];
-            if(file.type !== 'text/plain'){
+            const isValidPgpFile = file.type === 'text/plain' || file.name.endsWith('.asc') || file.name.endsWith('.pub') || file.name.endsWith('.pgp') || file.name.endsWith('.key');
+            if (!isValidPgpFile) {
                 toastr.warning(`File ${file.name} is not a public key file`);
                 continue;
             }
@@ -16,6 +17,7 @@ function enableDragDropForPGPKeys(inputID) {
             reader.onloadend = onFileLoaded;
             reader.readAsBinaryString(file);
         }
+        dropArea.classList.remove("dashed-outline");
     }
 
     function onFileLoaded(event) {
@@ -24,5 +26,20 @@ function enableDragDropForPGPKeys(inputID) {
     }
 
     const dropArea = $(inputID).get(0);
+    dropArea.addEventListener("dragenter", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.add("dashed-outline");
+    });
+    dropArea.addEventListener("dragover", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.add("dashed-outline");
+    });
+    dropArea.addEventListener("dragleave", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.remove("dashed-outline");
+    });
     dropArea.addEventListener("drop", drop, false);
-}
\ No newline at end of file
+}
diff --git a/static/style.css b/static/style.css
index 6c157051..c6ba74ca 100644
--- a/static/style.css
+++ b/static/style.css
@@ -217,4 +217,9 @@ textarea.parsley-error {
 
 .italic {
     font-style: italic;
+}
+
+/* dashed outline to indicate droppable area */
+.dashed-outline {
+    outline: 4px dashed gray;
 }
\ No newline at end of file
diff --git a/templates/dashboard/contact_detail.html b/templates/dashboard/contact_detail.html
index 8616fffe..2bd18141 100644
--- a/templates/dashboard/contact_detail.html
+++ b/templates/dashboard/contact_detail.html
@@ -43,7 +43,7 @@
             {% endif %}
             <div class="form-group">
               <label class="form-label">PGP Public Key</label>
-              <textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ contact.pgp_public_key or "" }}</textarea>
+              <textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="(Drag and drop or paste your pgp public key here)&#10;-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ contact.pgp_public_key or "" }}</textarea>
             </div>
             <button class="btn btn-primary" name="action" {% if not current_user.is_premium() %}
                disabled {% endif %} value="save">
diff --git a/templates/dashboard/mailbox_detail.html b/templates/dashboard/mailbox_detail.html
index 72136135..e5104069 100644
--- a/templates/dashboard/mailbox_detail.html
+++ b/templates/dashboard/mailbox_detail.html
@@ -112,7 +112,7 @@
             {{ csrf_form.csrf_token }}
             <div class="form-group">
               <label class="form-label">PGP Public Key</label>
-              <textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ mailbox.pgp_public_key or "" }}</textarea>
+              <textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="(Drag and drop or paste your pgp public key here)&#10;-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ mailbox.pgp_public_key or "" }}</textarea>
             </div>
             <input type="hidden" name="form-name" value="pgp">
             <button class="btn btn-primary" name="action" {% if not current_user.is_premium() %}