@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
268 lines (261 loc) • 20.2 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { P as PemConverter, C as Convert_1, bt as SignedData, bu as EncapsulatedContent, c as OctetString, bv as CertificateSet, bw as CertificateChoices, b as AsnConvert, bi as Certificate, bx as ContentInfo, D as Download } from './certification_request.js';
import { X as X509Certificate, d as defineCustomElement$4 } from './certificate-viewer.js';
import { X as X509AttributeCertificate, d as defineCustomElement$6 } from './attribute-certificate-viewer.js';
import { P as Pkcs10CertificateRequest, d as defineCustomElement$2 } from './csr-viewer.js';
import { X as X509Crl, d as defineCustomElement$3 } from './crl-viewer.js';
import { i as id_data, a as id_signedData } from './object_identifiers.js';
import { B as Button } from './button.js';
import { T as Typography } from './typography.js';
import { d as defineCustomElement$5 } from './certificate-chain-viewer.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.
*/
/**
* Read file as Binary string
*
* @example
* ```js
* const file = new File(['file'], 'file.pdf', { type: 'text/plain' });
* readAsBinaryString(file)
* .then(result => console.log('Readed success', result))
* .catch(err => console.log('An error occured when reading file', err));
* ```
*/
function readAsBinaryString(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve({
value: reader.result,
fileName: file.name,
fileSize: file.size,
sourceMime: file.type,
});
reader.onerror = () => reject(reader.error);
reader.readAsBinaryString(file);
});
}
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
class X509Certificates extends Array {
constructor(raw) {
super();
const rawItems = PemConverter.isPem(raw)
? PemConverter.decode(raw).map((value) => Convert_1.ToBase64Url(value))
: raw.split(',');
if (rawItems.length < 2) {
throw new Error('Unable to parse string. The array of elements is less than 2');
}
// eslint-disable-next-line no-restricted-syntax
for (const item of rawItems) {
this.push(new X509Certificate(item));
}
}
get commonName() {
return Array.from(this)
.map((o) => o.commonName)
.join('_');
}
get raw() {
const signedData = new SignedData();
signedData.version = 1;
signedData.encapContentInfo.eContentType = id_data;
signedData.encapContentInfo.eContent = new EncapsulatedContent({
single: new OctetString(),
});
signedData.certificates = new CertificateSet(Array.from(this).map((o) => new CertificateChoices({
certificate: AsnConvert.parse(o.raw, Certificate),
})));
const cms = new ContentInfo({
contentType: id_signedData,
content: AsnConvert.serialize(signedData),
});
return AsnConvert.serialize(cms);
}
toString(format = 'pem') {
switch (format) {
case 'pem':
return Array.from(this)
.map((o) => o.toString('pem'))
.join('\n');
case 'base64url':
return Array.from(this)
.map((o) => o.toString('base64url'))
.join(',');
default:
return Array.from(this)
.map((o) => o.toString('base64'))
.join(',');
}
}
downloadAsPEM(name) {
Download.cert.asPEM(this.toString('pem'), name || this.commonName);
}
downloadAsDER(name) {
Download.cert.asDER(this.raw, name || this.commonName);
}
}
const certificateDecoderCss = "*{-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%}.textarea{min-height:300px;width:100%;border-radius:4px;border:1px solid var(--pv-color-gray-5);padding:14px;font-family:monospace;resize:vertical}.controls{margin-top:var(--pv-size-base-2);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-2);margin-bottom:var(--pv-size-base-12)}.control_row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--pv-size-base)}";
const PeculiarCertificateDecoderStyle0 = certificateDecoderCss;
const CertificateDecoder = /*@__PURE__*/ proxyCustomElement(class CertificateDecoder extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.successParse = createEvent(this, "successParse", 7);
this.clearCertificate = createEvent(this, "clearCertificate", 7);
this.handleClickDecode = () => {
const { value } = this.inputPaste;
if (value) {
this.decode(value);
}
};
this.handleClickClear = () => {
this.clearValue();
};
this.handleChangeInputFile = async (event) => {
const element = event.target;
if (element.files) {
const file = await readAsBinaryString(element.files[0]);
if (typeof file.value === 'string') {
this.decode(file.value);
}
element.value = '';
}
};
this.handleChangeExample = (event) => {
if (event.target.value) {
this.decode(event.target.value);
}
else {
this.clearValue();
}
};
this.handleDropFile = async (event) => {
event.stopPropagation();
event.preventDefault();
const element = event.dataTransfer;
if (element.files) {
const file = await readAsBinaryString(element.files[0]);
if (typeof file.value === 'string') {
this.decode(file.value);
}
}
};
this.certificateExamples = undefined;
this.certificateToDecode = undefined;
this.certificateDecoded = undefined;
}
componentDidLoad() {
if (this.certificateToDecode) {
/**
* Prevent Stencil warning about re-render
*/
setTimeout(() => this.decode(this.certificateToDecode), 100);
}
}
clearValue() {
this.inputPaste.value = '';
this.certificateDecoded = null;
this.clearCertificate.emit();
}
setValue(value) {
this.certificateDecoded = value;
this.inputPaste.value = value.toString('pem');
this.successParse.emit(value.toString('base64url'));
}
decode(value) {
new Promise((resolve) => {
resolve(new X509Certificates(value));
})
.catch(() => new X509Certificate(value))
.catch(() => new X509AttributeCertificate(value))
.catch(() => new Pkcs10CertificateRequest(value))
.catch(() => new X509Crl(value))
.then((res) => this.setValue(res))
.catch((error) => {
console.log(error);
alert(`Error decoding certificate:\n"${value}"\n\nPlease try to use Certificate/AttributeCertificate/CertificateRequest/CRL.`);
});
}
renderCertificate() {
if (this.certificateDecoded instanceof X509Certificates) {
return (h("peculiar-certificate-chain-viewer", { certificates: this.certificateDecoded, download: true }));
}
if (this.certificateDecoded instanceof X509Certificate) {
return (h("peculiar-certificate-viewer", { certificate: this.certificateDecoded, download: true }));
}
if (this.certificateDecoded instanceof X509AttributeCertificate) {
return (h("peculiar-attribute-certificate-viewer", { certificate: this.certificateDecoded, download: true }));
}
if (this.certificateDecoded instanceof Pkcs10CertificateRequest) {
return (h("peculiar-csr-viewer", { certificate: this.certificateDecoded, download: true }));
}
if (this.certificateDecoded instanceof X509Crl) {
return (h("peculiar-crl-viewer", { certificate: this.certificateDecoded, download: true }));
}
return null;
}
render() {
var _a;
return (h(Host, { key: '466ae73c347d305938c8b5f7a9ca0fcc8ec000eb' }, h("textarea", { key: '00d3552d847823c1e4e10162c5ac22de48062c47', placeholder: "Certificate DER or PEM", class: "textarea t-b2 c-black", ref: (el) => { this.inputPaste = el; }, onDrop: this.handleDropFile }), h("div", { key: '2b45a534e3db2d4c879efcc849f439d494ad5adc', class: "controls" }, h("div", { key: 'c78db2ec219c7417c10c8aa4b99e72e1fc16499d', class: "control_row" }, h(Typography, { key: '9e72c34b567870083b68fdaf082aae28f8899b24', variant: "b3", color: "secondary-tint-2" }, "Drag or load file:"), h("input", { key: '7069e5db2f0de85126b4fdcace19e181ab407a16', type: "file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl", onChange: this.handleChangeInputFile, value: "" })), ((_a = this.certificateExamples) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { key: 'e184a0864d8432e1f0aa26788e58f3c336abc598', class: "control_row" }, h(Typography, { key: '19e3213a14ef0b24bb110df7a4e943bf1f2a8ebf', variant: "b3", color: "secondary-tint-2" }, "Load examples:"), h("select", { key: '79082619d5d4bc82cf90afddf58ec58a5ae232b7', onChange: this.handleChangeExample }, h("option", { key: 'add23975d376914239389b621bd956bcd4fb52eb', value: "" }, "None"), this.certificateExamples.map((example) => (h("option", { value: example.value }, example.title)))))), h("div", { key: '876ccefd3125618d5c1e7c83e277349fa78da802', class: "control_row" }, h(Button, { key: 'bb890810c0895ba3fdcc22695e72cd8c2cf9645d', onClick: this.handleClickDecode }, "Decode"), h(Button, { key: 'dadc94b3e9e2e7211d993d99c127abfc8e593545', onClick: this.handleClickClear }, "Clear"))), this.renderCertificate()));
}
static get style() { return PeculiarCertificateDecoderStyle0; }
}, [1, "peculiar-certificate-decoder", {
"certificateExamples": [16],
"certificateToDecode": [1, "certificate-to-decode"],
"certificateDecoded": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-certificate-decoder", "peculiar-attribute-certificate-viewer", "peculiar-certificate-chain-viewer", "peculiar-certificate-viewer", "peculiar-crl-viewer", "peculiar-csr-viewer"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-certificate-decoder":
if (!customElements.get(tagName)) {
customElements.define(tagName, CertificateDecoder);
}
break;
case "peculiar-attribute-certificate-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "peculiar-certificate-chain-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "peculiar-certificate-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "peculiar-crl-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "peculiar-csr-viewer":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PeculiarCertificateDecoder = CertificateDecoder;
const defineCustomElement = defineCustomElement$1;
export { PeculiarCertificateDecoder, defineCustomElement };
//# sourceMappingURL=peculiar-certificate-decoder.js.map