From 612b4b11c78b5a486c0b66656881bf5fbbd9ae11 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Thu, 15 Jul 2021 20:05:11 -0600
Subject: [PATCH] Improve LaF, use modal instead of alerts, use toasts

---
 src/index.html      | 37 +++++++++++++++++++++++++++++--------
 src/js/crypto.js    | 23 ++++++++++++-----------
 src/js/drawtools.js |  2 +-
 src/js/main.js      |  8 +++++++-
 src/js/pdf.js       | 10 +++++-----
 5 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/index.html b/src/index.html
index db6232b..156ea32 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 <link rel="icon" href="img/icon.svg" />
 
 <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl modal-xxl">
+    <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
@@ -23,7 +23,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
             <div class="modal-body">
                 <div class="row">
                     <div class="col-12 col-md-6 col-lg-4" id="notaryProfileSettings">
-                        <h4><i class="fas fa-address-card"></i> Notary Profile</h4>
+                        <h5><i class="fas fa-address-card"></i> Notary Profile</h5>
                         Name: <input class="form-control" type="text" id="notary_name" />
                         Location (county/residing at): <input class="form-control" type="text" id="notary_location" />
                         Commission expiration: <input class="form-control" type="text" id="notary_expires" />
@@ -34,14 +34,24 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         </select>
                         <br>
                         Stamp Preview:<br>
-                        <img src="" id="stamp-preview" />
+                        <div class="card">
+                            <div class="card-body p-2 text-center">
+                                <img src="" id="stamp-preview" />
+                            </div>
+                        </div>
                         <br>
                         Notary Signature:<br>
-                        <img src="" id="signature-preview" /><br>
-                        <div class="btn btn-primary m-1" onclick="activateNotarySignaturePad()"><i class="fas fa-signature"></i> Draw Signature</div>
+                        <div class="card">
+                            <div class="card-body p-2 text-center">
+                                <img src="" id="signature-preview" />
+                            </div>
+                            <div class="card-footer p-1">
+                                <div class="btn btn-primary m-1" onclick="activateNotarySignaturePad()"><i class="fas fa-signature"></i> Draw Signature</div>
+                            </div>
+                        </div>
                     </div>
                     <div class="col-12 col-md-6 col-lg-4">
-                        <h4><i class="fas fa-user-lock"></i> Digital Signature</h4>
+                        <h5><i class="fas fa-user-lock"></i> Digital Signature</h5>
                         <p>
                             <b>MUST READ:</b> When you save a PDF with this tool, a cryptographic signature is attached.
                             This signature can be used to prove the PDF is unchanged since notarization,
@@ -66,7 +76,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         <div class="btn btn-danger m-1" onclick="importPrivateKey()"><i class="fas fa-upload"></i> Restore private key</div>
                     </div>
                     <div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings">
-                        <h4><i class="fas fa-cog"></i> App Options</h4>
+                        <h5><i class="fas fa-cog"></i> App Options</h5>
                         Button size: <select class="form-control" id="button_size">
                             <option value="lg">Large</option>
                             <option value="" selected>Medium</option>
@@ -212,7 +222,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     </div>
 </div>
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body p-1"></div>
+            <div class="modal-footer p-1">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 999999;">
     <div id="toastBox" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-body"></div>
     </div>
diff --git a/src/js/crypto.js b/src/js/crypto.js
index b0c485b..d300263 100644
--- a/src/js/crypto.js
+++ b/src/js/crypto.js
@@ -48,14 +48,15 @@ function loadKeyFromLocalStorage(callback) {
 function unloadKey() {
     keymgr = undefined;
     $("#lockstatus").css("display", "");
+    showToast("<i class='fas fa-lock'></i> Signing key locked.");
 }
 
 function loadKeyFromLocalStorageWithUserFeedback() {
     loadKeyFromLocalStorage(function (msg, ok) {
         if (ok) {
-            alert(msg);
+            showToast("<i class='fas fa-unlock'></i> " + msg);
         } else {
-            alert("Error: " + msg);
+            showAlert("Error: " + msg);
         }
     });
 }
@@ -187,14 +188,14 @@ function exportPublicKey() {
             openSaveFileDialog(function (path) {
                 keymgr.export_pgp_public({}, function (err, pgp_public) {
                     if (err) {
-                        alert("Something went wrong.");
+                        showAlert("Something went wrong.");
                     } else {
                         writeToFile(path, pgp_public);
                     }
                 });
             }, "public-key.asc", ".asc");
         } else {
-            alert("Error: " + message);
+            showAlert("Error: " + message);
         }
     });
 }
@@ -208,7 +209,7 @@ function exportPrivateKey() {
                 passphrase: pass2
             }, function (err, pgp_private) {
                 if (err) {
-                    alert("Something went wrong.");
+                    showAlert("Something went wrong.");
                 } else {
                     writeToFile(path, pgp_private);
                 }
@@ -226,7 +227,7 @@ function exportPrivateKey() {
                     if (!err) {
                         savepriv(key);
                     } else {
-                        alert("Could not unlock key. Password is probably incorrect.");
+                        showAlert("Could not unlock key. Password is probably incorrect.");
                     }
                 });
             } else {
@@ -234,7 +235,7 @@ function exportPrivateKey() {
                 savepriv(key);
             }
         } else {
-            alert("Could not unlock key: " + err);
+            showAlert("Could not unlock key: " + err);
         }
     });
 }
@@ -251,12 +252,12 @@ function importPrivateKey() {
         var pass = prompt("Enter password for imported key (password was set when exported):");
         loadPrivateKey(keyfile, pass, function (key) {
             if (typeof key == "undefined") {
-                alert("Could not import key. Password is probably incorrect.");
+                showAlert("Could not import key. Password is probably incorrect.");
                 return;
             }
             keymgr = key;
             setStorage("signingkey", keymgr.armored_pgp_private);
-            alert("Private key imported.");
+            showAlert("Private key imported.");
         });
     }, ".asc");
 }
@@ -281,9 +282,9 @@ function openPublicKeyFile() {
             }, function (err, pubkeymgr) {
                 if (!err) {
                     keyring.add_key_manager(pubkeymgr);
-                    alert("Public key file loaded. You can now analyze PDFs signed by the key's owner.");
+                    showAlert("Public key file loaded. You can now analyze PDFs signed by the key's owner.");
                 } else {
-                    alert("Error loading public key: " + err);
+                    showAlert("Error loading public key: " + err);
                 }
             });
         };
diff --git a/src/js/drawtools.js b/src/js/drawtools.js
index f5d25d4..40bb143 100644
--- a/src/js/drawtools.js
+++ b/src/js/drawtools.js
@@ -77,7 +77,7 @@ function activateStampDrawTool() {
 
 function activateNotarySignatureTool() {
     if (!inStorage("notary_signature")) {
-        alert("Please set a notary signature in the settings.");
+        showAlert("Please set a notary signature in the settings.");
         return;
     }
     svgToImage(getStorage("notary_signature"), function (err, image) {
diff --git a/src/js/main.js b/src/js/main.js
index 10b4668..f0d918b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -65,6 +65,7 @@ function saveSettingsModal() {
     setAppTheme(getStorage("color_theme"));
     setStorage("button_size", $("#appOptionsSettings #button_size option:selected").val());
     setButtonSize(getStorage("button_size"));
+    showToast("<i class='fas fa-check'></i> Settings saved.");
 }
 
 function initSignaturePad() {
@@ -163,4 +164,9 @@ function showToast(message) {
     toastEl.show();
 }
 
-var toastEl = new bootstrap.Toast(document.getElementById("toastBox"));
\ No newline at end of file
+var toastEl = new bootstrap.Toast(document.getElementById("toastBox"));
+
+function showAlert(message) {
+    $("#alertModal .modal-body").html(message);
+    new bootstrap.Modal(document.getElementById('alertModal')).show();
+}
\ No newline at end of file
diff --git a/src/js/pdf.js b/src/js/pdf.js
index c784294..3a329d4 100644
--- a/src/js/pdf.js
+++ b/src/js/pdf.js
@@ -62,7 +62,7 @@ function analyzeSignedPDF() {
         var analyze = function (pdf) {
             var splitindex = pdf.indexOf("-----BEGIN PGP MESSAGE-----");
             if (splitindex == -1) {
-                alert("Selected file does not contain any recognized signature data.");
+                showAlert("Selected file does not contain any recognized signature data.");
                 return;
             }
             var pdfdata = pdf.slice(0, splitindex);
@@ -82,7 +82,7 @@ function analyzeSignedPDF() {
                             parseAndDisplaySignature(msg, pdfhash, false, null);
                         } catch (ex) {
                             console.error(ex);
-                            alert("Error: could not parse signature data.");
+                            showAlert("Error: could not parse signature data.");
                         }
                     });
                 });
@@ -159,7 +159,7 @@ function parseAndDisplaySignature(msg, pdfhash, verified, fingerprint) {
             } else {
                 $("#verifyModalStatusMessage").html("<i class=\"fas fa-question-circle\"></i> File contents match signature; however, \
 could not verify signature authenticity. It's possible the file was changed then re-signed by an unknown person. If you have the \
-public key file for the notary that signed the file, <span class=\"btn btn-outline-secondary btn-sm\"onclick=\"openPublicKeyFile()\">click here</span> to use it, \
+public key file for the notary that signed the file, <span class=\"btn btn-secondary text-dark btn-sm\"onclick=\"openPublicKeyFile()\">click here</span> to use it, \
 then run the analyze tool again to prove if it was changed since notarization.");
                 $("#verifyModalStatusMessage").removeClass();
                 $("#verifyModalStatusMessage").addClass(["alert", "alert-warning"]);
@@ -332,7 +332,7 @@ function savePDF() {
                     statustextEl.html("<i class='fas fa-spin fa-spinner'></i> Signing document...");
                     makeAndSaveSignedPDF(pdf, path, function (result) {
                         statustextEl.html("<i class='fas fa-check'></i> Signed and saved!");
-                        alert("File signed and saved.\nSHA256 of file (without signature): " + result.hash);
+                        showAlert("File signed and saved.\nSHA256 of file (without signature): " + result.hash);
                         setTimeout(function () {
                             statustextEl.html("");
                         }, 5000);
@@ -341,7 +341,7 @@ function savePDF() {
             }, "signed.pdf", ".pdf");
         } else {
             statustextEl.html("");
-            alert("Error: " + message);
+            showAlert("Error: " + message);
         }
     });
 }