@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
218 lines (212 loc) • 18.5 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BA3hMeq-.js';
import { P as PemConverter, b as buildExports, S as SignedData, l as EncapsulatedContent, O as OctetString, m as CertificateSet, n as CertificateChoices, a as AsnConvert, C as Certificate, o as ContentInfo, D as Download, p as SshCertificate } from './ssh_certificate-CDwMJyak.js';
import { X as X509Certificate } from './x509_certificate-pTmrnePc.js';
import { X as X509AttributeCertificate, P as Pkcs10CertificateRequest, a as X509Crl } from './x509_crl-Dw1H8DAG.js';
import { i as id_data, a as id_signedData } from './object_identifiers-CvvoEL7F.js';
import { B as Button } from './button-Dh0mVZGn.js';
import { T as Typography } from './typography-BgpGT7g-.js';
import './utils-Bx6Iov6q.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) => buildExports.Convert.ToBase64Url(value))
: raw.split(',');
if (rawItems.length < 2) {
throw new Error('Unable to parse string. The array of elements is less than 2');
}
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: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%}.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:calc(var(--pv-size-base) * 2);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:calc(var(--pv-size-base) * 2);margin-bottom:calc(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 CertificateDecoder = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.successParse = createEvent(this, "successParse");
this.clearCertificate = createEvent(this, "clearCertificate");
this.handleClickDecode = () => {
const { value } = this.inputPaste;
if (value) {
this.decode(value);
}
};
this.handleClickClear = () => {
this.clearValue();
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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 = '';
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.handleChangeExample = (event) => {
if (event.target.value) {
this.decode(event.target.value);
}
else {
this.clearValue();
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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);
}
}
};
}
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();
}
async setValue(value) {
this.certificateDecoded = value;
this.inputPaste.value = await value.toString('pem');
this.successParse.emit(await value.toString('base64url'));
}
async 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))
.catch(() => new SshCertificate(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 }));
}
if (this.certificateDecoded instanceof SshCertificate) {
return (h("peculiar-ssh-certificate-viewer", { certificate: this.certificateDecoded, download: true }));
}
return null;
}
render() {
var _a;
return (h(Host, { key: '9067f2d7f33a40b3ad0ba03c7338a6f800100dab' }, h("textarea", { key: '9e8962631c259fd5e144a1397d8591dde46d032f', placeholder: "Certificate DER or PEM", class: "textarea t-b2 c-black", ref: (el) => { this.inputPaste = el; }, onDrop: this.handleDropFile }), h("div", { key: '9be2b1e6c9b3de94c9d5e1e6cf31d9fb487960d8', class: "controls" }, h("div", { key: '3959b89ab5c5654a3c10a1166743c056c0340e2e', class: "control_row" }, h(Typography, { key: '3c03f42d14ff5a485264523bab40765bb4f89a8f', variant: "b3", color: "secondary-tint-2" }, "Drag or load file:"), h("input", { key: '29845cfd11955ded4b43d19be3ede89d77b71fef', type: "file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl,.pub", value: "", onChange: this.handleChangeInputFile })), ((_a = this.certificateExamples) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { key: 'ec2e21cdcda421bd046d42607569e90eb0a96589', class: "control_row" }, h(Typography, { key: '17850c755e70545949be4f772ec67f02eae829af', variant: "b3", color: "secondary-tint-2" }, "Load examples:"), h("select", { key: '4431af8f0dcc97fd8e26637cef8a9524a83e9519', onChange: this.handleChangeExample }, h("option", { key: 'c08edb4c2faf0f640e100cf62ae7ad07f0714cc3', value: "" }, "None"), this.certificateExamples.map((example) => (h("option", { value: example.value }, example.title)))))), h("div", { key: 'e7f7a693ef5f72ce739fe6a42d8c87345d23a743', class: "control_row" }, h(Button, { key: '7448517bf7f76af06f8a7f60d1e40360613d3acd', onClick: this.handleClickDecode }, "Decode"), h(Button, { key: 'b831592de27a3b292b2d81a19400216fbce7e797', onClick: this.handleClickClear }, "Clear"))), this.renderCertificate()));
}
};
CertificateDecoder.style = certificateDecoderCss();
export { CertificateDecoder as peculiar_certificate_decoder };
//# sourceMappingURL=peculiar-certificate-decoder.entry.js.map