Certificate Signpost (Viewer)

The CertificateSignpostComponent, an Angular component, elegantly interprets a PEM string, showcasing the certificate's content with a click on the certificate icon. Seamlessly integrated with the Clarity Design System, this component boasts functionalities to exhibit crucial details such as the certificate's status, validity period, issuer information, and hash values.

PEM stands for Privacy Enhanced Mail. It's a file format that is often used to store cryptographic keys, certificates, and other secure data. PEM files typically have extensions like .pem, .crt, .cer, and .key. The data within a PEM file is usually encoded using Base64 encoding, which is a method of converting binary data into ASCII characters.

Examples

Example 1: Parsing Raw PEM

Parse and display a raw PEM certificate string:

import {CertificateSignpostComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [CertificateSignpostComponent],
  template: `<cll-certificate-signpost [pem]="pem1" />`
})
export class CertificateExampleComponent {
  pem1 = `-----BEGIN CERTIFICATE-----
MIIDljCCAn6gAwIBAgIQC5McOtY5Z+pnI7/Dr5r0SzANBgkqhkiG9w0BAQsFADBl
...
-----END CERTIFICATE-----`;
}

Click the certificate icon below to view the certificate details:

Click the certificate icon:

Valid

Example 2: Parsing PEM (Base64 Encoded)

At times, a PEM string is initially encoded in Base64 before being stored. In such scenarios, you can utilize the pemEncoded flag to signify that the PEM string requires decoding before parsing. Here's an example of a string that has been Base64 encoded using btoa(firstExamplePemString):

import {CertificateSignpostComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [CertificateSignpostComponent],
  template: `<cll-certificate-signpost [pem]="pem2" [pemEncoded]="true" position="right-top" />`
})
export class CertificateEncodedExampleComponent {
  pem1 = `-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----`;

  // Base64 encoded PEM string
  pem2 = btoa(this.pem1);
}

Click the certificate icon below to view the certificate details:

Click the certificate icon:

Valid

API Reference

CertificateSignpostComponent

Component for displaying certificate information in a Clarity signpost.

Inputs

pem: string
(Required) A string containing the PEM-encoded certificate. Can be raw PEM or Base64-encoded (when pemEncoded is true).
pemEncoded?: boolean
A boolean flag indicating whether the PEM string is Base64-encoded or not. Defaults to false. When true, the component will decode the string before parsing.
position?: string
Determines the positioning of the signpost content. The default is set to 'right-middle'. Available positions include: 'top-left', 'top-middle', 'top-right', 'right-top', 'right-middle', 'right-bottom', 'bottom-right', 'bottom-middle', 'bottom-left', 'left-bottom', 'left-middle', and 'left-top'.
showIcon?: boolean
A boolean value to manage the visibility of the certificate status icon. Defaults to true.