@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
351 lines (342 loc) • 33.8 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
'use strict';
var index = require('./index-C-N1xkRB.js');
var x509_certificate = require('./x509_certificate-D8cL7ieF.js');
var ssh_certificate = require('./ssh_certificate-ClDh-FAQ.js');
var typography = require('./typography-BzZd2J3Y.js');
var button = require('./button-CdL8Icyk.js');
var download = require('./download-DTvpTQTZ.js');
var arrow_top = require('./arrow_top-DK3Vc4ep.js');
require('./utils-DSHncyfG.js');
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const CertificateSummary = (props) => {
const { certificate, showIssuer, } = props;
const renderRow = (name, value) => (index.h("tr", null, index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "gray-9" }, name)), index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "black" }, value))));
return (index.h("table", null, index.h("tbody", null, renderRow(ssh_certificate.l10n.getString('subjectName'), certificate.subjectToString()), showIssuer && renderRow(ssh_certificate.l10n.getString('issuerName'), certificate.issuerToString()), renderRow(ssh_certificate.l10n.getString('serialNumber'), certificate.serialNumber), renderRow(ssh_certificate.l10n.getString('version'), certificate.version), renderRow(ssh_certificate.l10n.getString('validity'), certificate.validity), renderRow(ssh_certificate.l10n.getString('issued'), ssh_certificate.dateShort(certificate.notBefore)), renderRow(ssh_certificate.l10n.getString('expired'), ssh_certificate.dateShort(certificate.notAfter)))));
};
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const DetailsIcon = (props) => {
const { color = 'secondary' } = props;
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" }, index.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
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const LinkIcon = (props) => {
const { color = 'secondary' } = props;
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" }, index.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
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const CrossIcon = (props) => {
const { color = 'gray-9' } = props;
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", fill: "none" }, index.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" })));
};
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:calc(var(--pv-size-base) * 6);min-width:calc(var(--pv-size-base) * 6);padding:0 calc(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:calc(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:calc(var(--pv-size-base) * 4);border-bottom:1px solid var(--pv-color-gray-4)}.input_search{height:calc(var(--pv-size-base) * 8);width:100%;outline:none;background-color:var(--pv-color-gray-1);padding:0 calc(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:calc(var(--pv-size-base) * 10)}table td:last-child,table th:last-child{padding-left:0;width:calc(var(--pv-size-base) * 10)}table th{padding:calc(var(--pv-size-base) * 2) calc(var(--pv-size-base) * 4)}table th.col_action{padding:0}table td{padding:calc(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:calc(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:calc(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:calc(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:calc(var(--pv-size-base) * 3) calc(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:calc(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:calc(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:calc(var(--pv-size-base) * 2) calc(var(--pv-size-base) * 4)}:host([data-mobile-screen-view=true]) table .certificate_row_actions{padding-top:calc(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:calc(var(--pv-size-base) * 4)}:host([data-mobile-screen-view=true]) .button_table_cell{margin-top:0}`;
const CertificatesViewer = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.detailsOpen = index.createEvent(this, "detailsOpen");
this.detailsClose = index.createEvent(this, "detailsClose");
this.isHasRoots = false;
/**
* List of certificates values for decode and show in the list.
* <br />
* **NOTE**: If you do not provide a `name` value when
* invocing the component it will take the first Subject CN value.
* <br />
* **NOTE**: If you do not provide a `tests` this column will be ommited from the rendered page.
* <br />
* **NOTE**: If the supplied certificates are self-signed the issuer column will be ommited.
*/
this.certificates = [];
/**
* Use filter in the list when search is changed.
*/
this.filterWithSearch = true;
/**
* Use highlight chapters in the list when search is changed.
*/
this.highlightWithSearch = true;
/**
* Mobile media query string to control screen view change.
* <br />
* **NOTE**: Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.
* @example
* (max-width: 900px)
*/
this.mobileMediaQueryString = '(max-width: 900px)';
this.mobileScreenView = false;
this.search = '';
this.certificatesDecoded = [];
this.isDecodeInProcess = true;
this.handleClickDetails = (certificate) => {
this.certificateSelectedForDetails = certificate;
this.detailsOpen.emit(certificate);
};
this.handleModalClose = () => {
this.certificateSelectedForDetails = undefined;
this.detailsClose.emit();
};
this.handleSearch = (event) => {
const target = event.target;
this.search = target.value.trim();
};
}
handleMediaQueryChange(event) {
this.mobileScreenView = event.matches;
}
componentWillLoad() {
this.certificatesDecodeAndSet();
{
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 = [];
for (const certificate of this.certificates) {
try {
const decoded = new x509_certificate.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;
}
getCertificateName(certificate) {
if (typeof certificate.name === 'function') {
return certificate.name(certificate.body);
}
return certificate.name || certificate.body.commonName;
}
handleClickDownloadAsPem(certificate) {
certificate.body.downloadAsPEM(this.getCertificateName(certificate));
}
handleClickDownloadAsDer(certificate) {
certificate.body.downloadAsDER(this.getCertificateName(certificate));
}
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 (index.h("peculiar-button-menu", { class: "button_table_cell", groups: [
{
title: ssh_certificate.l10n.getString('previewCertificate'),
options: [
{
text: ssh_certificate.l10n.getString('viewDetails'),
startIcon: index.h(DetailsIcon, null),
onClick: () => this.handleClickDetails(certificate.body),
},
],
},
{
title: ssh_certificate.l10n.getString('downloadOptions'),
options: [
{
text: ssh_certificate.l10n.getString('download.pem'),
startIcon: index.h(download.DownloadIcon, null),
onClick: () => this.handleClickDownloadAsPem(certificate),
},
{
text: ssh_certificate.l10n.getString('download.der'),
startIcon: index.h(download.DownloadIcon, null),
onClick: () => this.handleClickDownloadAsDer(certificate),
},
],
},
...(isHasTestURLs
? [{
title: ssh_certificate.l10n.getString('testURLs'),
options: [
...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid)
? [{
text: ssh_certificate.l10n.getString('valid'),
href: certificate.tests.valid,
startIcon: index.h(LinkIcon, null),
}]
: []),
...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked)
? [{
text: ssh_certificate.l10n.getString('revoked'),
href: certificate.tests.revoked,
startIcon: index.h(LinkIcon, null),
}]
: []),
...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired)
? [{
text: ssh_certificate.l10n.getString('expired'),
href: certificate.tests.expired,
startIcon: index.h(LinkIcon, null),
}]
: []),
],
}]
: []),
] }));
}
renderExpandedRow(certificate) {
const colSpan = this.getMaxColSpanValue() - 2;
return (index.h("tr", { class: "expanded_summary" }, index.h("td", null), index.h("td", { colSpan: colSpan }, index.h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), index.h("td", null)));
}
renderCertificatesRows() {
const searchHighlight = this.highlightWithSearch
? this.search
: '';
const content = [];
this.certificatesDecoded.forEach((certificate, index$1) => {
const isExpandedRow = index$1 === this.expandedRow;
const publicKeyValue = ssh_certificate.OIDs[certificate.body.signature.algorithm]
|| certificate.body.signature.algorithm;
if (this.filterWithSearch && this.search) {
const certificateStringForSearch = [
publicKeyValue,
certificate.body.issuerCommonName,
this.getCertificateName(certificate),
certificate.body.thumbprints['SHA-1'],
]
.join(' ')
.toLowerCase();
if (certificateStringForSearch.indexOf(this.search.toLowerCase()) === -1) {
return;
}
}
if (this.mobileScreenView) {
content.push([
index.h("tr", { class: {
certificate_row: true,
m_expanded: isExpandedRow,
}, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h("table", null, index.h("tbody", null, !this.isHasRoots && (index.h("tr", null, index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "gray-9" }, ssh_certificate.l10n.getString('issuer'))), index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), index.h("tr", null, index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "gray-9" }, ssh_certificate.l10n.getString('name'))), index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, this.getCertificateName(certificate))))), index.h("tr", null, index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "gray-9" }, ssh_certificate.l10n.getString('publicKey'))), index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), index.h("tr", null, index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "gray-9" }, ssh_certificate.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("td", null, index.h(typography.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), index.h("tr", { class: "certificate_row_actions" }, index.h("td", null, this.renderCertificateButtonActions(certificate), index.h(button.Button, { startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null), onClick: this.handleClickRow.bind(this, index$1) }))))))),
]);
return;
}
content.push([
index.h("tr", { class: { m_expanded: isExpandedRow }, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h(button.Button, { startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null), class: "button_table_cell", onClick: this.handleClickRow.bind(this, index$1) })), !this.isHasRoots && (index.h("td", null, index.h(typography.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), index.h("td", null, index.h(typography.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, this.getCertificateName(certificate)))), index.h("td", null, index.h(typography.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), index.h("td", null, index.h(typography.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), index.h("td", null, this.renderCertificateButtonActions(certificate))),
isExpandedRow && this.renderExpandedRow(certificate.body),
]);
});
return content;
}
renderCertificateDetailsModal() {
if (!this.certificateSelectedForDetails) {
return null;
}
return (index.h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, index.h("div", { class: "modal_backdrop", "aria-hidden": "true", onClick: this.handleModalClose }), index.h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, index.h("header", { class: "modal_header" }, index.h(typography.Typography, { variant: "h4" }, ssh_certificate.l10n.getString('certificateDetails')), index.h(button.Button, { startIcon: index.h(CrossIcon, null), onClick: this.handleModalClose })), index.h("div", { class: "modal_content" }, index.h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails, mobileMediaQueryString: this.mobileMediaQueryString })))));
}
renderSearch() {
if (!this.filterWithSearch && !this.highlightWithSearch) {
return null;
}
return (index.h("div", { class: "search_section" }, index.h("input", { type: "search", value: "", class: "input_search t-b3 c-black", disabled: !this.certificatesDecoded.length, placeholder: "Search", onInput: this.handleSearch })));
}
renderEmptyState() {
const colSpan = this.getMaxColSpanValue();
return (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(typography.Typography, { variant: "b1" }, "There are no certificates available."))));
}
renderEmptySearchState() {
const colSpan = this.getMaxColSpanValue();
return (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(typography.Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
}
renderLoadingState() {
return (index.h("div", { class: "loading_container" }, index.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 (index.h(index.Host, { key: '894edb33a53c1128d812c2fd7a5b230a4b13493c', "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), index.h("table", { key: '998d37ab98be6743f1564fafb4ce9fc70b79e358' }, !this.mobileScreenView && (index.h("thead", { key: '4728e09450b6285cbc2f69cf0a0e06135910558f' }, index.h("tr", { key: '70bf5be60e50b9d7109e27128b661044778e0ded' }, index.h("th", { key: 'cf0fef5df1b42d0bce49d3bf0af2d91b82de6d05' }), !this.isHasRoots && (index.h("th", { key: '59f00d345883dfb3c81a97278583821543ce6808', class: "col_issuer" }, index.h(typography.Typography, { key: '54ce8fba1ab5355ac1f82ccc3aa62945351a3632', variant: "s2" }, ssh_certificate.l10n.getString('issuer')))), index.h("th", { key: '9aea7911edafca1482f31e2ca3316d2cde40fd78', class: "col_name" }, index.h(typography.Typography, { key: '2a0145b0cc56543ed4b5170a8773c3c43e5e64f9', variant: "s2" }, ssh_certificate.l10n.getString('name'))), index.h("th", { key: '9eab414d9b1558d6a5b9938f55165aeca5baa54e', class: "col_public_key" }, index.h(typography.Typography, { key: 'cbdcb1013bbf12ac88e63ca2d268c55854803297', variant: "s2" }, ssh_certificate.l10n.getString('publicKey'))), index.h("th", { key: '06adb89146693583a0dad86644b2c8b399e25c0e', class: "col_fingerprint" }, index.h(typography.Typography, { key: 'eca0440721f16953219f014edb8d3742f312f704', variant: "s2" }, ssh_certificate.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("th", { key: '56b7fdf83f5c45cf524a8cce81dbca584b9b5fa8' })))), index.h("tbody", { key: '01ccda1abfa846a8b0cdc00588b106398358ed88' }, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
}
static get watchers() { return {
"certificates": ["watchCertificates"]
}; }
};
CertificatesViewer.style = certificatesViewerCss();
exports.peculiar_certificates_viewer = CertificatesViewer;
//# sourceMappingURL=peculiar-certificates-viewer.entry.cjs.js.map