You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
21 KiB
HTML
351 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2021 Netsyms Technologies.
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
-->
|
|
<title>IPENtool</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
<link rel="stylesheet" href="css/theme.css" />
|
|
<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-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="settingsModalLabel"><i class="fas fa-cogs"></i> Settings</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-4" id="notaryProfileSettings">
|
|
<h5><i class="fas fa-address-card"></i> Notary Profile</h5>
|
|
Name: <input class="form-control" type="text" id="notary_name" />
|
|
State: <select class="form-control" id="notary_state">
|
|
<option selected></option>
|
|
<option value="az">Arizona</option>
|
|
<option value="ar">Arkansas</option>
|
|
<option value="ca">California</option>
|
|
<option value="co">Colorado</option>
|
|
<option value="de">Delaware</option>
|
|
<option value="fl">Florida</option>
|
|
<option value="id">Idaho</option>
|
|
<option value="in">Indiana</option>
|
|
<option value="ia">Iowa</option>
|
|
<option value="ks">Kansas</option>
|
|
<option value="ky">Kentucky</option>
|
|
<option value="la">Louisiana</option>
|
|
<option value="mo">Missouri</option>
|
|
<option value="mt">Montana</option>
|
|
<option value="wa">Washington</option>
|
|
</select>
|
|
Email address: <input class="form-control" type="email" id="notary_email" />
|
|
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 number: <input class="form-control" type="text" id="notary_idnumber" />
|
|
<br>
|
|
Stamp Preview:<br>
|
|
<div class="card">
|
|
<div class="card-body p-2 text-center">
|
|
<img src="" id="stamp-preview" />
|
|
</div>
|
|
</div>
|
|
<br>
|
|
Notary Signature:<br>
|
|
<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">
|
|
<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,
|
|
and prove that you were the notary involved.
|
|
<br>
|
|
Signatures are generated using your private key, which you must keep secret.
|
|
Someone with the private key can modify a signed PDF without detection.
|
|
<b>Protect your private key like you protect your notary stamp/seal.</b>
|
|
<br><br>
|
|
A corresponding public key is also available; anyone with your public key can
|
|
verify you signed a document, but cannot do anything else.
|
|
To make verifying documents easier, the creator of this software
|
|
maintains a public online registry of public keys; you can upload your
|
|
key and notary profile with the button below.
|
|
<br><br>
|
|
It is also recommended to <b>back up your private key</b> in case your computer malfunctions.
|
|
This will ensure you don't need to make a new one. A new key won't be able to verify older signatures or vice versa.
|
|
Some states require you use only one key for the entire term of your commission.
|
|
</p>
|
|
<a class="btn btn-info m-1" target="_blank" href="https://docs.netsyms.com/docs/IPENtool/Cryptography%20101/"><i class="fas fa-graduation-cap"></i> Learn More</a>
|
|
<div class="btn btn-primary m-1" onclick="createKeyWithUserFeedback()"><i class="fas fa-key"></i> Create new private key</div>
|
|
<div class="btn btn-primary m-1" onclick="unloadKey()"><i class="fas fa-lock"></i> Lock private key (require password on next use)</div>
|
|
<br>
|
|
<div class="btn btn-primary m-1" onclick="exportPrivateKey()"><i class="fas fa-download"></i> Back up private key</div>
|
|
<div class="btn btn-primary m-1" onclick="importPrivateKey()"><i class="fas fa-upload"></i> Restore private key</div>
|
|
<br>
|
|
<div class="btn btn-primary m-1" onclick="exportPublicKeyToFile()"><i class="fas fa-file-export"></i> Export public key to file</div>
|
|
<div class="btn btn-primary m-1" onclick="exportPublicKeyToRegistry()"><i class="fas fa-cloud-upload-alt"></i> Upload public key to online registry</div>
|
|
<br><br><br>
|
|
<div class="btn btn-danger m-1" onclick="erasePrivateKey()"><i class="fas fa-exclamation-triangle"></i> Erase private key</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings">
|
|
<h5><i class="fas fa-sliders-h"></i> App Options</h5>
|
|
Button size: <select class="form-control" id="button_size">
|
|
<option value="lg">Large</option>
|
|
<option value="md">Medium</option>
|
|
<option value="sm" selected>Small</option>
|
|
</select>
|
|
Color theme: <select class="form-control" id="color_theme">
|
|
<option value="purple" selected>Purple</option>
|
|
<option value="green">Green</option>
|
|
<option value="red">Red</option>
|
|
<option value="aqua">Aqua</option>
|
|
<option value="ocean">Ocean</option>
|
|
<option value="dusty">Dusty</option>
|
|
<option value="lilac">Lilac</option>
|
|
<option value="spring">Spring</option>
|
|
<option value="shadow">Shadow</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveSettingsModal()"><i class="fas fa-save"></i> Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="signatureModal" tabindex="-1" aria-labelledby="signatureModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="signatureModalLabel"><i class="fas fa-signature"></i> Signature Pad</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="btn btn-warning d-inline-block" onclick="resizeSignaturePadCanvas();signaturePad.clear();"><i class="fas fa-eraser"></i> Erase</div>
|
|
<div class="btn btn-primary" onclick="signaturePadUndo();"><i class="fas fa-undo"></i> Undo</div>
|
|
<div class="btn btn-info" onclick="signatureRemoteModalOpen();"><i class="fas fa-mobile-alt"></i> Sign with Phone</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="signature-wrapper">
|
|
<img src="img/signature-line.svg" />
|
|
<canvas id="signaturecanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary btn-default" data-bs-dismiss="modal" onclick="signaturePadCallback()">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="signatureRemoteModal" tabindex="-1" aria-labelledby="signatureRemoteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="signatureRemoteModalLabel"><i class="fas fa-mobile-alt"></i> Remote Signature Pad Connection</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="list-group">
|
|
<div class="list-group-item">
|
|
Use a phone, tablet, or other touchscreen device as a signature pad. It must be connected to the same network (e.g. WiFi hotspot) as this computer.
|
|
On the other device, go to the website shown below, or open a camera or barcode scanner app and point it the QR code shown.
|
|
</div>
|
|
<div class="list-group-item text-center">
|
|
<span id="signatureRemoteUrlLabel"></span>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<div id="signatureRemoteQRCode" class="d-flex justify-content-center p-4" style="background-color: white; border-radius: 0.5em;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary btn-default" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="verifyModal" tabindex="-1" aria-labelledby="verifyModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="verifyModalLabel"><i class="fas fa-search"></i> Digital Signature Analysis Report</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="alert alert-dark" role="alert" id="verifyModalStatusMessage"></div>
|
|
<ul class="list-group" id="verifyModalDetailedInfoList"></ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="certificateBuilderModal" tabindex="-1" aria-labelledby="certificateBuilderModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="certificateBuilderModalLabel"><i class="fas fa-sticky-note"></i> Notarial Certificate Builder</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
State: <select class="form-control" id="cert_state"></select>
|
|
County: <input class="form-control" type="text" id="cert_county" />
|
|
Signer: <input class="form-control" type="text" id="cert_signer" />
|
|
|
|
Notarial act: <select class="form-control" id="cert_act">
|
|
<option value="acknowledged">Acknowledgement ("acknowledged")</option>
|
|
<option value="signed">Signature Witness ("signed")</option>
|
|
<option value="signed and sworn">Jurat/Verification on oath ("signed and sworn")</option>
|
|
<option value="signed and affirmed">Jurat/Verification on affirmation ("signed and affirmed")</option>
|
|
<option value="CERTIFIEDCOPYELECTRONIC">Certified copy of electronic record</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body py-1">
|
|
<div class="card">
|
|
<div class="card-body p-1 text-center">
|
|
<img id="certificate-preview" style="width: 6in; height: 4in;"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="certificateBuilderCallback()">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column h-100">
|
|
<div class="d-flex flex-wrap" id="toolbar-bin">
|
|
<div class="card d-inline-block">
|
|
<div class="card-body p-1">
|
|
<div class="btn btn-primary" onclick="addPDF();"><i class="fas fa-file-pdf"></i> Add PDF</div>
|
|
<div class="btn btn-primary" onclick="savePDF();"><i class="fas fa-save"></i> Save Signed PDF</div>
|
|
<div class="btn btn-primary" onclick="closePDF(true);"><i class="fas fa-trash"></i> Close PDF</div>
|
|
<div class="btn btn-primary" onclick="analyzeSignedPDF();"><i class="fas fa-search"></i> Analyze PDF</div>
|
|
<div class="btn btn-primary" onclick="openSettingsModal();"><i class="fas fa-cog"></i> Settings</div>
|
|
</div>
|
|
</div>
|
|
<div class="card d-inline-block">
|
|
<div class="card-body p-1">
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="pdfZoom('fitheight');"><i class="fas fa-arrows-alt-v"></i> Fit Height</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="pdfZoom('fitwidth');"><i class="fas fa-arrows-alt-h"></i> Fit Width</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="pdfZoom('out');"><i class="fas fa-search-minus"></i> Zoom Out</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="pdfZoom('in');"><i class="fas fa-search-plus"></i> Zoom In</div>
|
|
</div>
|
|
</div>
|
|
<div class="card d-inline-block">
|
|
<div class="card-body p-1">
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="activateStampDrawTool()"><i class="fas fa-stamp"></i> Stamp/Seal</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="activateClientSignaturePad()"><i class="fas fa-file-signature"></i> Sign (Client)</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="activateNotarySignatureTool()"><i class="fas fa-file-signature"></i> Sign (Notary)</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="activateTextTool()"><i class="fas fa-font"></i> Add Text</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="activateNotaryCertificateTool()"><i class="fas fa-sticky-note"></i> Add Certificate</div>
|
|
<div class="btn btn-primary enable-when-doc-open disabled" onclick="addPage()"><i class="fas fa-plus"></i> Append Blank Page</div>
|
|
<div class="btn btn-primary disabled" id="cancelDrawBtn" onclick="disableGuideBox()">Cancel</div>
|
|
</div>
|
|
</div>
|
|
<div class="card d-inline-block">
|
|
<div class="card-body p-1 h-100 d-flex align-items-center">
|
|
<span id="lockstatus" title="Private key locked"><i class="fas fa-lock"></i></span> <span id="statustext"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card flex-grow-1" id="page-canvas-container-card">
|
|
<div id="page-canvas-container" class="card-body p-0 m-0">
|
|
<canvas id="placementguidebox" width="1000" height="1000"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-body p-1"></div>
|
|
<div class="modal-footer p-1">
|
|
<button type="button" class="btn btn-primary btn-default" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="okCancelPromptModal" tabindex="-1" aria-labelledby="okCancelPromptModalText" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-body p-1" id="okCancelPromptModalText"></div>
|
|
<div class="modal-footer p-1">
|
|
<button type="button" class="btn btn-secondary" onclick="okCancelPromptModalCallback(false);" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="okCancelPromptModalCallback(true);" data-bs-dismiss="modal">Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<p id="passwordModalText"></p>
|
|
<input class="form-control" type="password" id="passwordModalInput" />
|
|
</div>
|
|
<div class="modal-footer p-1">
|
|
<button type="button" class="btn btn-secondary" onclick="passwordModalCallback('');" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary btn-default" id="passwordModalSubmitBtn" onclick="passwordModalCallback($('#passwordModalInput').val());" data-bs-dismiss="modal">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-fixed bottom-0 start-50 translate-middle-x 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>
|
|
</div>
|
|
|
|
|
|
<div id="svgtrimbox"></div>
|
|
|
|
|
|
<script src="node_modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
|
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="node_modules/pdfjs-dist/build/pdf.min.js"></script>
|
|
<script src="node_modules/jspdf/dist/jspdf.umd.min.js"></script>
|
|
<script src="node_modules/signature_pad/dist/signature_pad.umd.min.js"></script>
|
|
<script src="node_modules/qrcodejs/qrcode.min.js"></script>
|
|
<script src="js/kbpgp-2.1.15.js"></script>
|
|
<script src="js/svg-to-image.js"></script>
|
|
<script src="js/data.js"></script>
|
|
<script src="js/util.js"></script>
|
|
<script src="js/storage.js"></script>
|
|
<script src="js/filesystem.js"></script>
|
|
<script src="js/crypto.js"></script>
|
|
<script src="js/certbuilder.js"></script>
|
|
<script src="js/drawtools.js"></script>
|
|
<script src="js/pdf.js"></script>
|
|
<script src="js/popups.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/signaturepad.js"></script>
|
|
<script src="js/events.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/sigserver.js"></script> |