@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
429 lines (418 loc) • 37.3 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, r as registerInstance, c as createEvent, H as Host } from './index-4c0eccab.js';
import { bi as downloadFromBuffer, C as Convert_1 } from './certification_request-0b43f1e5.js';
import { T as Typography } from './typography-a2121a56.js';
import { F as FortifyButton, a as FortifyStatus, b as FortifyButtonText, c as FortifyAPI, d as FortifyLayout, e as FortifyConnecting, f as FortifyAuthorization, g as FortifyNotDetected, h as FortifyNotSupported, i as FortifyChallengeNotApproved, j as FortifyProvidersEmpty } from './fortify-layout-e8f57bda.js';
import { g as getString, l as l10n } from './l10n-3e56fc64.js';
import './object_identifiers-49241619.js';
/* eslint-disable react/no-unknown-property */
const CertificateIcon = (props) => (h("svg", Object.assign({}, props, { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
h("path", { d: "M20.346 20.576a6.23 6.23 0 100-12.46 6.23 6.23 0 000 12.46z", stroke: "currentColor", "stroke-miterlimit": "10" }),
h("path", { d: "M20.346 23.692a9.346 9.346 0 100-18.692 9.346 9.346 0 000 18.692z", stroke: "currentColor", "stroke-miterlimit": "10" }),
h("path", { d: "M19.91 23.91L15.88 35l-1.702-2.939L11 33.224l4.03-11.09M20.772 23.91L24.812 35l1.692-2.939 3.188 1.163-4.04-11.09", stroke: "currentColor", "stroke-miterlimit": "10" })));
/* eslint-disable react/no-unknown-property */
const CertificatePrivateIcon = (props) => (h("svg", Object.assign({}, props, { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
h("path", { d: "M23.684 20.438a5.347 5.347 0 01-4.12 1.944 5.355 5.355 0 01-5.346-5.346c0-2.945 2.4-5.345 5.345-5.345.69 0 1.342.126 1.944.37V11.03a6.124 6.124 0 00-1.944-.311c-3.479 0-6.317 2.838-6.317 6.317 0 3.48 2.838 6.318 6.317 6.318a6.329 6.329 0 005.317-2.916h-1.196z", fill: "currentColor" }),
h("path", { d: "M25.084 24.423a9.303 9.303 0 003.052-3.985h-1.05a8.251 8.251 0 01-7.523 4.86c-4.558 0-8.26-3.704-8.26-8.262s3.702-8.26 8.26-8.26c.671 0 1.322.077 1.944.232v-1a9.095 9.095 0 00-1.944-.205c-5.092 0-9.233 4.14-9.233 9.233 0 3.023 1.468 5.695 3.713 7.387L10 35.512l3.577-1.302 1.905 3.304 4.081-11.216 4.082 11.216 1.905-3.304 3.577 1.302-4.043-11.09zM15.287 35.22l-1.273-2.196-2.381.865 3.246-8.912a9.144 9.144 0 003.683 1.234l-3.275 9.01zm9.826-2.196L23.84 35.22l-3.276-9.01a9.144 9.144 0 003.684-1.233l3.246 8.912-2.381-.865z", fill: "currentColor" }),
h("path", { "clip-rule": "evenodd", d: "M30.546 5.767A3.769 3.769 0 0026.78 2a3.769 3.769 0 00-3.766 3.767 3.76 3.76 0 002.354 3.482v7.338L26.779 18l1.413-1.413-1.173-1.172 1.173-1.173-1.173-1.173 1.173-1.172V9.249a3.768 3.768 0 002.354-3.482z", stroke: "currentColor", "stroke-miterlimit": "10" }),
h("path", { d: "M26.78 5.287a1.173 1.173 0 100-2.345 1.173 1.173 0 000 2.345z", fill: "currentColor" })));
/**
* @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.
*/
const BackIcon = (props) => (h("svg", Object.assign({}, props, { viewBox: "0 0 24 24", width: "24px", height: "24px", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
h("path", { stroke: "currentColor", "stroke-width": "1.5", d: "m14 18-6-6 6-6" })));
/**
* @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.
*/
const RefreshIcon = (props) => (h("svg", Object.assign({}, props, { viewBox: "0 0 20 21", width: "20", height: "21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
h("path", { fill: "currentColor", d: "M14.9 5.6c-1.225-1.313-2.975-2.1-4.9-2.1-3.85 0-7 3.15-7 7s3.15 7 7 7c3.238 0 5.95-2.275 6.738-5.25H14.9c-.7 2.012-2.625 3.5-4.9 3.5-2.888 0-5.25-2.363-5.25-5.25 0-2.888 2.362-5.25 5.25-5.25 1.488 0 2.713.612 3.675 1.575l-2.8 2.8H17V3.5l-2.1 2.1Z" })));
/**
* @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.
*/
const FortifyClientUpdate = (props) => {
const { downloadAppLink } = props;
return (h(FortifyStatus, { title: getString('unsupportedVersion.title'), description: getString('unsupportedVersion.description') },
h(FortifyButton, { variant: "primary", href: downloadAppLink }, getString('actions.update'))));
};
/**
* @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.
*/
const CertificatesListItem = (props) => {
const { certificate, provider, isSelected, onClickDetails, onClick, } = props;
const handleClickDetails = (event) => {
event.stopPropagation();
onClickDetails(certificate.index);
};
const handleClick = () => {
onClick(certificate.index);
};
const getCertificateName = () => {
const { G, CN, SN, E, } = certificate.subject;
// Return Common Name if present.
if (CN) {
return CN;
}
// Return Given Name + Surname if both present.
if (G && SN) {
return `${G} ${SN}`;
}
// Return Email if none of the above present
if (E) {
return E;
}
return certificate.subjectName;
};
const name = getCertificateName();
const Icon = certificate.privateKeyId ? CertificatePrivateIcon : CertificateIcon;
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
h("li", { role: "option", class: "certificates_list_item", "aria-selected": String(isSelected), onClick: handleClick },
h(Icon, { class: "certificates_list_item_icon" }),
h("div", { class: "certificates_list_item_info" },
h("div", null,
h(Typography, { variant: "s2", color: "black" }, name),
h(Typography, { variant: "c1", color: "gray-9" }, provider === null || provider === void 0 ? void 0 : provider.name)),
h("table", { class: "certificates_list_item_table" },
h("tbody", null,
h("tr", null,
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.issuer'))),
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" }, certificate.issuer.CN))),
h("tr", null,
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.valid'))),
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" },
new Date(certificate.notBefore).toLocaleDateString(),
"\u00A0 \u2013 \u00A0",
new Date(certificate.notAfter).toLocaleDateString()))),
h("tr", null,
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.serial'))),
h("td", null,
h(Typography, { variant: "c2", color: "gray-9" }, certificate.serialNumber)))))),
h(FortifyButton, { class: "certificates_list_item_button", onClick: handleClickDetails }, getString('actions.details'))));
};
/**
* @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.
*/
const CertificatesList = (props) => {
const { onUpdate, onCancel, onContinue, onCertificate, onCertificateDetails, certificates = [], providers = [], helpPageLink, loading, allowContinue, certificateSelectedIndex, } = props;
const renderCertificatesEmpty = () => ([
h(CertificateIcon, { class: "certificates_list_icon" }),
h(Typography, { color: "gray-9", variant: "b3" }, getString('certificates.empty.title')),
h(FortifyButtonText, { href: helpPageLink }, getString('actions.needHelp')),
]);
const renderCertificatesLoading = () => (h("peculiar-circular-progress", null));
const renderCertificatesList = () => (certificates.map((certificate) => (h(CertificatesListItem, { key: certificate.index, certificate: certificate, provider: providers.find((provider) => provider.id === certificate.providerID), isSelected: certificateSelectedIndex === certificate.index, onClick: onCertificate, onClickDetails: onCertificateDetails }))));
let content = null;
switch (true) {
case loading:
content = (h("div", { class: "certificates_list_content_center" }, renderCertificatesLoading()));
break;
case certificates.length > 0:
content = (h("ul", { role: "listbox" }, renderCertificatesList()));
break;
default:
content = (h("div", { class: "certificates_list_content_center" }, renderCertificatesEmpty()));
}
return (h("div", { class: "certificates_list" },
h(Typography, { variant: "h5", color: "black" }, getString('certificates.title')),
h("div", { class: "certificates_list_content" }, content),
h("div", { class: "certificates_list_actions container_actions" },
h(FortifyButton, { variant: "default", onClick: onUpdate, startIcon: h(RefreshIcon, null), disabled: loading }, getString('actions.updateCertificates')),
h("div", { class: "container_actions" },
h(FortifyButton, { onClick: onCancel, disabled: loading }, getString('actions.cancel')),
h(FortifyButton, { variant: "primary", disabled: loading || !allowContinue, onClick: onContinue }, getString('actions.continue'))))));
};
const fortifyCertificatesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent;font-family:var(--pv-font-family, inherit)}.t-h1{font-weight:var(--pv-text-h1-weight);font-size:var(--pv-text-h1-size);line-height:var(--pv-text-h1-height);letter-spacing:var(--pv-text-h1-spacing)}.t-h2{font-weight:var(--pv-text-h2-weight);font-size:var(--pv-text-h2-size);line-height:var(--pv-text-h2-height);letter-spacing:var(--pv-text-h2-spacing)}.t-h3{font-weight:var(--pv-text-h3-weight);font-size:var(--pv-text-h3-size);line-height:var(--pv-text-h3-height);letter-spacing:var(--pv-text-h3-spacing)}.t-h4{font-weight:var(--pv-text-h4-weight);font-size:var(--pv-text-h4-size);line-height:var(--pv-text-h4-height);letter-spacing:var(--pv-text-h4-spacing)}.t-h5{font-weight:var(--pv-text-h5-weight);font-size:var(--pv-text-h5-size);line-height:var(--pv-text-h5-height);letter-spacing:var(--pv-text-h5-spacing)}.t-s1{font-weight:var(--pv-text-s1-weight);font-size:var(--pv-text-s1-size);line-height:var(--pv-text-s1-height);letter-spacing:var(--pv-text-s1-spacing)}.t-s2{font-weight:var(--pv-text-s2-weight);font-size:var(--pv-text-s2-size);line-height:var(--pv-text-s2-height);letter-spacing:var(--pv-text-s2-spacing)}.t-b1{font-weight:var(--pv-text-b1-weight);font-size:var(--pv-text-b1-size);line-height:var(--pv-text-b1-height);letter-spacing:var(--pv-text-b1-spacing)}.t-b2{font-weight:var(--pv-text-b2-weight);font-size:var(--pv-text-b2-size);line-height:var(--pv-text-b2-height);letter-spacing:var(--pv-text-b2-spacing)}.t-b3{font-weight:var(--pv-text-b3-weight);font-size:var(--pv-text-b3-size);line-height:var(--pv-text-b3-height);letter-spacing:var(--pv-text-b3-spacing)}.t-btn1{font-weight:var(--pv-text-btn1-weight);font-size:var(--pv-text-btn1-size);line-height:var(--pv-text-btn1-height);letter-spacing:var(--pv-text-btn1-spacing)}.t-btn2{font-weight:var(--pv-text-btn2-weight);font-size:var(--pv-text-btn2-size);line-height:var(--pv-text-btn2-height);letter-spacing:var(--pv-text-btn2-spacing)}.t-c1{font-weight:var(--pv-text-c1-weight);font-size:var(--pv-text-c1-size);line-height:var(--pv-text-c1-height);letter-spacing:var(--pv-text-c1-spacing)}.t-c2{font-weight:var(--pv-text-c2-weight);font-size:var(--pv-text-c2-size);line-height:var(--pv-text-c2-height);letter-spacing:var(--pv-text-c2-spacing)}.c-primary-tint-5{--pv-color-base:var(--pv-color-primary-tint-5)}.c-primary-tint-4{--pv-color-base:var(--pv-color-primary-tint-4)}.c-primary-tint-3{--pv-color-base:var(--pv-color-primary-tint-3)}.c-primary-tint-2{--pv-color-base:var(--pv-color-primary-tint-2)}.c-primary-tint-1{--pv-color-base:var(--pv-color-primary-tint-1)}.c-primary{--pv-color-base:var(--pv-color-primary)}.c-primary-shade-1{--pv-color-base:var(--pv-color-primary-shade-1)}.c-primary-shade-2{--pv-color-base:var(--pv-color-primary-shade-2)}.c-primary-shade-3{--pv-color-base:var(--pv-color-primary-shade-3)}.c-primary-shade-4{--pv-color-base:var(--pv-color-primary-shade-4)}.c-primary-shade-5{--pv-color-base:var(--pv-color-primary-shade-5)}.c-primary-contrast{--pv-color-base:var(--pv-color-primary-contrast)}.c-secondary-tint-5{--pv-color-base:var(--pv-color-secondary-tint-5)}.c-secondary-tint-4{--pv-color-base:var(--pv-color-secondary-tint-4)}.c-secondary-tint-3{--pv-color-base:var(--pv-color-secondary-tint-3)}.c-secondary-tint-2{--pv-color-base:var(--pv-color-secondary-tint-2)}.c-secondary-tint-1{--pv-color-base:var(--pv-color-secondary-tint-1)}.c-secondary{--pv-color-base:var(--pv-color-secondary)}.c-secondary-shade-1{--pv-color-base:var(--pv-color-secondary-shade-1)}.c-secondary-shade-2{--pv-color-base:var(--pv-color-secondary-shade-2)}.c-secondary-shade-3{--pv-color-base:var(--pv-color-secondary-shade-3)}.c-secondary-shade-4{--pv-color-base:var(--pv-color-secondary-shade-4)}.c-secondary-shade-5{--pv-color-base:var(--pv-color-secondary-shade-5)}.c-secondary-contrast{--pv-color-base:var(--pv-color-secondary-contrast)}.c-wrong-tint-5{--pv-color-base:var(--pv-color-wrong-tint-5)}.c-wrong-tint-4{--pv-color-base:var(--pv-color-wrong-tint-4)}.c-wrong-tint-3{--pv-color-base:var(--pv-color-wrong-tint-3)}.c-wrong-tint-2{--pv-color-base:var(--pv-color-wrong-tint-2)}.c-wrong-tint-1{--pv-color-base:var(--pv-color-wrong-tint-1)}.c-wrong{--pv-color-base:var(--pv-color-wrong)}.c-wrong-shade-1{--pv-color-base:var(--pv-color-wrong-shade-1)}.c-wrong-shade-2{--pv-color-base:var(--pv-color-wrong-shade-2)}.c-wrong-shade-3{--pv-color-base:var(--pv-color-wrong-shade-3)}.c-wrong-shade-4{--pv-color-base:var(--pv-color-wrong-shade-4)}.c-wrong-shade-5{--pv-color-base:var(--pv-color-wrong-shade-5)}.c-wrong-contrast{--pv-color-base:var(--pv-color-wrong-contrast)}.c-attention-tint-5{--pv-color-base:var(--pv-color-attention-tint-5)}.c-attention-tint-4{--pv-color-base:var(--pv-color-attention-tint-4)}.c-attention-tint-3{--pv-color-base:var(--pv-color-attention-tint-3)}.c-attention-tint-2{--pv-color-base:var(--pv-color-attention-tint-2)}.c-attention-tint-1{--pv-color-base:var(--pv-color-attention-tint-1)}.c-attention{--pv-color-base:var(--pv-color-attention)}.c-attention-shade-1{--pv-color-base:var(--pv-color-attention-shade-1)}.c-attention-shade-2{--pv-color-base:var(--pv-color-attention-shade-2)}.c-attention-shade-3{--pv-color-base:var(--pv-color-attention-shade-3)}.c-attention-shade-4{--pv-color-base:var(--pv-color-attention-shade-4)}.c-attention-shade-5{--pv-color-base:var(--pv-color-attention-shade-5)}.c-success-tint-5{--pv-color-base:var(--pv-color-success-tint-5)}.c-success-tint-4{--pv-color-base:var(--pv-color-success-tint-4)}.c-success-tint-3{--pv-color-base:var(--pv-color-success-tint-3)}.c-success-tint-2{--pv-color-base:var(--pv-color-success-tint-2)}.c-success-tint-1{--pv-color-base:var(--pv-color-success-tint-1)}.c-success{--pv-color-base:var(--pv-color-success)}.c-success-shade-1{--pv-color-base:var(--pv-color-success-shade-1)}.c-success-shade-2{--pv-color-base:var(--pv-color-success-shade-2)}.c-success-shade-3{--pv-color-base:var(--pv-color-success-shade-3)}.c-success-shade-4{--pv-color-base:var(--pv-color-success-shade-4)}.c-success-shade-5{--pv-color-base:var(--pv-color-success-shade-5)}.c-black{--pv-color-base:var(--pv-color-black)}.c-gray-10{--pv-color-base:var(--pv-color-gray-10)}.c-gray-9{--pv-color-base:var(--pv-color-gray-9)}.c-gray-8{--pv-color-base:var(--pv-color-gray-8)}.c-gray-7{--pv-color-base:var(--pv-color-gray-7)}.c-gray-6{--pv-color-base:var(--pv-color-gray-6)}.c-gray-5{--pv-color-base:var(--pv-color-gray-5)}.c-gray-4{--pv-color-base:var(--pv-color-gray-4)}.c-gray-3{--pv-color-base:var(--pv-color-gray-3)}.c-gray-2{--pv-color-base:var(--pv-color-gray-2)}.c-gray-1{--pv-color-base:var(--pv-color-gray-1)}.c-white{--pv-color-base:var(--pv-color-white)}.c-extra-1{--pv-color-base:var(--pv-color-extra-1)}.c-extra-2{--pv-color-base:var(--pv-color-extra-2)}.typography{color:var(--pv-color-base)}.button{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;background:transparent;border:1px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-decoration:none;outline:none;font-family:inherit;border-radius:4px;height:var(--pv-size-base-7);min-width:var(--pv-size-base-7);padding:0 var(--pv-size-base-3);-webkit-transition:background-color 200ms ease 0s;transition:background-color 200ms ease 0s;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--pv-size-base);font-size:0;-webkit-transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease 0s;transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease 0s;transition:background-color 200ms ease 0s, color 200ms ease 0s, box-shadow 200ms ease 0s, border-color 200ms ease 0s;transition:background-color 200ms ease 0s, color 200ms ease 0s, box-shadow 200ms ease 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease 0s}.button_child_text{color:inherit}.button:disabled{pointer-events:none;-webkit-box-shadow:none;box-shadow:none}.button_default{color:var(--pv-color-secondary)}.button_default:hover{background-color:var(--pv-color-secondary-tint-5)}.button_default:focus-visible{background-color:var(--pv-color-secondary-tint-4)}.button_default:active{background-color:var(--pv-color-secondary-tint-3)}.button_default:disabled{color:var(--pv-color-gray-7)}.button_secondary{border-color:var(--pv-color-gray-8);color:var(--pv-color-black)}.button_secondary:hover{background-color:var(--pv-color-gray-3)}.button_secondary:focus-visible{background-color:var(--pv-color-gray-4)}.button_secondary:active{background-color:var(--pv-color-gray-5)}.button_secondary:disabled{color:var(--pv-color-gray-7);border-color:var(--pv-color-gray-4)}.button_primary{background-color:var(--pv-color-primary);color:var(--pv-color-primary-contrast);-webkit-box-shadow:var(--pv-shadow-light-low);box-shadow:var(--pv-shadow-light-low)}.button_primary:hover{background-color:var(--pv-color-primary-tint-1)}.button_primary:focus-visible{background-color:var(--pv-color-primary-tint-2)}.button_primary:active{background-color:var(--pv-color-primary-tint-2);-webkit-box-shadow:var(--pv-shadow-light-medium);box-shadow:var(--pv-shadow-light-medium)}.button_primary:disabled{color:var(--pv-color-gray-8);background-color:var(--pv-color-gray-4)}.button_text{color:var(--pv-color-base);text-decoration:none;background:transparent;display:-ms-inline-flexbox;display:inline-flex;border:none;cursor:pointer;-webkit-transition:opacity 200ms ease 0s;transition:opacity 200ms ease 0s}.button_text:hover{opacity:0.7}.layout{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--pv-color-white);border-radius:3px;overflow:hidden}.layout_main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;position:relative}.layout_footer{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;height:var(--pv-size-base-10);-ms-flex-align:center;align-items:center;padding:0px var(--pv-size-base-3);border-top:1px solid var(--pv-color-gray-5);gap:var(--pv-size-base-2);color:var(--pv-color-footer-text);background-color:var(--pv-color-footer)}.layout_footer_text{color:inherit}.mt_2{margin-top:var(--pv-size-base-2)}.mt_4{margin-top:var(--pv-size-base-4)}.mt_6{margin-top:var(--pv-size-base-6)}.container_status{height:100%;text-align:center;padding:var(--pv-size-base-12)}.container_status_logo{display:block;margin:0 auto var(--pv-size-base-6)}.container_status_illustration{margin-top:var(--pv-size-base-12);margin-bottom:var(--pv-size-base-10)}.container_status_actions{display:-ms-flexbox;display:flex;gap:var(--pv-size-base-2);-ms-flex-pack:center;justify-content:center}.container_status_authorization_number{height:var(--pv-size-base-8);width:var(--pv-size-base-6);border-radius:4px;border:1px solid var(--pv-color-gray-5);text-align:center;line-height:var(--pv-size-base-8)}.container_actions{display:-ms-flexbox;display:flex;gap:var(--pv-size-base-2)}[hidden]{display:none}:host{display:block;min-height:550px;height:550px}.certificates_list{padding:var(--pv-size-base-6);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-4);height:100%}.certificates_list_content{border:1px solid var(--pv-color-gray-7);border-radius:4px;min-height:300px;overflow:auto;-ms-flex:1 1 auto;flex:1 1 auto}.certificates_list_content_center{height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;padding:var(--pv-size-base-6);gap:var(--pv-size-base-2)}.certificates_list_icon{width:40px;color:var(--pv-color-gray-8);margin-bottom:var(--pv-size-base-2)}.certificates_list_actions{padding-top:var(--pv-size-base-2);-ms-flex-pack:justify;justify-content:space-between}.certificates_list_item{display:-ms-flexbox;display:flex;padding:var(--pv-size-base-3) var(--pv-size-base-4);gap:var(--pv-size-base-4);cursor:pointer;border-bottom:1px solid var(--pv-color-gray-4);-ms-flex-align:start;align-items:start;-webkit-transition:background-color 200ms ease 0s;transition:background-color 200ms ease 0s}.certificates_list_item_icon{width:40px;-ms-flex-negative:0;flex-shrink:0;color:var(--pv-color-gray-8);-webkit-transition:color 200ms ease 0s;transition:color 200ms ease 0s}.certificates_list_item_info{-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-2)}.certificates_list_item_button{-ms-flex-item-align:center;align-self:center;-ms-flex-negative:0;flex-shrink:0;visibility:hidden}.certificates_list_item_table{width:100%}.certificates_list_item_table td{vertical-align:top}.certificates_list_item_table td:first-child{width:50px}.certificates_list_item_table td:last-child{padding-left:var(--pv-size-base-2)}.certificates_list_item:hover{background-color:var(--pv-color-gray-1)}.certificates_list_item:hover .certificates_list_item_button{visibility:visible}.certificates_list_item[aria-selected=true]{background-color:var(--pv-color-gray-3)}.certificates_list_item[aria-selected=true] .certificates_list_item_icon{color:var(--pv-color-gray-9)}.certificate_details{position:absolute;width:100%;height:100%;z-index:1;top:0;left:0;overflow:hidden;background-color:var(--pv-color-white);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.certificate_details_header{border-bottom:1px solid var(--pv-color-gray-5);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--pv-size-base-2) var(--pv-size-base-4);gap:var(--pv-size-base-4)}.certificate_details_content{-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto}";
const PeculiarFortifyCertificatesStyle0 = fortifyCertificatesCss;
/**
* @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 = (undefined && undefined.__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 = (undefined && undefined.__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;
const FortifyCertificates = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.selectionCancel = createEvent(this, "selectionCancel", 7);
this.selectionSuccess = createEvent(this, "selectionSuccess", 7);
_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_1.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_1.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)));
}
};
_FortifyCertificates_fortify = new WeakMap();
FortifyCertificates.style = PeculiarFortifyCertificatesStyle0;
export { FortifyCertificates as peculiar_fortify_certificates };
//# sourceMappingURL=peculiar-fortify-certificates.entry.js.map