@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
464 lines (463 loc) • 20.6 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the BSD 3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _FortifyCertificates_fortify;
import { h, Host, } from "@stencil/core";
import { downloadFromBuffer, Typography } from "@peculiar/certificates-viewer";
import { FortifyAPI, } from "@peculiar/fortify-client-core";
import { Convert } from "pvtsutils";
import { getString, l10n, } from "../../utils/l10n";
import { BackIcon } from "../icons";
import { FortifyNotDetected } from "../fortify-not-detected";
import { FortifyNotSupported } from "../fortify-not-supported";
import { FortifyProvidersEmpty } from "../fortify-providers-empty";
import { FortifyClientUpdate } from "../fortify-client-update";
import { FortifyConnecting } from "../fortify-connecting";
import { FortifyChallengeNotApproved } from "../fortify-challenge-not-approved";
import { FortifyAuthorization } from "../fortify-authorization";
import { FortifyStatus } from "../fortify-status";
import { FortifyLayout } from "../fortify-layout";
import { FortifyButton } from "../fortify-button";
import { CertificatesList } from "./certificates-list";
export class FortifyCertificates {
constructor() {
_FortifyCertificates_fortify.set(this, void 0);
/**
* Component data filters.
* KeyUsageType you can find on [certificate specification](https://tools.ietf.org/html/rfc5280#section-4.2.1.3).
*/
this.filters = {};
/**
* If `true`, the component footer will be hidden.
*/
this.hideFooter = false;
/**
* A link to download the application when a connection to Fortify is not found.
*/
this.downloadAppLink = 'https://fortifyapp.com';
/**
* A link to redirect the user to the help page
* if there are any questions about the operation of the application.
*/
this.helpPageLink = 'https://fortifyapp.com/help';
this.providers = [];
this.certificates = [];
this.isFetching = { connectionDetect: 'pending' };
this.debugEvents = [];
this.handleDocumentKeydown = (event) => {
/**
* Reset Fortify filters manually using `Shift+R` shortcut.
*/
if (event.shiftKey && event.code === 'KeyR') {
__classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").options.filters = {};
this.tryGetData();
}
/**
* Download Fortify debug events like a json file.
*/
if (event.shiftKey && event.code === 'KeyD') {
downloadFromBuffer(Convert.FromString(JSON.stringify(this.debugEvents, undefined, 2)), `debug-fortify-wc.${Date.now()}`, 'json', 'text/json');
}
};
this.handleClickCancel = () => {
this.selectionCancel.emit();
};
this.handleClickContinue = () => {
const certificate = this.certificates
.find((cert) => cert.index === this.certificateSelectedIndex);
if (certificate) {
this.selectionSuccess.emit({
certificateId: certificate.index,
providerId: certificate.providerID,
privateKeyId: certificate.privateKeyId,
socketProvider: __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").server,
});
}
};
this.handleClickUpdateCertificates = () => {
this.tryGetData();
};
this.handleClickTryAgain = async () => {
const login = await this.tryLogin();
if (!login) {
return;
}
await this.tryGetData();
};
this.handleClickCloseDetails = () => {
this.certificateBase64ForDetails = null;
};
this.handleClickCertificate = (certificateIndex) => {
this.certificateSelectedIndex = certificateIndex;
};
this.handleClickCertificateDetails = async (certificateIndex) => {
const certificate = this.certificates.find((cert) => cert.index === certificateIndex);
if (certificate) {
this.certificateBase64ForDetails = Convert.ToBase64(certificate.raw);
}
};
}
componentWillLoad() {
l10n.setLocale(this.language);
}
componentDidLoad() {
__classPrivateFieldSet(this, _FortifyCertificates_fortify, new FortifyAPI({
onDebug: (event) => {
this.debugEvents.push(event);
},
onClose: this.handleCloseConnection.bind(this),
onProvidersAdded: this.tryGetData.bind(this),
onProvidersRemoved: this.tryGetData.bind(this),
filters: this.filters,
}), "f");
this.start();
document.addEventListener('keydown', this.handleDocumentKeydown);
}
disconnectedCallback() {
__classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").finish();
document.removeEventListener('keydown', this.handleDocumentKeydown);
}
handleCloseConnection() {
this.providers = [];
this.certificates = [];
this.certificateSelectedIndex = undefined;
this.certificateBase64ForDetails = undefined;
this.setFetching('connectionDetect', 'rejected');
}
async start() {
this.setFetching('connectionDetect', 'pending');
if (!__classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").isConnectionSupported()) {
this.setFetching('connectionSupport', 'rejected');
return;
}
if (!await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").isConnectionDetected()) {
this.setFetching('connectionDetect', 'rejected');
}
await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").isConnectionDetectedAuto();
this.setFetching('connectionDetect', 'pending');
try {
await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").connect();
}
catch (error) {
console.error(error);
if (error && error.message) {
// TODO: Add code to `webcrypto-client` and use it instead of `message`
if (error.message.indexOf('update your client to the latest version') !== -1) {
this.setFetching('connectionClientUpdate', 'rejected');
}
}
return;
}
const login = await this.tryLogin();
if (!login) {
return;
}
await this.tryGetData();
}
async tryGetData() {
this.setFetching('providers', 'pending');
this.certificateSelectedIndex = undefined;
this.providers = [];
this.certificates = [];
try {
this.providers = await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").getProviders();
this.setFetching('providers', 'resolved');
}
catch (_a) {
this.setFetching('providers', 'rejected');
return;
}
this.setFetching('certificates', 'pending');
try {
this.certificates = await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").getCertificatesByProviders(this.providers);
this.setFetching('certificates', 'resolved');
}
catch (_b) {
this.setFetching('certificates', 'rejected');
}
}
async tryLogin() {
this.challenge = undefined;
this.setFetching('connectionApprove', 'pending');
try {
const challenge = await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").challenge();
if (challenge) {
this.challenge = challenge;
await __classPrivateFieldGet(this, _FortifyCertificates_fortify, "f").login();
}
this.setFetching('connectionApprove', 'resolved');
}
catch (_a) {
this.setFetching('connectionApprove', 'rejected');
return undefined;
}
return true;
}
setFetching(name, value) {
this.isFetching = Object.assign(Object.assign({}, this.isFetching), { [name]: value });
}
static renderConnecting() {
return (h(FortifyConnecting, null));
}
static renderFortifyAuthorization(pin) {
return (h(FortifyAuthorization, { pin: pin }));
}
renderFortifyNotDetected() {
return (h(FortifyNotDetected, { downloadAppLink: this.downloadAppLink }));
}
renderFortifyClientUpdate() {
return (h(FortifyClientUpdate, { downloadAppLink: this.downloadAppLink }));
}
renderFortifyNotSupported() {
return (h(FortifyNotSupported, { onCancel: this.handleClickCancel }));
}
renderChallengeNotApproved() {
return (h(FortifyChallengeNotApproved, { onCancel: this.handleClickCancel, onTryAgain: this.handleClickTryAgain }));
}
renderCertificates() {
return (h(CertificatesList, { certificates: this.certificates, providers: this.providers, certificateSelectedIndex: this.certificateSelectedIndex, loading: this.isFetching.certificates === 'pending' || this.isFetching.providers === 'pending', allowContinue: !!this.certificateSelectedIndex, helpPageLink: this.helpPageLink, onCertificate: this.handleClickCertificate, onCertificateDetails: this.handleClickCertificateDetails, onUpdate: this.handleClickUpdateCertificates, onCancel: this.handleClickCancel, onContinue: this.handleClickContinue }));
}
renderProvidersEmpty() {
return (h(FortifyProvidersEmpty, { helpPageLink: this.helpPageLink, onCancel: this.handleClickCancel }));
}
static renderUnresolvedStatus() {
return (h(FortifyStatus, { title: "Someting went wrong for status", description: "ERROR" }));
}
render() {
let content = null;
switch (true) {
case this.isFetching.connectionClientUpdate === 'rejected':
content = this.renderFortifyClientUpdate();
break;
case this.isFetching.connectionSupport === 'rejected':
content = this.renderFortifyNotSupported();
break;
case this.isFetching.connectionDetect === 'rejected':
content = this.renderFortifyNotDetected();
break;
case this.isFetching.connectionApprove === 'rejected':
content = this.renderChallengeNotApproved();
break;
case this.isFetching.connectionApprove === 'pending' && !!this.challenge:
content = FortifyCertificates.renderFortifyAuthorization(this.challenge);
break;
case this.isFetching.providers === 'resolved' && !this.providers.length:
content = this.renderProvidersEmpty();
break;
case this.isFetching.providers === 'pending' && !!this.providers.length:
content = this.renderCertificates();
break;
case !!this.isFetching.certificates:
content = this.renderCertificates();
break;
case this.isFetching.connectionDetect === 'pending':
case this.isFetching.connectionSupport === 'pending':
case this.isFetching.connectionApprove === 'pending':
case this.isFetching.providers === 'pending':
content = FortifyCertificates.renderConnecting();
break;
default:
content = FortifyCertificates.renderUnresolvedStatus();
}
return (h(Host, { key: '4e06409b754c63b720b076f642aa3340f481a06c' }, h(FortifyLayout, { key: 'e6006f8d6862260b7c1872b74aeeadb5bd6bf304', hideFooter: this.hideFooter }, this.certificateBase64ForDetails && (h("div", { key: '9b4f413f5ab87ac42fc6f0aba24eb4ba6036fbd8', class: "certificate_details", role: "presentation" }, h("header", { key: 'f2434dfc77663a7636aceab64383df345dcc220a', class: "certificate_details_header" }, h(FortifyButton, { key: 'aa5ef6c997e745d038cf9f11dd799fd47349d27f', startIcon: h(BackIcon, null), onClick: this.handleClickCloseDetails }, getString('actions.back')), h(Typography, { key: '76c85ae823e48bbc88dd6ffa66ccbbd4513784e5', variant: "h5", color: "black" }, getString('details.title'))), h("div", { key: '805bb2f8a4afd88905914da7bc621a04bb1c8d74', class: "certificate_details_content" }, h("peculiar-certificate-viewer", { key: '6ef2a7706d0b48fe4d3ff2c920d6fe786a70afa2', certificate: this.certificateBase64ForDetails })))), content)));
}
static get is() { return "peculiar-fortify-certificates"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["fortify-certificates.scss"]
};
}
static get styleUrls() {
return {
"$": ["fortify-certificates.css"]
};
}
static get properties() {
return {
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TSupportedMessagesType",
"resolved": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"tr\" | \"uk\"",
"references": {
"TSupportedMessagesType": {
"location": "import",
"path": "../../utils/l10n",
"id": "src/utils/l10n.ts::TSupportedMessagesType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Component language."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "language"
},
"filters": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "IFilters",
"resolved": "IFilters",
"references": {
"IFilters": {
"location": "import",
"path": "@peculiar/fortify-client-core",
"id": "../client-core/dist/types/index.d.ts::IFilters"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Component data filters.\nKeyUsageType you can find on [certificate specification](https://tools.ietf.org/html/rfc5280#section-4.2.1.3)."
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"hideFooter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If `true`, the component footer will be hidden."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "hide-footer",
"defaultValue": "false"
},
"downloadAppLink": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A link to download the application when a connection to Fortify is not found."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "download-app-link",
"defaultValue": "'https://fortifyapp.com'"
},
"helpPageLink": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A link to redirect the user to the help page\nif there are any questions about the operation of the application."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "help-page-link",
"defaultValue": "'https://fortifyapp.com/help'"
}
};
}
static get states() {
return {
"certificateBase64ForDetails": {},
"providers": {},
"certificates": {},
"challenge": {},
"certificateSelectedIndex": {},
"isFetching": {}
};
}
static get events() {
return [{
"method": "selectionCancel",
"name": "selectionCancel",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the user has canceled the selection flow."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "selectionSuccess",
"name": "selectionSuccess",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the user has successfully selected a certificate."
},
"complexType": {
"original": "ISelectionSuccessEvent",
"resolved": "ISelectionSuccessEvent",
"references": {
"ISelectionSuccessEvent": {
"location": "local",
"path": "/home/runner/work/fortify-webcomponents/fortify-webcomponents/packages/webcomponents/src/components/fortify-certificates/fortify-certificates.tsx",
"id": "src/components/fortify-certificates/fortify-certificates.tsx::ISelectionSuccessEvent"
}
}
}
}];
}
}
_FortifyCertificates_fortify = new WeakMap();
//# sourceMappingURL=fortify-certificates.js.map