Netsyms/IPENtool
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Improve LaF, use modal instead of alerts, use toasts

Browse Source
This commit is contained in:
Skylar Ittner 2021-07-15 20:05:11 -06:00
parent 5d11f55e31
commit 612b4b11c7
5 changed files with 54 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/index.html
View File

@ -14,7 +14,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<link rel="icon" href="img/icon.svg" /> <link rel="icon" href="img/icon.svg" />
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5> <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="modal-body">
<div class="row"> <div class="row">
<div class="col-12 col-md-6 col-lg-4" id="notaryProfileSettings"> <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" /> Name: <input class="form-control" type="text" id="notary_name" />
Location (county/residing at): <input class="form-control" type="text" id="notary_location" /> Location (county/residing at): <input class="form-control" type="text" id="notary_location" />
Commission expiration: <input class="form-control" type="text" id="notary_expires" /> 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> </select>
<br> <br>
Stamp Preview:<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> <br>
Notary Signature:<br> Notary Signature:<br>
<img src="" id="signature-preview" /><br> <div class="card">
<div class="btn btn-primary m-1" onclick="activateNotarySignaturePad()"><i class="fas fa-signature"></i> Draw Signature</div> <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>
<div class="col-12 col-md-6 col-lg-4"> <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> <p>
<b>MUST READ:</b> When you save a PDF with this tool, a cryptographic signature is attached. <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, 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 class="btn btn-danger m-1" onclick="importPrivateKey()"><i class="fas fa-upload"></i> Restore private key</div>
</div> </div>
<div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings"> <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"> Button size: <select class="form-control" id="button_size">
<option value="lg">Large</option> <option value="lg">Large</option>
<option value="" selected>Medium</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> </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 id="toastBox" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body"></div> <div class="toast-body"></div>
</div> </div>

23
src/js/crypto.js
View File

@ -48,14 +48,15 @@ function loadKeyFromLocalStorage(callback) {
function unloadKey() { function unloadKey() {
keymgr = undefined; keymgr = undefined;
$("#lockstatus").css("display", ""); $("#lockstatus").css("display", "");
showToast("<i class='fas fa-lock'></i> Signing key locked.");
} }
function loadKeyFromLocalStorageWithUserFeedback() { function loadKeyFromLocalStorageWithUserFeedback() {
loadKeyFromLocalStorage(function (msg, ok) { loadKeyFromLocalStorage(function (msg, ok) {
if (ok) { if (ok) {
alert(msg); showToast("<i class='fas fa-unlock'></i> " + msg);
} else { } else {
alert("Error: " + msg); showAlert("Error: " + msg);
} }
}); });
} }
@ -187,14 +188,14 @@ function exportPublicKey() {
openSaveFileDialog(function (path) { openSaveFileDialog(function (path) {
keymgr.export_pgp_public({}, function (err, pgp_public) { keymgr.export_pgp_public({}, function (err, pgp_public) {
if (err) { if (err) {
alert("Something went wrong."); showAlert("Something went wrong.");
} else { } else {
writeToFile(path, pgp_public); writeToFile(path, pgp_public);
} }
}); });
}, "public-key.asc", ".asc"); }, "public-key.asc", ".asc");
} else { } else {
alert("Error: " + message); showAlert("Error: " + message);
} }
}); });
} }
@ -208,7 +209,7 @@ function exportPrivateKey() {
passphrase: pass2 passphrase: pass2
}, function (err, pgp_private) { }, function (err, pgp_private) {
if (err) { if (err) {
alert("Something went wrong."); showAlert("Something went wrong.");
} else { } else {
writeToFile(path, pgp_private); writeToFile(path, pgp_private);
} }
@ -226,7 +227,7 @@ function exportPrivateKey() {
if (!err) { if (!err) {
savepriv(key); savepriv(key);
} else { } else {
alert("Could not unlock key. Password is probably incorrect."); showAlert("Could not unlock key. Password is probably incorrect.");
} }
}); });
} else { } else {
@ -234,7 +235,7 @@ function exportPrivateKey() {
savepriv(key); savepriv(key);
} }
} else { } 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):"); var pass = prompt("Enter password for imported key (password was set when exported):");
loadPrivateKey(keyfile, pass, function (key) { loadPrivateKey(keyfile, pass, function (key) {
if (typeof key == "undefined") { if (typeof key == "undefined") {
alert("Could not import key. Password is probably incorrect."); showAlert("Could not import key. Password is probably incorrect.");
return; return;
} }
keymgr = key; keymgr = key;
setStorage("signingkey", keymgr.armored_pgp_private); setStorage("signingkey", keymgr.armored_pgp_private);
alert("Private key imported."); showAlert("Private key imported.");
}); });
}, ".asc"); }, ".asc");
} }
@ -281,9 +282,9 @@ function openPublicKeyFile() {
}, function (err, pubkeymgr) { }, function (err, pubkeymgr) {
if (!err) { if (!err) {
keyring.add_key_manager(pubkeymgr); 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 { } else {
alert("Error loading public key: " + err); showAlert("Error loading public key: " + err);
} }
}); });
}; };

2
src/js/drawtools.js
View File

@ -77,7 +77,7 @@ function activateStampDrawTool() {
function activateNotarySignatureTool() { function activateNotarySignatureTool() {
if (!inStorage("notary_signature")) { if (!inStorage("notary_signature")) {
alert("Please set a notary signature in the settings."); showAlert("Please set a notary signature in the settings.");
return; return;
} }
svgToImage(getStorage("notary_signature"), function (err, image) { svgToImage(getStorage("notary_signature"), function (err, image) {

8
src/js/main.js
View File

@ -65,6 +65,7 @@ function saveSettingsModal() {
setAppTheme(getStorage("color_theme")); setAppTheme(getStorage("color_theme"));
setStorage("button_size", $("#appOptionsSettings #button_size option:selected").val()); setStorage("button_size", $("#appOptionsSettings #button_size option:selected").val());
setButtonSize(getStorage("button_size")); setButtonSize(getStorage("button_size"));
showToast("<i class='fas fa-check'></i> Settings saved.");
} }
function initSignaturePad() { function initSignaturePad() {
@ -163,4 +164,9 @@ function showToast(message) {
toastEl.show(); toastEl.show();
} }
var toastEl = new bootstrap.Toast(document.getElementById("toastBox")); var toastEl = new bootstrap.Toast(document.getElementById("toastBox"));
function showAlert(message) {
$("#alertModal .modal-body").html(message);
new bootstrap.Modal(document.getElementById('alertModal')).show();
}

10
src/js/pdf.js
View File

@ -62,7 +62,7 @@ function analyzeSignedPDF() {
var analyze = function (pdf) { var analyze = function (pdf) {
var splitindex = pdf.indexOf("-----BEGIN PGP MESSAGE-----"); var splitindex = pdf.indexOf("-----BEGIN PGP MESSAGE-----");
if (splitindex == -1) { if (splitindex == -1) {
alert("Selected file does not contain any recognized signature data."); showAlert("Selected file does not contain any recognized signature data.");
return; return;
} }
var pdfdata = pdf.slice(0, splitindex); var pdfdata = pdf.slice(0, splitindex);
@ -82,7 +82,7 @@ function analyzeSignedPDF() {
parseAndDisplaySignature(msg, pdfhash, false, null); parseAndDisplaySignature(msg, pdfhash, false, null);
} catch (ex) { } catch (ex) {
console.error(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 { } else {
$("#verifyModalStatusMessage").html("<i class=\"fas fa-question-circle\"></i> File contents match signature; however, \ $("#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 \ 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."); then run the analyze tool again to prove if it was changed since notarization.");
$("#verifyModalStatusMessage").removeClass(); $("#verifyModalStatusMessage").removeClass();
$("#verifyModalStatusMessage").addClass(["alert", "alert-warning"]); $("#verifyModalStatusMessage").addClass(["alert", "alert-warning"]);
@ -332,7 +332,7 @@ function savePDF() {
statustextEl.html("<i class='fas fa-spin fa-spinner'></i> Signing document..."); statustextEl.html("<i class='fas fa-spin fa-spinner'></i> Signing document...");
makeAndSaveSignedPDF(pdf, path, function (result) { makeAndSaveSignedPDF(pdf, path, function (result) {
statustextEl.html("<i class='fas fa-check'></i> Signed and saved!"); 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 () { setTimeout(function () {
statustextEl.html(""); statustextEl.html("");
}, 5000); }, 5000);
@ -341,7 +341,7 @@ function savePDF() {
}, "signed.pdf", ".pdf"); }, "signed.pdf", ".pdf");
} else { } else {
statustextEl.html(""); statustextEl.html("");
alert("Error: " + message); showAlert("Error: " + message);
} }
}); });
} }