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.
261 lines
15 KiB
HTML
261 lines
15 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="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
|
|
<link rel="stylesheet" href="css/main.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">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" />
|
|
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" />
|
|
State: <select class="form-control" id="notary_state">
|
|
<option selected></option>
|
|
<option value="mt">Montana</option>
|
|
</select>
|
|
<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>
|
|
A corresponding public key is also available; anyone with your public key can
|
|
verify you signed a document, but cannot do anything else.
|
|
It is recommended to post your public key somewhere public like a website.
|
|
This way, people can ensure documents are valid. 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.
|
|
</p>
|
|
<div class="btn btn-primary m-1" onclick="loadKeyFromLocalStorageWithUserFeedback()"><i class="fas fa-unlock"></i> Create/unlock private key</div>
|
|
<div class="btn btn-primary m-1" onclick="unloadKey()"><i class="fas fa-lock"></i> Lock private key</div>
|
|
<div class="btn btn-primary m-1" onclick="exportPublicKey()"><i class="fas fa-file-export"></i> Export public key</div>
|
|
<br>
|
|
<div class="btn btn-danger m-1" onclick="exportPrivateKey()"><i class="fas fa-download"></i> Back up private key</div>
|
|
<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">
|
|
<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>
|
|
<option value="sm">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">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>
|
|
<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" data-bs-dismiss="modal" onclick="signaturePadCallback()">Apply</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">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">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 to">Jurat/Verification on oath ("signed and sworn to")</option>
|
|
<option value="signed and affirmed to">Jurat/Verification on affirmation ("signed and affirmed to")</option>
|
|
<option value="CERTIFIEDCOPYELECTRONIC">Certified copy of electronic record</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img id="certificate-preview" style="width: 6in; height: 4in;"/>
|
|
</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" onclick="pdfZoom('fitheight');"><i class="fas fa-arrows-alt-v"></i> Fit Height</div>
|
|
<div class="btn btn-primary" onclick="pdfZoom('fitwidth');"><i class="fas fa-arrows-alt-h"></i> Fit Width</div>
|
|
<div class="btn btn-primary" onclick="pdfZoom('out');"><i class="fas fa-search-minus"></i> Zoom Out</div>
|
|
<div class="btn btn-primary" 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" onclick="activateStampDrawTool()"><i class="fas fa-stamp"></i> Stamp/Seal</div>
|
|
<div class="btn btn-primary" onclick="activateClientSignaturePad()"><i class="fas fa-file-signature"></i> Sign (Client)</div>
|
|
<div class="btn btn-primary" onclick="activateNotarySignatureTool()"><i class="fas fa-file-signature"></i> Sign (Notary)</div>
|
|
<div class="btn btn-primary" onclick="activateTextTool()"><i class="fas fa-font"></i> Add Text</div>
|
|
<div class="btn btn-primary" onclick="activateNotaryCertificateTool()"><i class="fas fa-sticky-note"></i> Add Certificate</div>
|
|
<div class="btn btn-primary" 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">
|
|
<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>
|
|
</div>
|
|
|
|
|
|
<div id="svgtrimbox"></div>
|
|
|
|
|
|
<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="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/main.js"></script> |