From 3d498b4eae3814004d09b114627c1f310a272a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Casaj=C3=BAs?= <adria.casajus@proton.ch>
Date: Thu, 24 Feb 2022 18:28:30 +0100
Subject: [PATCH] Allow drag and drop of keys into the text area

---
 templates/dashboard/contact_detail.html | 37 ++++++++++++++++++++++-
 templates/dashboard/mailbox_detail.html | 39 +++++++++++++++++++++++--
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/templates/dashboard/contact_detail.html b/templates/dashboard/contact_detail.html
index 25a79776..ea5da431 100644
--- a/templates/dashboard/contact_detail.html
+++ b/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="text-body p-2">You can drag and drop the pgp key into the text area</div>
+
             </div>
 
             <button class="btn btn-primary" name="action"
@@ -70,4 +72,37 @@
   </div>
 {% endblock %}
 
+{% block script %}
+    {% if current_user.is_premium() %}
+    <script>
+    const MAX_BYTES = 2048; // 2KiB
 
+    function drop(event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        let files = event.dataTransfer.files;
+        for (let i = 0; i < files.length; i++) {
+            let file = files[i];
+            console.log(file, file.name);
+            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);
+        $('#pgp-public-key').val(initialData);
+        console.log($('#pgp-public-key'));
+    }
+
+    const dropArea = $("#pgp-public-key").get(0);
+    dropArea.addEventListener("drop", drop, false);
+    </script>
+    {% endif %}
+{% endblock %}
diff --git a/templates/dashboard/mailbox_detail.html b/templates/dashboard/mailbox_detail.html
index 1fcb4d87..683d2e32 100644
--- a/templates/dashboard/mailbox_detail.html
+++ b/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="text-body p-2">You can drag and drop the pgp key into the text area</div>
             </div>
 
             <input type="hidden" name="form-name" value="pgp">
@@ -263,10 +264,44 @@
 {% endblock %}
 
 {% block script %}
-  <script>
+  <oscript>
     $(".custom-switch-input").change(function (e) {
       $(this).closest("form").submit();
     });
+
   </script>
+
+    {% if current_user.is_premium() %}
+    <script>
+        const MAX_BYTES = 2048; // 2KiB
+
+        function drop(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            let files = event.dataTransfer.files;
+            for (let i = 0; i < files.length; i++) {
+                let file = files[i];
+                console.log(file, file.name);
+                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);
+            $('#pgp-public-key').val(initialData);
+            console.log($('#pgp-public-key'));
+        }
+
+        const dropArea = $("#pgp-public-key").get(0);
+        dropArea.addEventListener("drop", drop, false);
+    </script>
+    {% endif %}
 {% endblock %}