@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
229 lines (224 loc) • 19.8 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
import { A as AsnData, by as CertificationRequest, P as PemConverter, bj as Name, bk as id_ecPublicKey, b as AsnConvert, bl as ECParameters, bm as id_rsaEncryption, bn as RSAPublicKey, C as Convert_1, bg as id_pkcs9_at_extensionRequest, D as Download } from './certification_request.js';
import { A as Attribute, a as Attributes } from './index2.js';
import { c as certificateRawToBuffer, g as getCertificateThumbprint, E as Extension, 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 { S as SubjectName, P as PublicKey } from './subject_name.js';
import { T as Typography } from './typography.js';
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
class Pkcs10CertificateRequest extends AsnData {
constructor(raw) {
super(certificateRawToBuffer(raw), CertificationRequest);
this.thumbprints = {};
this.type = 'PKCS#10 Certificate Request';
this.tag = PemConverter.CertificateRequestTag;
const { certificationRequestInfo } = this.asn;
this.subject = new Name(certificationRequestInfo.subject).toJSON();
this.version = certificationRequestInfo.version;
}
get publicKey() {
const { subjectPublicKey, algorithm } = this.asn.certificationRequestInfo.subjectPKInfo;
let params;
if (algorithm.algorithm === id_ecPublicKey && algorithm.parameters) {
params = AsnConvert.parse(algorithm.parameters, ECParameters);
}
if (algorithm.algorithm === id_rsaEncryption) {
params = AsnConvert.parse(subjectPublicKey, RSAPublicKey);
}
const spki = AsnConvert.serialize(this.asn.certificationRequestInfo.subjectPKInfo);
return {
params,
value: spki,
algorithm: algorithm.algorithm,
};
}
get signature() {
const { signature, signatureAlgorithm } = this.asn;
return {
value: signature,
algorithm: signatureAlgorithm.algorithm,
};
}
get commonName() {
if (!this.subject) {
return '';
}
for (let i = 0; i < this.subject.length; i += 1) {
const name = this.subject[i];
if (name.shortName === 'CN' || name.shortName === 'E' || name.shortName === 'O') {
return name.value;
}
}
return '';
}
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);
}
}
parseAttributes() {
const { certificationRequestInfo } = this.asn;
if (certificationRequestInfo.attributes) {
this.attributes = certificationRequestInfo.attributes
.map((e) => new Attribute(AsnConvert.serialize(e)));
const extensionRequestAttribute = this.attributes.find((attribute) => attribute.asn.type === id_pkcs9_at_extensionRequest);
if (extensionRequestAttribute) {
this.extensions = extensionRequestAttribute.value
.map((e) => new Extension(AsnConvert.serialize(e)));
}
}
}
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.csr.asPEM(this.toString('pem'), name || this.commonName);
}
downloadAsDER(name) {
Download.csr.asDER(this.raw, name || this.commonName);
}
}
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 PeculiarCsrViewerStyle0 = certificateViewerCss;
const CsrViewer = /*@__PURE__*/ proxyCustomElement(class CsrViewer extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
// eslint-disable-next-line class-methods-use-this
this.getAuthKeyIdParentLink = (value) => value;
// eslint-disable-next-line class-methods-use-this
this.getAuthKeyIdSiblingsLink = (value) => 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.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 Pkcs10CertificateRequest) {
this.certificateDecoded = certificate;
}
else if (typeof certificate === 'string') {
this.certificateDecoded = new Pkcs10CertificateRequest(certificate);
}
else {
return;
}
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 Pkcs10CertificateRequest
&& oldValue instanceof Pkcs10CertificateRequest) {
if (newValue.commonName !== oldValue.commonName) {
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 certificate request.")));
}
// eslint-disable-next-line class-methods-use-this
renderEmptyState() {
return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no certificate request 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(SubjectName, { name: this.certificateDecoded.subject }), h(PublicKey, { publicKey: this.certificateDecoded.publicKey }), 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, title: "Extension Request", 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 PeculiarCsrViewerStyle0; }
}, [1, "peculiar-csr-viewer", {
"certificate": [513],
"download": [4],
"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-csr-viewer"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-csr-viewer":
if (!customElements.get(tagName)) {
customElements.define(tagName, CsrViewer);
}
break;
} });
}
export { CsrViewer as C, Pkcs10CertificateRequest as P, defineCustomElement as d };
//# sourceMappingURL=csr-viewer.js.map