@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
48 lines (47 loc) • 2.93 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the BSD 3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/
import { h, } from "@stencil/core";
import { Typography } from "@peculiar/certificates-viewer";
import { getString } from "../../utils/l10n";
import { CertificateIcon, CertificatePrivateIcon } from "../icons";
import { FortifyButton } from "../fortify-button";
export const CertificatesListItem = (props) => {
const { certificate, provider, isSelected, onClickDetails, onClick, } = props;
const handleClickDetails = (event) => {
event.stopPropagation();
onClickDetails(certificate.index);
};
const handleClick = () => {
onClick(certificate.index);
};
const getCertificateName = () => {
const { G, CN, SN, E, } = certificate.subject;
// Return Common Name if present.
if (CN) {
return CN;
}
// Return Given Name + Surname if both present.
if (G && SN) {
return `${G} ${SN}`;
}
// Return Email if none of the above present
if (E) {
return E;
}
return certificate.subjectName;
};
const name = getCertificateName();
const Icon = certificate.privateKeyId ? CertificatePrivateIcon : CertificateIcon;
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
h("li", { role: "option", class: "certificates_list_item", "aria-selected": String(isSelected), onClick: handleClick }, h(Icon, { class: "certificates_list_item_icon" }), h("div", { class: "certificates_list_item_info" }, h("div", null, h(Typography, { variant: "s2", color: "black" }, name), h(Typography, { variant: "c1", color: "gray-9" }, provider === null || provider === void 0 ? void 0 : provider.name)), h("table", { class: "certificates_list_item_table" }, h("tbody", null, h("tr", null, h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.issuer'))), h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, certificate.issuer.CN))), h("tr", null, h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.valid'))), h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, new Date(certificate.notBefore).toLocaleDateString(), "\u00A0 \u2013 \u00A0", new Date(certificate.notAfter).toLocaleDateString()))), h("tr", null, h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, getString('certificate.serial'))), h("td", null, h(Typography, { variant: "c2", color: "gray-9" }, certificate.serialNumber)))))), h(FortifyButton, { class: "certificates_list_item_button", onClick: handleClickDetails }, getString('actions.details'))));
};
//# sourceMappingURL=certificates-list-item.js.map