Revize 81e73700

Re #8583 - Improved certificate listing

static/index.html

@@ -22 +22 @@
                     <th class="align-middle" scope="col" colspan="2">Validity</th>
                     <th class="align-middle" scope="col" rowspan="2">Usage</th>
                     <th class="align-middle" scope="col" rowspan="2">Certificate</th>
-                    <th class="align-middle" scope="col" rowspan="2">Trust chain</th>
-                    <th class="align-middle" scope="col" rowspan="2">Chain root</th>
+                    <th class="align-middle" scope="col" rowspan="2">Issuer</th>
                 </tr>
                 <tr>
                     <th scope="col">Start</th>

static/js/components.js

@@ -4 +4 @@
     // certificate = certificate to be displayed by the list item
     props: ["certificate"],
     template: "<tr>"+
-                "<td class='align-middle'>{{ certificate.CN }}</td>"+
+                "<td class='align-middle'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></td>"+
                 "<td class='align-middle'>{{ certificate.notBefore }}</td>"+
                 "<td class='align-middle'>{{ certificate.notAfter }}</td>"+
                 "<td class='align-middle'>" +
@@ -14 +14 @@
                 "   <div v-if='certificate.usage.SSL'>SSL/TLS</div>" +
                 "</td>"+
                 "<td class='align-middle'><button v-on:click='onCertificateDownload()'>Download certificate</button></td>"+
-                "<td class='align-middle'><button v-on:click='onCertificateChainDownload()'>Download chain of trust</button></td>"+
-                "<td class='align-middle'><button v-on:click='onCertificateRootDownload()'>Download chain root</button></td>"+
+                "<td v-if='certificate.issuer.id !== certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-bold'>{{ certificate.issuer.CN }}</a></td>"+
+                "<td v-if='certificate.issuer.id === certificate.id'  class='align-middle'><a :href='issuerURL' class='font-weight-light'>self-signed</a></td>"+
             "</tr>",
+    computed: {
+        certificateURL: function () {
+            return "/static/certificate.html?id=" + this.certificate.id;
+        },
+        issuerURL: function () {
+            return "/static/certificate.html?id=" + this.certificate.issuer.id;
+        }
+    },
     methods: {
         // Get the certificate PEM data from the server and downloads it to users computer
         onCertificateDownload: function () {

static/js/index.js

@@ -12 +12 @@
             if (params !== "") {
                 const urlParams = new URLSearchParams(params);
                 if (urlParams.get("success") != null) this.successMessage = urlParams.get("success");
+
+                const nextURL = '/static/index.html';
+                const nextTitle = 'X.509 Certificate Management';
+                const nextState = { additionalInformation: 'Updated the URL with JS' };
+
+                // This will create a new entry in the browser's history, without reloading
+                window.history.pushState(nextState, nextTitle, nextURL);
+
+                // This will replace the current entry in the browser's history, without reloading
+                window.history.replaceState(nextState, nextTitle, nextURL);
             }
         }
     });
@@ -21 +31 @@
         .then(function (response) {
             if (response.data["success"])
                 response.data["data"].forEach(item => certificateListingApp.certificates.push(item))
-            else
-                console.log("Error occured while loading certificate list") // TODO more action may be required
         })
         .catch(function (error) {
             console.log(error);