UNPKG

@peculiar/fortify-webcomponents

Version:

Web-components for creating CSR or Certificate and viewing certificates list using Fortify

456 lines (455 loc) 20.7 kB
/*! * © 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 __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 __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 _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 { CertificatesList } from "./certificates-list"; import { FortifyButton } from "../fortify-button"; export class FortifyCertificates { constructor() { _FortifyCertificates_fortify.set(this, void 0); 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); } }; this.language = undefined; this.filters = {}; this.hideFooter = false; this.downloadAppLink = 'https://fortifyapp.com'; this.helpPageLink = 'https://fortifyapp.com/help'; this.certificateBase64ForDetails = undefined; this.providers = []; this.certificates = []; this.challenge = undefined; this.certificateSelectedIndex = undefined; this.isFetching = { connectionDetect: 'pending', }; } 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 (error) { 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 (error) { 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 (error) { 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, onCertificate: this.handleClickCertificate, onCertificateDetails: this.handleClickCertificateDetails, onUpdate: this.handleClickUpdateCertificates, onCancel: this.handleClickCancel, onContinue: this.handleClickContinue, loading: this.isFetching.certificates === 'pending' || this.isFetching.providers === 'pending', allowContinue: !!this.certificateSelectedIndex, helpPageLink: this.helpPageLink })); } renderProvidersEmpty() { return (h(FortifyProvidersEmpty, { onCancel: this.handleClickCancel, helpPageLink: this.helpPageLink })); } 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: '3562a8b6206f03166ac8a4b8f9b1f034b68f3863' }, h(FortifyLayout, { key: '776e9f78f3861691119d8c3b71ef596812570858', hideFooter: this.hideFooter }, this.certificateBase64ForDetails && (h("div", { key: 'd9579600dbc7d634a0ed3b6043e76d5946186cea', class: "certificate_details", role: "presentation" }, h("header", { key: 'a431b3d5407e3dbbff8c96d2a5b2a1c71100da0f', class: "certificate_details_header" }, h(FortifyButton, { key: '864d6e0e26c5d85e6a9bd6d7220e4d65914f66ac', onClick: this.handleClickCloseDetails, startIcon: h(BackIcon, null) }, getString('actions.back')), h(Typography, { key: '96a161ca1a11ef5b31db2400c258f2f06c2ec634', variant: "h5", color: "black" }, getString('details.title'))), h("div", { key: '20d5b0b9ee8f9c5e77bfe74c076813bb1d955e08', class: "certificate_details_content" }, h("peculiar-certificate-viewer", { key: '27f39275e41e94becdf8f4761c1e424219951061', 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": "SupportedMessagesType", "resolved": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"ru\" | \"tr\"", "references": { "SupportedMessagesType": { "location": "import", "path": "../../utils/l10n", "id": "src/utils/l10n.ts::SupportedMessagesType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Component language." }, "getter": false, "setter": false, "attribute": "language", "reflect": true }, "filters": { "type": "unknown", "mutable": false, "complexType": { "original": "TFilters", "resolved": "{ expired?: boolean; onlySmartcards?: boolean; onlyWithPrivateKey?: boolean; keyUsage?: KeyUsageType[] | KeyUsageType[][]; subjectDNMatch?: string | RegExp; issuerDNMatch?: string | RegExp; providerNameMatch?: string | RegExp; providerATRMatch?: string | RegExp; onlyQualified?: boolean; certificateIdMatch?: string | RegExp; qualifiedCertificateStatements?: string[]; ca?: boolean; }", "references": { "TFilters": { "location": "import", "path": "@peculiar/fortify-client-core", "id": "../client-core/dist/types/index.d.ts::TFilters" } } }, "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, "attribute": "hide-footer", "reflect": true, "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, "attribute": "download-app-link", "reflect": true, "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, "attribute": "help-page-link", "reflect": true, "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": "/Users/donskov/Documents/work/pv/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