update

static/index.html

@@ -56,7 +56,7 @@
           }
         }
         ]
-      */
+        */
     </script>
 
 
@@ -103,6 +103,9 @@
           </nav>
           <div class="verification" id="verification-output"></div>
           <div class="certificate" id="certificate-output">
+            <ul id="certificate-list">
+
+            </ul>
             <div class="details">
               <strong>Basic info</strong>
               <div>
@@ -179,24 +182,5 @@
       </div>
     </section>
   </body>
-  <script>
-    /*
-    function setCertificate(ind) {
-      const certificate = certificates[ind].transformed;
-  
-      console.log("certificate", certificate);
-      document.querySelector('.details .commonName').innerHTML = certificate.commonName;
-      document.querySelector('.details .organizationUnit').innerHTML = certificate.organizationUnit;
-      document.querySelector('.details .organization').innerHTML = certificate.organization;
-      document.querySelector('.details .country').innerHTML = certificate.country;
-      document.querySelector('.details .issued').innerHTML = certificate.issued;
-      document.querySelector('.details .expired').innerHTML = certificate.expired;
-      document.querySelector('.details .serialNumber').innerHTML = certificate.serialNumber;
-      document.querySelector('.details .modulus').innerHTML = certificate.modulus;
-  
-    }
   
-    setCertificate(0);
-    */
-  </script>
 </html>

static/script.js

@@ -13,6 +13,7 @@ const verificationDetails = document.querySelector(".verification-details");
 const parameters = document.querySelector(".parameters");
 const modelParam = document.querySelector(".parameters .model");
 const promptParam = document.querySelector(".parameters .prompt");
+const certificateList = document.getElementById("certificate-list");
 var certificates = [];
 
 [textGenInput, model].forEach((item) => {
@@ -121,20 +122,41 @@ function setCertificateOutput(manifestStore = null) {
     {
       der: certificate.der,
       name: certificate.subjectName,
-      decoded: new x509.X509Certificate(certificate.der)
+      decoded: new x509.X509Certificate(certificate.der),
     },
     ...certificate.chain.map((certificate) => ({
       der: certificate.der,
-      decoded: new x509.X509Certificate(certificate.der)
+      decoded: new x509.X509Certificate(certificate.der),
     })),
   ];
-  
+
   certificates.forEach((certificate) => {
     certificate.transformed = transformCert(certificate.decoded);
   });
 
   console.log("certificates", certificates);
 
+  certificateList.innerHTML = "";
+
+  certificates.forEach((certificate, index) => {
+    console.log("Add li..");
+    var li = document.createElement("li");
+    li.appendChild(document.createTextNode(certificate.transformed.commonName));
+
+    li.addEventListener("click", function (e) {
+      setCertificate(index);
+      const lis = document.querySelectorAll("#certificate-list li");
+
+      lis.forEach((element) => {
+        element.classList.remove("active");
+      });
+
+      this.classList.add("active");
+    });
+
+    certificateList.appendChild(li);
+  });
+
   setCertificate(0);
 }
 
@@ -167,20 +189,22 @@ function transformCert(certificate) {
     notAfter: expired,
     notBefore: issued,
     serialNumber,
-    publicKey: {algorithm: {name: algorithm, modulusLength: modulus}}
+    publicKey: {
+      algorithm: { name: algorithm, modulusLength: modulus },
+    },
   } = certificate;
 
   const response = {
-      commonName,
-      organizationUnit,
-      organization,
-      country,
-      issued,
-      expired,
-      serialNumber,
-      algorithm,
-      modulus
-  }
+    commonName,
+    organizationUnit,
+    organization,
+    country,
+    issued,
+    expired,
+    serialNumber,
+    algorithm,
+    modulus,
+  };
 
   console.log("response", response);
   return response;
@@ -206,13 +230,16 @@ function setCertificate(ind) {
   const certificate = certificates[ind].transformed;
 
   console.log("certificate", certificate);
-  document.querySelector('.details .commonName').innerHTML = certificate.commonName;
-  document.querySelector('.details .organizationUnit').innerHTML = certificate.organizationUnit;
-  document.querySelector('.details .organization').innerHTML = certificate.organization;
-  document.querySelector('.details .country').innerHTML = certificate.country;
-  document.querySelector('.details .issued').innerHTML = certificate.issued;
-  document.querySelector('.details .expired').innerHTML = certificate.expired;
-  document.querySelector('.details .serialNumber').innerHTML = certificate.serialNumber;
-  document.querySelector('.details .modulus').innerHTML = certificate.modulus;
-
-}
+  document.querySelector(".details .commonName").innerHTML =
+    certificate.commonName;
+  document.querySelector(".details .organizationUnit").innerHTML =
+    certificate.organizationUnit;
+  document.querySelector(".details .organization").innerHTML =
+    certificate.organization;
+  document.querySelector(".details .country").innerHTML = certificate.country;
+  document.querySelector(".details .issued").innerHTML = certificate.issued;
+  document.querySelector(".details .expired").innerHTML = certificate.expired;
+  document.querySelector(".details .serialNumber").innerHTML =
+    certificate.serialNumber;
+  document.querySelector(".details .modulus").innerHTML = certificate.modulus;
+}

static/style.css

@@ -188,4 +188,18 @@ section.verification-details .certificate .details div label {
   width: 200px;
   font-size: 12px;
   font-weight: 400;
-}
+}
+
+#certificate-list {
+  padding: 0;
+}
+
+#certificate-list li {
+  border: 1px solid #d8dfe5;
+  list-style: none;
+  padding: .5rem;
+}
+
+#certificate-list li.active {
+  background: #f7f9fa;
+}