@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
353 lines (344 loc) • 32.9 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
import { X as X509Certificate, d as defineCustomElement$4 } from './certificate-viewer.js';
import { l as l10n, aC as dateShort, O as OIDs } from './certification_request.js';
import { T as Typography } from './typography.js';
import { B as Button } from './button.js';
import { D as DownloadIcon } from './miscellaneous.js';
import { A as ArrowTopIcon, a as ArrowBottomIcon } from './arrow_top.js';
import { d as defineCustomElement$5 } from './button-menu.js';
import { d as defineCustomElement$3 } from './circular-progress.js';
import { d as defineCustomElement$2 } from './highlight-words.js';
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const DetailsIcon = (props) => {
const { color = 'secondary' } = props;
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" }, h("path", { fill: `var(--pv-color-${color})`, d: "M6.71 19.79a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21 1 1 0 0 0-.21.33 1 1 0 0 0 .21 1.09c.097.088.209.16.33.21a.94.94 0 0 0 .76 0 1.15 1.15 0 0 0 .33-.21 1 1 0 0 0 .21-1.09 1 1 0 0 0-.21-.33ZM10 11.5h14a1 1 0 0 0 0-2H10a1 1 0 0 0 0 2Zm-3.29 3.29a1 1 0 0 0-1.09-.21 1.15 1.15 0 0 0-.33.21 1 1 0 0 0-.21.33.94.94 0 0 0 0 .76c.05.121.122.233.21.33.097.088.209.16.33.21a.94.94 0 0 0 .76 0 1.15 1.15 0 0 0 .33-.21 1.15 1.15 0 0 0 .21-.33.94.94 0 0 0 0-.76 1 1 0 0 0-.21-.33ZM24 14.5H10a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2ZM6.71 9.79a1 1 0 0 0-.33-.21 1 1 0 0 0-1.09.21 1.15 1.15 0 0 0-.21.33.94.94 0 0 0 0 .76c.05.121.122.233.21.33.097.088.209.16.33.21a1 1 0 0 0 1.09-.21 1.15 1.15 0 0 0 .21-.33.94.94 0 0 0 0-.76 1.15 1.15 0 0 0-.21-.33ZM24 19.5H10a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z" })));
};
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const LinkIcon = (props) => {
const { color = 'secondary' } = props;
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" }, h("path", { fill: `var(--pv-color-${color})`, d: "M21 14.32a1 1 0 0 0-1 1v7.18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1h7.18a1 1 0 0 0 0-2H8a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-7.18a1 1 0 0 0-1-1Zm3.92-8.2a1 1 0 0 0-.54-.54A1 1 0 0 0 24 5.5h-6a1 1 0 1 0 0 2h3.59l-10.3 10.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219L23 8.91v3.59a1 1 0 0 0 2 0v-6a1.001 1.001 0 0 0-.08-.38Z" })));
};
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const CrossIcon = (props) => {
const { color = 'gray-9' } = props;
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", fill: "none" }, h("path", { fill: `var(--pv-color-${color})`, "fill-rule": "evenodd", d: "m16.37 15 5.442 5.44c.25.252.25.663 0 .914l-.459.457a.646.646 0 0 1-.913 0L15 16.371l-5.44 5.44a.648.648 0 0 1-.915 0l-.457-.457a.649.649 0 0 1 0-.913L13.63 15 8.188 9.56a.649.649 0 0 1 0-.914l.457-.457a.648.648 0 0 1 .915 0l5.44 5.44 5.44-5.44a.646.646 0 0 1 .913 0l.46.457c.25.25.25.662 0 .913L16.37 15Z", "clip-rule": "evenodd" })));
};
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const CertificateSummary = (props) => {
const { certificate, showIssuer, } = props;
const renderRow = (name, value) => (h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, name)), h("td", null, h(Typography, { variant: "b2", color: "black" }, value))));
return (h("table", null, h("tbody", null, renderRow(l10n.getString('subjectName'), certificate.subjectToString()), showIssuer && renderRow(l10n.getString('issuerName'), certificate.issuerToString()), renderRow(l10n.getString('serialNumber'), certificate.serialNumber), renderRow(l10n.getString('version'), certificate.version), renderRow(l10n.getString('validity'), certificate.validity), renderRow(l10n.getString('issued'), dateShort(certificate.notBefore)), renderRow(l10n.getString('expired'), dateShort(certificate.notAfter)))));
};
const certificatesViewerCss = "*{-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:none;-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-6);min-width:var(--pv-size-base-6);padding:0 var(--pv-size-base-2);-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-2);font-size:0}.button.m_no_padding{padding:0}.button:hover{background-color:var(--pv-color-gray-3)}.button:focus{background-color:var(--pv-color-gray-4)}.button:active{background-color:var(--pv-color-gray-5)}:host{display:block;width:100%;word-wrap:break-word;min-width:280px;overflow:auto;position:relative}.search_section{padding:var(--pv-size-base-4);border-bottom:1px solid var(--pv-color-gray-4)}.input_search{height:var(--pv-size-base-8);width:100%;outline:none;background-color:var(--pv-color-gray-1);padding:0 var(--pv-size-base-2);border:1px solid var(--pv-color-gray-7);border-radius:4px;-webkit-transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s}.input_search::-webkit-input-placeholder{color:var(--pv-color-gray-9)}.input_search::-moz-placeholder{color:var(--pv-color-gray-9)}.input_search:-ms-input-placeholder{color:var(--pv-color-gray-9)}.input_search::-ms-input-placeholder{color:var(--pv-color-gray-9)}.input_search::placeholder{color:var(--pv-color-gray-9)}table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0}table td,table th{border-bottom:1px solid var(--pv-color-gray-4);vertical-align:top;text-align:left}table td:first-child,table th:first-child{padding-right:0;width:var(--pv-size-base-10)}table td:last-child,table th:last-child{padding-left:0;width:var(--pv-size-base-10)}table th{padding:var(--pv-size-base-2) var(--pv-size-base-4)}table th.col_action{padding:0}table td{padding:var(--pv-size-base-4)}table tr.m_expanded{background:var(--pv-color-gray-1)}table tr.m_expanded>td{border-bottom:none}table tr.expanded_summary{background:var(--pv-color-gray-1)}table tr.expanded_summary table{table-layout:initial}table tr.expanded_summary table td{border-bottom:none;padding:var(--pv-size-base-2)}table tr.expanded_summary table td:first-child{width:200px}table tr.expanded_summary table td:last-child{width:auto}.button_table_cell{margin-top:-3px}.status_wrapper{text-align:center;height:var(--pv-size-base-16);vertical-align:middle}.modal_wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-animation:fadeIn 200ms;animation:fadeIn 200ms;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.modal_backdrop{background:var(--pv-color-black);z-index:-1;position:fixed;top:0;right:0;bottom:0;left:0;opacity:0.5}.modal_container{background:var(--pv-color-white);width:100%;display:-ms-flexbox;display:flex;max-height:calc(100% - 60px);-ms-flex-direction:column;flex-direction:column;margin:var(--pv-size-base-6);position:relative;outline:none;-webkit-box-shadow:var(--pv-shadow-dark-hight);box-shadow:var(--pv-shadow-dark-hight);overflow:hidden;border:0px;padding:0px;max-width:640px;border-radius:4px}.modal_header{padding:var(--pv-size-base-3) var(--pv-size-base-4);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:var(--pv-size-base-2);border-bottom:1px solid var(--pv-color-gray-5)}.modal_content{-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto}:host([data-mobile-screen-view=true]) table,:host([data-mobile-screen-view=true]) tbody,:host([data-mobile-screen-view=true]) tr,:host([data-mobile-screen-view=true]) td{display:block;width:100% !important;padding:0;border:none}:host([data-mobile-screen-view=true]) thead{display:none}:host([data-mobile-screen-view=true]) table tr{padding:var(--pv-size-base-2) 0}:host([data-mobile-screen-view=true]) table .expanded_summary{padding:0}:host([data-mobile-screen-view=true]) table .certificate_row{border-bottom:1px solid var(--pv-color-gray-5);padding:var(--pv-size-base-2) var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) table .certificate_row_actions{padding-top:var(--pv-size-base-6)}:host([data-mobile-screen-view=true]) table .certificate_row_actions td{display:-ms-flexbox;display:flex;-ms-flex-pack:right;justify-content:right;gap:var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) .button_table_cell{margin-top:0}";
const PeculiarCertificatesViewerStyle0 = certificatesViewerCss;
const CertificatesViewer = /*@__PURE__*/ proxyCustomElement(class CertificatesViewer extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.detailsOpen = createEvent(this, "detailsOpen", 7);
this.detailsClose = createEvent(this, "detailsClose", 7);
this.isHasRoots = false;
this.handleClickDetails = (certificate) => {
this.certificateSelectedForDetails = certificate;
this.detailsOpen.emit(certificate);
};
this.handleModalClose = () => {
this.certificateSelectedForDetails = undefined;
this.detailsClose.emit();
};
this.handleSearch = (event) => {
this.search = event.target.value.trim();
};
this.certificates = [];
this.filterWithSearch = true;
this.highlightWithSearch = true;
this.mobileMediaQueryString = '(max-width: 900px)';
this.mobileScreenView = false;
this.search = '';
this.certificatesDecoded = [];
this.expandedRow = undefined;
this.certificateSelectedForDetails = undefined;
this.isDecodeInProcess = true;
}
handleMediaQueryChange(event) {
this.mobileScreenView = event.matches;
}
componentWillLoad() {
this.certificatesDecodeAndSet();
if (Build.isBrowser) {
this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);
this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));
this.mobileScreenView = this.mobileMediaQuery.matches;
}
}
disconnectedCallback() {
this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
}
watchCertificates(newValue, oldValue) {
/**
* Prevent rerender after set the same `certificates` prop.
*/
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.certificatesDecodeAndSet();
}
}
async certificatesDecodeAndSet() {
let hasRoots = false;
if (!Array.isArray(this.certificates)) {
return;
}
const data = [];
// eslint-disable-next-line no-restricted-syntax
for (const certificate of this.certificates) {
try {
const decoded = new X509Certificate(certificate.value);
await decoded.getThumbprint('SHA-1');
data.push({
body: decoded,
tests: certificate.tests,
name: certificate.name,
});
if (!hasRoots && decoded.isRoot) {
hasRoots = true;
}
}
catch (error) {
console.error('Error certificate parse:', error);
}
}
this.isHasRoots = hasRoots;
this.isDecodeInProcess = false;
this.certificatesDecoded = data;
}
// eslint-disable-next-line class-methods-use-this
handleClickDownloadAsPem(certificate) {
certificate.body.downloadAsPEM(certificate.name || certificate.body.commonName);
}
// eslint-disable-next-line class-methods-use-this
handleClickDownloadAsDer(certificate) {
certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);
}
handleClickRow(index) {
const isExpandedRowClicked = this.expandedRow === index;
this.expandedRow = isExpandedRowClicked
? undefined
: index;
}
getMaxColSpanValue() {
let colSpan = 5;
if (!this.isHasRoots) {
colSpan += 1;
}
return colSpan;
}
renderCertificateButtonActions(certificate) {
var _a, _b, _c;
const isHasTestURLs = certificate.tests
&& (certificate.tests.expired || certificate.tests.revoked || certificate.tests.valid);
return (h("peculiar-button-menu", { class: "button_table_cell", groups: [
{
title: l10n.getString('previewCertificate'),
options: [
{
text: l10n.getString('viewDetails'),
startIcon: h(DetailsIcon, null),
onClick: () => this.handleClickDetails(certificate.body),
},
],
},
{
title: l10n.getString('downloadOptions'),
options: [
{
text: l10n.getString('download.pem'),
startIcon: h(DownloadIcon, null),
onClick: () => this.handleClickDownloadAsPem(certificate),
},
{
text: l10n.getString('download.der'),
startIcon: h(DownloadIcon, null),
onClick: () => this.handleClickDownloadAsDer(certificate),
},
],
},
...(isHasTestURLs ? [{
title: l10n.getString('testURLs'),
options: [
...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid) ? [{
text: l10n.getString('valid'),
href: certificate.tests.valid,
startIcon: h(LinkIcon, null),
}] : []),
...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked) ? [{
text: l10n.getString('revoked'),
href: certificate.tests.revoked,
startIcon: h(LinkIcon, null),
}] : []),
...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired) ? [{
text: l10n.getString('expired'),
href: certificate.tests.expired,
startIcon: h(LinkIcon, null),
}] : []),
],
}] : []),
] }));
}
renderExpandedRow(certificate) {
const colSpan = this.getMaxColSpanValue() - 2;
return (h("tr", { class: "expanded_summary" }, h("td", null), h("td", { colSpan: colSpan }, h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), h("td", null)));
}
renderCertificatesRows() {
const searchHighlight = this.highlightWithSearch
? this.search
: '';
const content = [];
this.certificatesDecoded.forEach((certificate, index) => {
const isExpandedRow = index === this.expandedRow;
const publicKeyValue = OIDs[certificate.body.signature.algorithm]
|| certificate.body.signature.algorithm;
if (this.filterWithSearch && this.search) {
const certificateStringForSearch = [
publicKeyValue,
certificate.body.issuerCommonName,
certificate.name,
certificate.body.commonName,
certificate.body.thumbprints['SHA-1'],
]
.join(' ')
.toLowerCase();
if (certificateStringForSearch.indexOf(this.search.toLowerCase()) === -1) {
return;
}
}
if (this.mobileScreenView) {
content.push([
h("tr", { class: {
certificate_row: true,
m_expanded: isExpandedRow,
}, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h("table", null, h("tbody", null, !this.isHasRoots && (h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('issuer'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('name'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('publicKey'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), h("tr", { class: "certificate_row_actions" }, h("td", null, this.renderCertificateButtonActions(certificate), h(Button
// eslint-disable-next-line react/jsx-no-bind
, {
// eslint-disable-next-line react/jsx-no-bind
onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null)
}))))))),
]);
return;
}
content.push([
h("tr", { class: {
m_expanded: isExpandedRow,
}, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h(Button, { class: "button_table_cell",
// eslint-disable-next-line react/jsx-no-bind
onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null) })), !this.isHasRoots && (h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), h("td", null, this.renderCertificateButtonActions(certificate))),
isExpandedRow && this.renderExpandedRow(certificate.body),
]);
});
return content;
}
renderCertificateDetailsModal() {
if (!this.certificateSelectedForDetails) {
return null;
}
return (h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, h("div", { class: "modal_backdrop", onClick: this.handleModalClose, "aria-hidden": "true" }), h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, h("header", { class: "modal_header" }, h(Typography, { variant: "h4" }, l10n.getString('certificateDetails')), h(Button, { onClick: this.handleModalClose, startIcon: h(CrossIcon, null) })), h("div", { class: "modal_content" }, h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails, mobileMediaQueryString: this.mobileMediaQueryString })))));
}
renderSearch() {
if (!this.filterWithSearch && !this.highlightWithSearch) {
return null;
}
return (h("div", { class: "search_section" }, h("input", { onInput: this.handleSearch, type: "search", value: "", class: "input_search t-b3 c-black", disabled: !this.certificatesDecoded.length, placeholder: "Search" })));
}
renderEmptyState() {
const colSpan = this.getMaxColSpanValue();
return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "There are no certificates available."))));
}
renderEmptySearchState() {
const colSpan = this.getMaxColSpanValue();
return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
}
// eslint-disable-next-line class-methods-use-this
renderLoadingState() {
return (h("div", { class: "loading_container" }, h("peculiar-circular-progress", null)));
}
renderTableBody() {
if (this.isDecodeInProcess) {
return null;
}
if (!this.certificatesDecoded.length) {
return this.renderEmptyState();
}
const certificatesRows = this.renderCertificatesRows();
if (this.search && !certificatesRows.length) {
return this.renderEmptySearchState();
}
return certificatesRows;
}
render() {
return (h(Host, { key: 'e10ac3070a3cb75cb9a281a999fec42ef28d593d', "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), h("table", { key: 'abc765a09c9537c36500143c6caffa688910483e' }, !this.mobileScreenView && (h("thead", { key: 'c948fc3f9929deda81bfe9f1205b5c6f6032d256' }, h("tr", { key: '7deae387a944910a82588698b61d55c0ba64ff55' }, h("th", { key: '70927a2c00545a1c500e4312ed30022dc24df23a' }), !this.isHasRoots && (h("th", { key: 'af4811bbd78a46f4ab1e96d9a2f3251e59d5d773', class: "col_issuer" }, h(Typography, { key: '11064fc9659acfb8856ad96aba1192972b27e0e3', variant: "s2" }, l10n.getString('issuer')))), h("th", { key: '7898e55528b973f8dddebff2e86763fc4f0ad013', class: "col_name" }, h(Typography, { key: 'e5bae939345bce44423efaaee774678a163d51a6', variant: "s2" }, l10n.getString('name'))), h("th", { key: '83128f3a2812996df534b95690d6268bf0f096ec', class: "col_public_key" }, h(Typography, { key: '05e7f862d2336e2144ddd9438bb2636625abed36', variant: "s2" }, l10n.getString('publicKey'))), h("th", { key: '1387d00b085a524bd97d96e68e07f3e82ee57796', class: "col_fingerprint" }, h(Typography, { key: '393eac698d27bb9a17a2ae5cec18a0658f510f78', variant: "s2" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("th", { key: 'ffdba17371ff65a6df244edefe55bb81a9e821c8' })))), h("tbody", { key: '8e44c28a8d4bc64fe76c73d67054df3dcef7a7c1' }, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
}
static get watchers() { return {
"certificates": ["watchCertificates"]
}; }
static get style() { return PeculiarCertificatesViewerStyle0; }
}, [1, "peculiar-certificates-viewer", {
"certificates": [16],
"filterWithSearch": [4, "filter-with-search"],
"highlightWithSearch": [4, "highlight-with-search"],
"mobileMediaQueryString": [1, "mobile-media-query-string"],
"mobileScreenView": [32],
"search": [32],
"certificatesDecoded": [32],
"expandedRow": [32],
"certificateSelectedForDetails": [32],
"isDecodeInProcess": [32]
}, undefined, {
"certificates": ["watchCertificates"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-certificates-viewer", "peculiar-button-menu", "peculiar-certificate-viewer", "peculiar-circular-progress", "peculiar-highlight-words"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-certificates-viewer":
if (!customElements.get(tagName)) {
customElements.define(tagName, CertificatesViewer);
}
break;
case "peculiar-button-menu":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "peculiar-certificate-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "peculiar-circular-progress":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "peculiar-highlight-words":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PeculiarCertificatesViewer = CertificatesViewer;
const defineCustomElement = defineCustomElement$1;
export { PeculiarCertificatesViewer, defineCustomElement };
//# sourceMappingURL=peculiar-certificates-viewer.js.map