@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
266 lines (259 loc) • 21.5 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
import { A as AsnData, a as AttributeCertificate, P as PemConverter, C as Convert_1, d as dateDiff, b as AsnConvert, D as Download, l as l10n } from './certification_request.js';
import { c as certificateRawToBuffer, E as Extension, g as getCertificateThumbprint, R as RowTitle, G as GeneralNamePart, a as RowValue, T as TableRowTable, b as getStringByOID, B as BasicInformation, S as Signature, d as Thumbprints, e as getLEILink, f as getDNSNameLink, h as getIPAddressLink, i as Extensions, M as Miscellaneous } from './miscellaneous.js';
import { A as Attribute, a as Attributes } from './index2.js';
import { T as Typography } from './typography.js';
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
class X509AttributeCertificate extends AsnData {
constructor(raw) {
var _a;
super(certificateRawToBuffer(raw), AttributeCertificate);
this.thumbprints = {};
this.type = 'X.509 Attribute Certificate';
this.tag = PemConverter.AttributeCertificateTag;
const { acinfo } = this.asn;
this.serialNumber = Convert_1.ToHex(acinfo.serialNumber);
this.version = acinfo.version;
const notBefore = acinfo.attrCertValidityPeriod.notBeforeTime;
if (!notBefore) {
throw new Error("Cannot get 'notBefore' value");
}
this.notBefore = notBefore;
const notAfter = acinfo.attrCertValidityPeriod.notAfterTime;
if (!notAfter) {
throw new Error("Cannot get 'notAfter' value");
}
this.notAfter = notAfter;
this.validity = dateDiff(this.notBefore, this.notAfter);
this.issuer = acinfo.issuer.v1Form || ((_a = acinfo.issuer.v2Form) === null || _a === void 0 ? void 0 : _a.issuerName);
this.holder = acinfo.holder;
}
get signature() {
const { signatureValue, signatureAlgorithm } = this.asn;
return {
value: signatureValue,
algorithm: signatureAlgorithm.algorithm,
};
}
parseExtensions() {
const { acinfo } = this.asn;
if (acinfo.extensions) {
this.extensions = acinfo.extensions
.map((e) => new Extension(AsnConvert.serialize(e)));
}
}
parseAttributes() {
const { acinfo } = this.asn;
if (acinfo.attributes) {
this.attributes = acinfo.attributes
.map((e) => new Attribute(AsnConvert.serialize(e)));
}
}
async getThumbprint(algorithm = 'SHA-1') {
try {
const thumbprint = await getCertificateThumbprint(algorithm, this.raw);
if (thumbprint) {
this.thumbprints[algorithm] = Convert_1.ToHex(thumbprint);
}
}
catch (error) {
console.error('Error thumbprint get:', error);
}
}
get commonName() {
return `attribute-certificate-${this.thumbprints['SHA-1']}`;
}
toString(format = 'pem') {
switch (format) {
case 'pem':
return PemConverter.encode(this.raw, this.tag);
case 'base64url':
return Convert_1.ToBase64Url(this.raw);
default:
return Convert_1.ToBase64(this.raw);
}
}
downloadAsPEM(name) {
Download.attrCert.asPEM(this.toString('pem'), name || this.commonName);
}
downloadAsDER(name) {
Download.attrCert.asDER(this.raw, name || this.commonName);
}
}
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const Holder = (props) => {
const { holder } = props;
if (!holder) {
return null;
}
const { baseCertificateID, objectDigestInfo } = holder;
return [
h(RowTitle, { value: l10n.getString('holder') }),
baseCertificateID && ([
baseCertificateID.issuer.map((item) => (h(GeneralNamePart, { generalName: item, getDNSNameLink: () => '', getIPAddressLink: () => '' }))),
h("tr", null, h("td", null), h("td", null)),
h(RowValue, { name: l10n.getString('serialNumber'), value: Convert_1.ToHex(baseCertificateID.serial), monospace: true }),
h("tr", null, h("td", null), h("td", null)),
]),
objectDigestInfo && ([
h(RowValue, { name: l10n.getString('digestInfo'), value: "" }),
h(TableRowTable, null, h(RowValue, { name: l10n.getString('algorithm'), value: getStringByOID(objectDigestInfo.digestAlgorithm.algorithm) }), h(RowValue, { name: l10n.getString('value'), value: Convert_1.ToHex(objectDigestInfo.objectDigest), monospace: true }), h(RowValue, { name: l10n.getString('type'), value: objectDigestInfo.digestedObjectType })),
]),
];
};
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const Issuer = (props) => {
const { issuer } = props;
if (!issuer) {
return null;
}
return [
h(RowTitle, { value: l10n.getString('issuer') }),
issuer.map((item) => (h(GeneralNamePart, { generalName: item, getDNSNameLink: () => '', getIPAddressLink: () => '' }))),
];
};
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: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%;position:relative;min-width:280px;min-height:300px;word-wrap:break-word;word-break:break-word}th,td{border:none}table{width:100%;border-spacing:0;border-collapse:collapse}table td{padding:var(--pv-size-base-2) var(--pv-size-base-4);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: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:var(--pv-size-base-6);padding-bottom: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:var(--pv-size-base-2) 0}:host([data-mobile-screen-view=true]) table tr.title{padding-top:var(--pv-size-base-6)}:host([data-mobile-screen-view=true]) table tr.title td{padding:0 var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) table td{padding:0 var(--pv-size-base-4);width:100% !important;max-width:100% !important}:host([data-mobile-screen-view=true]) table td.divider{padding:0}";
const PeculiarAttributeCertificateViewerStyle0 = certificateViewerCss;
const AttributeCertificateViewer = /*@__PURE__*/ proxyCustomElement(class AttributeCertificateViewer extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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);
};
this.getSubjectKeyIdChildrenLink = (value) => {
var _a;
return (_a = this.subjectKeyIdChildrenLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
};
this.getSubjectKeyIdSiblingsLink = (value) => {
var _a;
return (_a = this.subjectKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
};
this.certificate = undefined;
this.download = undefined;
this.authKeyIdParentLink = undefined;
this.authKeyIdSiblingsLink = undefined;
this.subjectKeyIdChildrenLink = undefined;
this.subjectKeyIdSiblingsLink = undefined;
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 X509AttributeCertificate) {
this.certificateDecoded = certificate;
}
else if (typeof certificate === 'string') {
this.certificateDecoded = new X509AttributeCertificate(certificate);
}
else {
return;
}
this.certificateDecoded.parseExtensions();
this.certificateDecoded.parseAttributes();
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;
}
/**
* 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 X509AttributeCertificate
&& oldValue instanceof X509AttributeCertificate) {
if (newValue.serialNumber !== oldValue.serialNumber) {
this.decodeCertificate(newValue);
}
}
}
// eslint-disable-next-line class-methods-use-this
renderErrorState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There was an error decoding this attribute certificate.")));
}
// eslint-disable-next-line class-methods-use-this
renderEmptyState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no attribute 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(BasicInformation, Object.assign({}, this.certificateDecoded)), h(Issuer, { issuer: this.certificateDecoded.issuer }), h(Holder, { holder: this.certificateDecoded.holder }), h(Signature, { signature: this.certificateDecoded.signature }), h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }), h(Attributes, { attributes: this.certificateDecoded.attributes, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink, getSubjectKeyIdChildrenLink: this.getSubjectKeyIdChildrenLink, getSubjectKeyIdSiblingsLink: this.getSubjectKeyIdSiblingsLink }), h(Extensions, { extensions: this.certificateDecoded.extensions, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink, getSubjectKeyIdChildrenLink: this.getSubjectKeyIdChildrenLink, getSubjectKeyIdSiblingsLink: this.getSubjectKeyIdSiblingsLink }), this.download && (h(Miscellaneous, { certificate: this.certificateDecoded })))));
}
static get watchers() { return {
"certificate": ["watchCertificateAndDecode"]
}; }
static get style() { return PeculiarAttributeCertificateViewerStyle0; }
}, [1, "peculiar-attribute-certificate-viewer", {
"certificate": [1],
"download": [4],
"authKeyIdParentLink": [513, "auth-key-id-parent-link"],
"authKeyIdSiblingsLink": [513, "auth-key-id-siblings-link"],
"subjectKeyIdChildrenLink": [513, "subject-key-id-children-link"],
"subjectKeyIdSiblingsLink": [513, "subject-key-id-siblings-link"],
"mobileMediaQueryString": [1, "mobile-media-query-string"],
"mobileScreenView": [32],
"isDecodeInProcess": [32]
}, undefined, {
"certificate": ["watchCertificateAndDecode"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-attribute-certificate-viewer"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-attribute-certificate-viewer":
if (!customElements.get(tagName)) {
customElements.define(tagName, AttributeCertificateViewer);
}
break;
} });
}
export { AttributeCertificateViewer as A, X509AttributeCertificate as X, defineCustomElement as d };
//# sourceMappingURL=attribute-certificate-viewer.js.map