Revize e5640707

Re #8706 - Added status adn issuer details to certificate details view

static/certificate.html

@@ -35 +35 @@
             <div class="row">
                 <div class="col-xl-6">
                     <table class="ml-auto mr-auto mb-4">
+                        <tr>
+                            <td>Status:</td>
+                            <td class="pl-3">
+                                <h5><span class="badge badge-success" v-if="certificate.status == 'valid'">Valid</span></h5>
+                                <h5><span class="badge badge-warning" v-if="certificate.status == 'revoked'">Revoked</span></h5>
+                                <h5><span class="badge badge-danger" v-if="certificate.status == 'expired'">Expired</span></h5>
+                            </td>
+                        </tr>
                         <tr>
                             <div class="form-group">
                                 <td><label for="validity_start">Validity start:</label></td>
@@ -126 +134 @@
                                 <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
                             </td>
                         </tr>
+                        <tr>
+                            <td colspan="2" v-if="certificate.CA != id">
+                                <button v-on:click="onShowIssuer()" class="btn btn-outline-secondary btn-block mt-5" type="button">
+                                    <span v-if="!displayIssuer">Show issuer</span>
+                                    <span v-if="displayIssuer">Hide issuer</span>
+                                </button>
+                            </td>
+                        </tr>
+                        <div id="issuerCollapse">
+                            <tr v-if="displayIssuer">
+                                <td colspan="2"><h5 class="mt-2">Issuer</h5></td>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_C">Country Code:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_ST">Province/State:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_L">Locality:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_CN">Common Name:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_O">Organization:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_OU">Organization Unit:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <div class="form-group">
+                                    <td><label for="subject_emailAddress">Email Address:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="issuer.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr v-if="displayIssuer" >
+                                <td>Usage:</td>
+                                <td class="form-check">
+                                    <input class="form-check-input" v-model="issuer.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
+                                    <label class="form-check-label" for="isCA">CA</label><br>
+
+                                    <input class="form-check-input" v-model="issuer.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
+                                    <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
+
+                                    <input class="form-check-input" v-model="issuer.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
+                                    <label class="form-check-label" for="isAuthentication">Authentication</label><br>
+
+                                    <input class="form-check-input" v-model="issuer.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
+                                    <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
+                                </td>
+                            </tr>
+                        </div>
                     </table>
                 </div>
                 <div class="col-xl-5">

static/js/certificate.js

@@ -8 +8 @@
         loading: true,
         error: false,
         id: null,
+        displayIssuer: false,
+        issuerLoaded: false,
         revocationReason: "unspecified",
         issuedCertificates: [],
         certificate: {
@@ -29 +31 @@
                 SSL: false,
             },
             CA: null,
+            status: "",
+        },
+        issuer: {
+            subject: {
+                C: "",
+                ST: "",
+                L: "",
+                CN: "",
+                O: "",
+                OU: "",
+                emailAddress: "",
+            },
+            notBefore: "",
+            notAfter: "",
+            usage: {
+                CA: false,
+                authentication: false,
+                digitalSignature: false,
+                SSL: false,
+            },
+            CA: null,
+            status: "",
         },
         errorMessage: "",
         successMessage: "",
@@ -52 +76 @@
     },
     watch: {},
     methods: {
+        onShowIssuer: async function() {
+            this.displayIssuer = ~this.displayIssuer;
+            if (!this.issuerLoaded) {
+                // query certificate details
+                try {
+                    const response = await axios.get(API_URL + "certificates/" + this.certificate.CA + "/details");
+                    if (response.data["success"]) {
+                        // display certificate
+                        certificateDetailsApp.issuer = response.data["data"];
+                        this.issuerLoaded = true;
+                    } else {
+                        // certificate does not exists
+                        console.error("Required certificate does not exists");
+                        this.showError("Error occurred while loading issuer's details.");
+                    }
+                } catch (error) {
+                    console.error(error);
+                    this.showError("Error occurred while loading issuer's details.");
+                }
+            }
+        },
         onCertificateDownload: async function () {
             await onCertificateDownload(this.id);
         },