@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
272 lines (266 loc) • 21.7 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, Build, Host, transformTag } from '@stencil/core/internal/client';
import { A as AsnData, n as CertificateList, P as PemConverter, N as Name, a as AsnConvert, b as buildExports, D as Download, l as l10n, o as dateShort, p as CRLReason, I as InvalidityDate, q as CertificateIssuer } from './ssh_certificate.js';
import { c as certificateRawToBuffer, E as Extension, g as getCertificateThumbprint, G as GeneralNamePart, B as BasicInformation, S as Signature, T as Thumbprints, e as Extensions, a as getIPAddressLink, b as getDNSNameLink, d as getLEILink, M as Miscellaneous } from './miscellaneous.js';
import { T as Typography } from './typography.js';
import { I as IssuerName } from './issuer_name.js';
import { R as RowTitle, a as RowValue, T as TableRowTable, g as getStringByOID } from './download.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.
*/
class X509Crl extends AsnData {
constructor(raw) {
super(certificateRawToBuffer(raw), CertificateList);
this.thumbprints = {};
this.type = 'X.509 Certificate Revocation List';
this.tag = PemConverter.CrlTag;
const { tbsCertList } = this.asn;
this.issuer = new Name(tbsCertList.issuer).toJSON();
this.version = tbsCertList.version + 1;
this.lastUpdate = tbsCertList.thisUpdate.getTime();
this.nextUpdate = tbsCertList.nextUpdate.getTime();
this.revokedCertificates = (tbsCertList.revokedCertificates || [])
.map((revokedCertificate) => {
var _a;
return ({
revocationDate: revokedCertificate.revocationDate,
userCertificate: revokedCertificate.userCertificate,
crlEntryExtensions: (_a = revokedCertificate.crlEntryExtensions) === null || _a === void 0 ? void 0 : _a.map((e) => new Extension(AsnConvert.serialize(e))),
});
});
}
async getThumbprint(algorithm = 'SHA-1') {
try {
const thumbprint = await getCertificateThumbprint(algorithm, this.raw);
if (thumbprint) {
this.thumbprints[algorithm] = buildExports.Convert.ToHex(thumbprint);
}
}
catch (error) {
console.error('Error thumbprint get:', error);
}
}
get signature() {
const { signature, signatureAlgorithm } = this.asn;
return {
value: signature,
algorithm: signatureAlgorithm.algorithm,
};
}
get commonName() {
if (!this.issuer) {
return '';
}
for (let i = 0; i < this.issuer.length; i += 1) {
const name = this.issuer[i];
if (name.shortName === 'CN' || name.shortName === 'E' || name.shortName === 'O') {
return name.value;
}
}
return '';
}
parseExtensions() {
const { tbsCertList } = this.asn;
if (tbsCertList.crlExtensions) {
this.extensions = tbsCertList.crlExtensions
.map((e) => new Extension(AsnConvert.serialize(e)));
}
}
toString(format = 'pem') {
switch (format) {
case 'pem':
return PemConverter.encode(this.raw, this.tag);
case 'base64url':
return buildExports.Convert.ToBase64Url(this.raw);
default:
return buildExports.Convert.ToBase64(this.raw);
}
}
downloadAsPEM(name) {
Download.crl.asPEM(this.toString('pem'), name || this.commonName);
}
downloadAsDER(name) {
Download.crl.asDER(this.raw, name || this.commonName);
}
}
/*!
* © 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 RevokedCertificates = (props) => {
const { revokedCertificates, getDNSNameLink, getIPAddressLink, } = props;
if (!revokedCertificates || !revokedCertificates.length) {
return null;
}
return [
h(RowTitle, { value: l10n.getString('revokedCertificates') }),
revokedCertificates.map((certificate) => ([
h(RowValue, { name: l10n.getString('serialNumber'), value: buildExports.Convert.ToHex(certificate.userCertificate), monospace: true }),
h(RowValue, { name: l10n.getString('revocationDate'), value: dateShort(certificate.revocationDate.getTime()) }),
(certificate.crlEntryExtensions && certificate.crlEntryExtensions.length && ([
h(RowValue, { name: `${l10n.getString('crlEntryExtensions')}:`, value: "" }),
h(TableRowTable, null, certificate.crlEntryExtensions.map((extension) => {
if (extension.value instanceof CRLReason) {
return (h(RowValue, { name: getStringByOID(extension.asn.extnID), value: extension.value.toJSON() || extension.value.reason }));
}
if (extension.value instanceof InvalidityDate) {
return (h(RowValue, { name: getStringByOID(extension.asn.extnID), value: extension.value.value.getTime() }));
}
if (extension.value instanceof CertificateIssuer && extension.value.length) {
return ([
h(RowValue, { name: `${getStringByOID(extension.asn.extnID)}:`, value: "" }),
extension.value.map((gn) => (h(TableRowTable, null, h(GeneralNamePart, { generalName: gn, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink })))),
]);
}
return (h(RowValue, { name: getStringByOID(extension.asn.extnID), value: buildExports.Convert.ToHex(extension.asn.extnValue), monospace: true }));
})),
])),
h("tr", null, h("td", { colSpan: 2, class: "divider" }, h("span", null))),
])),
];
};
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 CrlViewer = /*@__PURE__*/ proxyCustomElement(class CrlViewer 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;
this.getAuthKeyIdParentLink = (value) => {
var _a;
return (_a = this.authKeyIdParentLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
};
this.getAuthKeyIdSiblingsLink = (value) => {
var _a;
return (_a = this.authKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
};
}
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 X509Crl) {
this.certificateDecoded = certificate;
}
else if (typeof certificate === 'string') {
this.certificateDecoded = new X509Crl(certificate);
}
else {
return;
}
this.certificateDecoded.parseExtensions();
await this.certificateDecoded.getThumbprint('SHA-1');
await this.certificateDecoded.getThumbprint('SHA-256');
}
catch (error) {
this.certificateDecodeError = error;
console.error('Error certificate parse:', error);
}
this.isDecodeInProcess = false;
}
getIssuerDnLink() {
return this.issuerDnLink;
}
/**
* 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 X509Crl
&& oldValue instanceof X509Crl) {
if (newValue.commonName !== oldValue.commonName) {
this.decodeCertificate(newValue);
}
}
}
renderErrorState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There was an error decoding this certificate revocation list.")));
}
renderEmptyState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no certificate revocation list 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(BasicInformation, Object.assign({}, this.certificateDecoded)), h(IssuerName, { name: this.certificateDecoded.issuer, issuerDnLink: this.getIssuerDnLink() }), h(Signature, { signature: this.certificateDecoded.signature }), h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }), h(Extensions, { extensions: this.certificateDecoded.extensions, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink }), h(RevokedCertificates, { revokedCertificates: this.certificateDecoded.revokedCertificates, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink }), this.download && (h(Miscellaneous, { certificate: this.certificateDecoded })))));
}
static get watchers() { return {
"certificate": ["watchCertificateAndDecode"]
}; }
static get style() { return certificateViewerCss(); }
}, [257, "peculiar-crl-viewer", {
"certificate": [513],
"download": [4],
"authKeyIdParentLink": [513, "auth-key-id-parent-link"],
"authKeyIdSiblingsLink": [513, "auth-key-id-siblings-link"],
"issuerDnLink": [513, "issuer-dn-link"],
"mobileMediaQueryString": [1, "mobile-media-query-string"],
"mobileScreenView": [32],
"isDecodeInProcess": [32]
}, undefined, {
"certificate": ["watchCertificateAndDecode"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-crl-viewer"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-crl-viewer":
if (!customElements.get(transformTag(tagName))) {
customElements.define(transformTag(tagName), CrlViewer);
}
break;
} });
}
export { CrlViewer as C, X509Crl as X, defineCustomElement as d };
//# sourceMappingURL=crl-viewer.js.map
//# sourceMappingURL=crl-viewer.js.map