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.

Usage

position: Determines the positioning of the signpost content. The default is set to right-middle, with various other positions available, including 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: A boolean value to manage the visibility of the certificate status icon, set to true by default.
pemEncoded: A boolean flag indicating whether the PEM string is encoded or not, with a default value of false.
pem: A string containing the PEM-encoded certificate.

Example 1: Parsing Raw PEM

Let's say you want to parse the following PEM and display the certificate signpost.

Click the certificate icon:

Valid

import {CertificateSignpostComponent} from 'clr-lift';

@Component({
  standalone: true,
  imports: [CertificateSignpostComponent],
  template: `<cll-certificate-signpost [pem]="pem1" />`
})
export class CertificateDemoComponent {}

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):

LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSURsakNDQW42Z0F3SUJBZ0lRQzVNY090WTVaK3BuSTcvRHI1cjBTekFOQmdrcWhraUc5dzBCQVFzRkFEQmwKTVFzd0NRWURWUVFHRXdKVlV6RVZNQk1HQTFVRUNoTU1SR2xuYVVObGNuUWdTVzVqTVJrd0Z3WURWUVFMRXhCMwpkM2N1WkdsbmFXTmxjblF1WTI5dE1TUXdJZ1lEVlFRREV4dEVhV2RwUTJWeWRDQkJjM04xY21Wa0lFbEVJRkp2CmIzUWdSekl3SGhjTk1UTXdPREF4TVRJd01EQXdXaGNOTXpnd01URTFNVEl3TURBd1dqQmxNUXN3Q1FZRFZRUUcKRXdKVlV6RVZNQk1HQTFVRUNoTU1SR2xuYVVObGNuUWdTVzVqTVJrd0Z3WURWUVFMRXhCM2QzY3VaR2xuYVdObApjblF1WTI5dE1TUXdJZ1lEVlFRREV4dEVhV2RwUTJWeWRDQkJjM04xY21Wa0lFbEVJRkp2YjNRZ1J6SXdnZ0VpCk1BMEdDU3FHU0liM0RRRUJBUVVBQTRJQkR3QXdnZ0VLQW9JQkFRRFo1eWd2VWo4MmNrbUlrelR6K0dvZU1WU0EKbjYxVVFiVkgzNWFvMUsrQUxia0t6M1g5aWFWOUpQcmpJZ3dydkpVWEN6Ty9HVTFCQnBBQXZReE5FUDRIdGVjYwpiaUpWTVdXWHZkTVgwaDVpODl2cWJGQ01QNFFNbHMrM3l3UGd5bTJoRkV3YmlkM3RBTEJTZksrUmJMRTRFOUhwCkVnakFBTEFjS3hIYWQzQTJtNjdPZVlmY2duRG1DWFJ3Vldtdm8yaWZ2OTIyZWJQeW5YQXBWZlNyLzVWaDg4bEEKYngzUnZwTzcwNGdxdTUyL2NscFdjVHMvMVBQUkN2NG83NlB1MlptdkE5T1BZTGZ5a3FHeHZZbUpIekROdzZZdQpZak91RmdKM1JGcm5nUW84cDBRdWViZy9CTHhjb0lmaEc2OVJqczNzTFByNC9tM3dPbnlxaStSbmxUR05BZ01CCkFBR2pRakJBTUE4R0ExVWRFd0VCL3dRRk1BTUJBZjh3RGdZRFZSMFBBUUgvQkFRREFnR0dNQjBHQTFVZERnUVcKQkJUT3cwcTVtVlh5dU50Z3Y2bCt2VmExbHphbjFqQU5CZ2txaGtpRzl3MEJBUXNGQUFPQ0FRRUF5cVZWak9QSQpRVzVwSjZkMUVlODhoalp2MHAzR2VEZ2RhWmFpa21rdU9HeWJmUVRVaWFXeE1UZUt5U0hNcTJ6Tml4eWExcjlJCjBqSm13WXJBOHk4Njc4RGoxSkdHMFZEakE5dHpkMjlLT1ZQdDNpYkh0WDJ2SzBMUmRXTGpTaXNDeDFCTDRHbmkKbG13T1JHWVFSSSt0QmV2NGVheW1HK2czTkoxVHlXR3FvbEt2U25BV2hzSTZ5TEVUY0RiWXorNzBDalRWVzB6OQpCNXlpdXRrQmNsenpUY0hkRHJFY0RjUmp2cTMwRlB1SjdLSkJEa3pNeUZkQTBHNERxczBNam9tWm1XendQREN2Ck9OOXZ2S08rS1NBbnEzVC9FeUo0M3BkU1ZSNkR0VlFnQSs2dXdFOVczamZNdzMrcUJDZTcwM2U0WXRzWGZKd28KSWhOemJNOG05WW9wNXc9PQotLS0tLUVORCBDRVJUSUZJQ0FURS0tLS0t

Click the certificate icon:

Valid

import {CertificateSignpostComponent} from 'clr-lift';

@Component({
  standalone: true,
  imports: [CertificateSignpostComponent],
  template: `<cll-certificate-signpost [pem]="pem2" [pemEncoded]="true" position="left-top" />`
})
export class CertificateDemoComponent {}