@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
217 lines (209 loc) • 18.2 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, Build, Host, transformTag } from '@stencil/core/internal/client';
import { l as l10n, o as dateShort, v as SshCertificate } from './ssh_certificate.js';
import { T as Typography } from './typography.js';
import { R as RowTitle, a as RowValue, g as getStringByOID, D as DownloadIcon } from './download.js';
import { B as Button } from './button.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 SshBasicInformation = (props) => {
const { serialNumber, validity, notBefore, notAfter, type, keyId, principals, extensions, criticalOptions, } = props;
return [
h(RowTitle, { value: l10n.getString('basicInformation') }),
h(RowValue, { name: l10n.getString('type'), value: type }),
h(RowValue, { name: l10n.getString('serialNumber'), value: serialNumber, monospace: true }),
h(RowValue, { name: l10n.getString('validity'), value: validity }),
h(RowValue, { name: l10n.getString('issued'), value: notBefore ? dateShort(notBefore) : undefined }),
h(RowValue, { name: l10n.getString('expired'), value: notAfter ? dateShort(notAfter) : undefined }),
h(RowValue, { name: l10n.getString('keyId'), value: keyId }),
h(RowValue, { name: l10n.getString('principals'), value: principals.join(', ') || '(none)' }),
h(RowValue, { name: l10n.getString('criticalOptions'), value: Object.keys(criticalOptions).join(', ') || '(none)' }),
h(RowValue, { name: l10n.getString('extensions'), value: Object.keys(extensions).join(', ') || '(none)' }),
];
};
/*!
* © 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 SshPublicKey = (props) => {
const { key } = props;
if (!key) {
return null;
}
return [
h(RowTitle, { value: l10n.getString('publicKeyInfo') }),
h(RowValue, { name: l10n.getString('algorithm'), value: getStringByOID(key.algorithm) }),
h(RowValue, { name: "Thumbprint (SHA-256)", value: key.thumbprint, monospace: true }),
h(RowValue, { name: l10n.getString('value'), value: key.value, monospace: true, collapse: true }),
];
};
/*!
* © 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 SshSignatureKey = (props) => {
const { key } = props;
if (!key) {
return null;
}
return [
h(RowTitle, { value: l10n.getString('signingCA') }),
h(RowValue, { name: l10n.getString('algorithm'), value: getStringByOID(key.algorithm) }),
h(RowValue, { name: "Thumbprint (SHA-256)", value: key.thumbprint, monospace: true }),
h(RowValue, { name: l10n.getString('value'), value: key.value, monospace: true, collapse: true }),
];
};
/*!
* © 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 SshMiscellaneous = (props) => {
const { certificate } = props;
return [
h(RowTitle, { value: l10n.getString('miscellaneous') }),
h("tr", null, h("td", null, h(Button, { startIcon: h(DownloadIcon, null), onClick: () => certificate.downloadAsPub() }, l10n.getString('download')))),
];
};
const certificateViewerCss = () => `*{-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%;position:relative;min-width:280px;min-height:300px;word-wrap:break-word;word-break:break-word;--pv-certificate-viewer-td-horizontal-padding:calc(var(--pv-size-base) * 4)}th,td{border:none}table{width:100%;border-spacing:0;border-collapse:collapse}table tr:last-child .divider{display:none}table td{padding:calc(var(--pv-size-base) * 2) var(--pv-certificate-viewer-td-horizontal-padding);vertical-align:top}table td:first-child{width:220px}table td:last-child{width:calc(100% - 220px)}table td.monospace{max-width:0}table td.divider{padding:calc(var(--pv-size-base) * 2) 0}table td.divider span{height:1px;display:block;background-color:var(--pv-color-gray-4)}table .title td{padding-top:calc(var(--pv-size-base) * 6);padding-bottom:calc(var(--pv-size-base) * 2)}table table{border-left:1px solid var(--pv-color-gray-5)}.status_wrapper{min-height:inherit;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([data-mobile-screen-view=true]) table,:host([data-mobile-screen-view=true]) tr,:host([data-mobile-screen-view=true]) td{display:block}:host([data-mobile-screen-view=true]) table tr{padding:calc(var(--pv-size-base) * 2) 0}:host([data-mobile-screen-view=true]) table tr.title{padding-top:calc(var(--pv-size-base) * 6)}:host([data-mobile-screen-view=true]) table tr.title td{padding:0 var(--pv-certificate-viewer-td-horizontal-padding)}:host([data-mobile-screen-view=true]) table td{padding:0 var(--pv-certificate-viewer-td-horizontal-padding);width:100% !important;max-width:100% !important}:host([data-mobile-screen-view=true]) table td.divider{padding:0}`;
const SshCertificateViewer = /*@__PURE__*/ proxyCustomElement(class SshCertificateViewer extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
/**
* 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.isDecodeInProcess = true;
}
handleMediaQueryChange(event) {
this.mobileScreenView = event.matches;
}
componentWillLoad() {
this.decodeCertificate(this.certificate);
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));
}
async decodeCertificate(certificate) {
this.isDecodeInProcess = true;
try {
if (certificate instanceof SshCertificate) {
this.certificateDecoded = certificate;
}
else if (typeof certificate === 'string') {
this.certificateDecoded = new SshCertificate(certificate);
}
else {
return;
}
// this.certificateDecoded.parseExtensions();
await this.certificateDecoded.parsePublicKey();
await this.certificateDecoded.parseSignatureKey();
}
catch (error) {
this.certificateDecodeError = error;
console.error('Error certificate parse:', error);
}
this.isDecodeInProcess = false;
}
/**
* Rerun decodeCertificate if previuos value not equal current value
*/
watchCertificateAndDecode(newValue, oldValue) {
if (typeof newValue === 'string' && typeof oldValue === 'string') {
if (newValue !== oldValue) {
this.decodeCertificate(newValue);
}
return;
}
if (newValue instanceof SshCertificate && oldValue instanceof SshCertificate) {
if (newValue.serialNumber !== oldValue.serialNumber) {
this.decodeCertificate(newValue);
}
}
}
renderErrorState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There was an error decoding this certificate.")));
}
renderEmptyState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no certificate available.")));
}
render() {
if (this.certificateDecodeError) {
return this.renderErrorState();
}
if (!this.certificateDecoded) {
return this.renderEmptyState();
}
return (h(Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, h("table", null, h(SshBasicInformation, Object.assign({}, this.certificateDecoded)), h(SshPublicKey, { key: this.certificateDecoded.publicKey }), h(SshSignatureKey, { key: this.certificateDecoded.signatureKey }), this.download && (h(SshMiscellaneous, { certificate: this.certificateDecoded })))));
}
static get watchers() { return {
"certificate": ["watchCertificateAndDecode"]
}; }
static get style() { return certificateViewerCss(); }
}, [257, "peculiar-ssh-certificate-viewer", {
"certificate": [513],
"download": [516],
"mobileMediaQueryString": [1, "mobile-media-query-string"],
"mobileScreenView": [32],
"isDecodeInProcess": [32]
}, undefined, {
"certificate": ["watchCertificateAndDecode"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-ssh-certificate-viewer"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-ssh-certificate-viewer":
if (!customElements.get(transformTag(tagName))) {
customElements.define(transformTag(tagName), SshCertificateViewer);
}
break;
} });
}
export { SshCertificateViewer as S, defineCustomElement as d };
//# sourceMappingURL=ssh-certificate-viewer.js.map
//# sourceMappingURL=ssh-certificate-viewer.js.map