Fix certificate name (label)

src/components/certificates-list/CertificatesList.tsx

@@ -22,7 +22,10 @@ import { CertificateName } from "../certificate-name";
 import { CertificateSerialNumber } from "../certificate-serial-number";
 import { downloadCertificate } from "../../utils/download-certificate";
 import { CopyIconButton } from "../copy-icon-button";
-import { certificateRawToPem } from "../../utils/certificate";
+import {
+  certificateRawToPem,
+  getCertificateName,
+} from "../../utils/certificate";
 import { SortButton } from "../sort-button";
 
 import { CertificateProps } from "../../types";
@@ -184,9 +187,11 @@ export const CertificatesList: React.FunctionComponent<
                   <TableCell>
                     <CertificateTypeLabel type={type} />
                   </TableCell>
-                  {/* // TODO: not sure about label as name */}
                   <TableCell>
-                    <CertificateName highlight={highlightedText} name={label} />
+                    <CertificateName
+                      highlight={highlightedText}
+                      name={getCertificateName(certificate)}
+                    />
                   </TableCell>
                   <TableCell>
                     <CertificateSerialNumber value={serialNumber} />

src/types.ts

@@ -15,6 +15,8 @@ export interface CertificateSubjectProps {
   L?: string;
   ST?: string;
   C?: string;
+  G?: string;
+  SN?: string;
 }
 
 export type CertificateAlgorithmProps = {

src/utils/certificate.ts

@@ -1,6 +1,10 @@
 import { Pkcs10CertificateRequest, X509Certificate } from "@peculiar/x509";
 
-import { CertificateSubjectProps, CertificateType } from "../types";
+import {
+  CertificateProps,
+  CertificateSubjectProps,
+  CertificateType,
+} from "../types";
 
 export function certificateRawToPem(raw: ArrayBuffer, type: CertificateType) {
   let pem;
@@ -33,3 +37,25 @@ export function certificateSubjectToString(
 
   return parts.join(", ");
 }
+
+export function getCertificateName(certificate: CertificateProps) {
+  const { G, CN, SN, E } =
+    certificate.subject as unknown as CertificateSubjectProps;
+
+  // 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;
+}