LacunaWebPKI complete example (with AngularJS and extra UI components)

by Lacuna Software

HTML

<script src="https://webpki.lacunasoftware.com/Scripts/angular.js"></script>
<script src="https://webpki.lacunasoftware.com/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="https://webpki.lacunasoftware.com/Scripts/angular-block-ui.js"></script>
<link rel="stylesheet" href="https://webpki.lacunasoftware.com/Content/css/angular-block-ui.css">
<link rel="stylesheet" href="https://webpki.lacunasoftware.com/Content/css/bootstrap.min.css">
<script src="https://get.webpkiplugin.com/Scripts/LacunaWebPKI/lacuna-web-pki-2.3.1.js"></script>
<script src="https://get.webpkiplugin.com/Scripts/LacunaWebPKI/lacuna-web-pki-2.5.0.js"></script>
<div ng-app="app" block-ui="main" class="main">
    <div ng-controller="ExampleController">
        <form>
            <div id="signatureControlsPanel" ng-show="showSignatureControls">
                <p>
                    <select ng-model="selectedCertificate" ng-options="getCertificateDisplayName(cert) for cert in certificates">
                        <option value="">Choose a certificate ...</option>
                    </select>
                    <button type="button" ng-click="reloadCertificates()">Reload</button>
                </p>
                <p>
                    You will be signing <a href="https://webpki.lacunasoftware.com/Content/SampleDocument.pdf" target="_blank">this file</a>.
                </p>
                <p>
                    <button type="button" ng-click="signFile()">Sign File</button>
                </p>
            </div>
        </form>
    </div>
</div>

CSS

.main {
    min-height: 400px;
    padding: 1em;
}
#signatureControlsPanel {
    margin-top: 1em;
}

JavaScript

// ------------------------------------------------------------------------------------------
// LacunaWebPKI complete example (with AngularJS and extra UI components)

var app = angular.module('app', ['ui.bootstrap', 'blockUI']);

app.config(function(blockUIConfig) {
    blockUIConfig.autoInjectBodyBlock = false;
});

app.controller('ExampleController', function ($scope, $http, $modal, blockUI) {
    
    $scope.certificates = [];
    $scope.showSignatureControls = false;
    var signatureProcessId = null;
    
    var pki = new LacunaWebPKI({
        "format": 1,
        "allowedDomains": [
            "jsfiddle.net",
            "webpki.lacunasoftware.com"
        ],
        "expiration": null,
        "signature": "ClKvO1J22vAD+YmfANiKQLbcLE1lNraPKCel6tRM+ZxR+h6M/crtJYRRVGGz7hrdbM0Y0mfTu15RMYGqQMi1QNZS6GrT4vNzIayv552Fl0EFWQA7jWlctUwfYoHRHVEnCNx9YGXDiA9+yDoGlVwgTR7fjzNeS3Fen1MVIyKBF464gN0JvdiCRJMI47JGVDkPmKjcrYIvJs6y5Lg25RW4ZnBKVruS+HR2s3k8ZrV4y4RCQE4UYMKbukF9vsF+JqAEifRlPq2xLcrNdxBveVDSXS/LRHAcrZrMM+Iw4A79jl0ngWPcy+CwinAhT+3dxVo5ZWMRQFpmTkylEMDvTjV9wQ=="
    });
    
    var onWebPkiError = function (message, error, origin) {
        blockUI.stop();
        log('Web PKI error originated at ' + origin + ': ' + error);
        showModal('Error', 'Web PKI error: ' + message);
    };

    var start = function () {
        blockUI.start('Detecting Web PKI ...');
        log('Checking component installation ...');
        pki.init({
            angularScope: $scope,
            defaultError: onWebPkiError,
            ready: onWebPkiReady,
            notInstalled: onWebPkiNotInstalled
        });
    };
    
    var onWebPkiNotInstalled = function (status, message) {
        log('Component not installed or outdated');
        blockUI.stop();
        showModal('Message', message + ' -- Click OK to go to installation page', function() {
            pki.redirectToInstallPage();
        });
    };
    
    var onWebPkiReady = function () {
        log('Component...