Revize 7a423499

Re #8583 - Details page subject data

static/certificate.html

@@ -12 +12 @@
             <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1>
             <span class="ml-2 mb-2">
                 <div>
-                    <a class="btn btn-success ml-2 mb-3" href="">Download Certificate</a>
-                    <a class="btn btn-success ml-2 mb-3" href="">Download Root Certificate</a>
-                    <a class="btn btn-success ml-2 mb-3" href="">Download Chain of Trust</a>
+                    <a class="btn btn-success ml-2 mb-3" v-on:click="onCertificateDownload()">Download Certificate</a>
+                    <a class="btn btn-success ml-2 mb-3" v-on:click="onRootDownload()">Download Root Certificate</a>
+                    <a class="btn btn-success ml-2 mb-3" v-on:click="onChainDownload()">Download Chain of Trust</a>
                 </div>
                 <div>
-                    <a class="btn btn-warning ml-2 mb-2" href="">Revoke certificate</a>
-                    <a class="btn btn-danger ml-2 mb-2" href="">Delete certificate</a>
+                    <a class="btn btn-warning ml-2 mb-2" v-on:click="onRevoke()">Revoke certificate</a>
+                    <a class="btn btn-danger ml-2 mb-2" v-on:click="onDelete()">Delete certificate</a>
                 </div>
             </span>
         </div>
@@ -36 +36 @@
                         <div class="form-group">
                             <td><label for="validity_start">Validity start:</label></td>
                             <td class="pl-3">
-                                <input value="" type="date" id="validity_start" name="validity_start" class="form-control" disabled>
+                                <input :value="startDate" type="text" id="validity_start" name="validity_start" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -44 +44 @@
                         <div class="form-group">
                             <td><label for="validity_end">Validity end:</label></td>
                             <td class="pl-3">
-                                <input value="" type="date" id="validity_end" name="validity_end" class="form-control" disabled>
+                                <input :value="endDate" type="text" id="validity_end" name="validity_end" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -55 +55 @@
                         <div class="form-group">
                             <td><label for="subject_C">Country Code:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
+                                <input :value="certificate.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -63 +63 @@
                         <div class="form-group">
                             <td><label for="subject_ST">Province/State:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
+                                <input :value="certificate.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -71 +71 @@
                         <div class="form-group">
                             <td><label for="subject_L">Locality:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
+                                <input :value="certificate.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -79 +79 @@
                         <div class="form-group">
                             <td><label for="subject_CN">Common Name:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
+                                <input :value="certificate.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -87 +87 @@
                         <div class="form-group">
                             <td><label for="subject_O">Organization:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
+                                <input :value="certificate.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -95 +95 @@
                         <div class="form-group">
                             <td><label for="subject_OU">Organization Unit:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
+                                <input :value="certificate.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
@@ -103 +103 @@
                         <div class="form-group">
                             <td><label for="subject_emailAddress">Email Address:</label></td>
                             <td class="pl-3">
-                                <input value="" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                                <input :value="certificate.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
                             </td>
                         </div>
                     </tr>
                     <tr>
                         <td>Usage:</td>
                         <td class="form-check">
-                            <input class="form-check-input" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
+                            <input class="form-check-input" v-model="certificate.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="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
+                            <input class="form-check-input" v-model="certificate.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="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
+                            <input class="form-check-input" v-model="certificate.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="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
+                            <input class="form-check-input" v-model="certificate.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>
                 </table>
                 <div class="text-center">
-                    <a class="btn btn-success m-1" href="">Download Public Key</a>
-                    <a class="btn btn-success m-1" href="">Download Private Key</a>
+                    <a class="btn btn-success m-1" v-on:click="onPublicKeyDownload()">Download Public Key</a>
+                    <a class="btn btn-success m-1" v-on:click="onPrivateKeyDownload()">Download Private Key</a>
                 </div>
             </div>
             <div class="col-xl-7 table-responsive">

static/js/certificate.js

@@ +1 @@
+
+    var certificateDetailsApp = new Vue({
+        el: "#certificate-detailed-view-content",
+        data: {
+            certificate: {
+                subject: {
+                    C: "",
+                    ST: "",
+                    L: "",
+                    CN: "",
+                    O: "",
+                    OU: "",
+                    emailAddress: "",
+                },
+                notBefore: "",
+                notAfter: "",
+                usage: {
+                    CA: false,
+                    authentication: false,
+                    digitalSignature: false,
+                    SSL: false,
+                },
+                CA: null,
+            },
+        },
+        computed: {
+            startDate: function () {
+                return this.certificate.notBefore.substr(0, 16);
+            },
+            endDate: function () {
+                return this.certificate.notAfter.substr(0, 16);
+            }
+        },
+        watch: {
+
+        },
+        methods: {
+            onCertificateDownload: function () {
+
+            },
+            onRootDownload: function () {
+
+            },
+            onChainDownload: function () {
+
+            },
+            onPublicKeyDownload: function () {
+
+            },
+            onPrivateKeyDownload: function () {
+
+            },
+            onRevoke: function () {
+
+            },
+            onDelete: function () {
+
+            }
+        }
+    });
+
+    // get details of the selected certificate
+    const params = window.location.search;
+    if (params !== "") {
+        const urlParams = new URLSearchParams(params);
+        if (urlParams.get("id") != null) {
+            const id = urlParams.get("id");
+            axios.get(API_URL + "certificates/"+id+"/details")
+                .then(function (response) {
+                    if (response.data["success"])
+                        certificateDetailsApp.certificate = response.data["data"];
+                })
+                .catch(function (error) {
+                    alert("There should be some error reaction");
+                    // TODO error reaction -> display fault window
+                });
+        } else {
+            alert("There should be some error reaction");
+            // TODO error reaction -> display fault window
+        }
+    } else {
+        alert("There should be some error reaction");
+        // TODO error reaction -> display fault window
+    }

static/js/components.js

@@ -28 +28 @@
     methods: {
         // Get the certificate PEM data from the server and downloads it to users computer
         onCertificateDownload: function () {
-            var id = this.certificate.id;
-            axios.get(API_URL + "certificates/" + id)
-                .then(function (response) {
-                    if(response.data["success"]) {
-                        download(id + ".pem", response.data["data"])
-                    }
-                    else
-                        console.log("Error occurred while downloading the certificate") // TODO more action may be required
-                })
-                .catch(function (error) {
-                    console.log(error);
-                });
+            onCertificateDownload(this.certificate.id)
         },
-        // Get the certificate's chain of trust in PEM format from the server and downloads it to users computer
-        onCertificateChainDownload: function () {
-            var id = this.certificate.id;
-            axios.get(API_URL + "certificates/" + id + "/chain")
-                .then(function (response) {
-                    if(response.data["success"]) {
-                        download(id + "_chain.pem", response.data["data"])
-                    }
-                    else
-                        console.log("Error occurred while downloading the certificate's chain of trust") // TODO more action may be required
-                })
-                .catch(function (error) {
-                    console.log(error);
-                });
-        },
-        // Get the certificate's root CA as PEM data from the server and downloads it to users computer
-        onCertificateRootDownload: function () {
-            var id = this.certificate.id;
-            axios.get(API_URL + "certificates/" + id + "/root")
-                .then(function (response) {
-                    if(response.data["success"]) {
-                        download(id + "_root.pem", response.data["data"])
-                    }
-                    else
-                        console.log("Error occurred while downloading the certificate's root CA") // TODO more action may be required
-                })
-                .catch(function (error) {
-                    console.log(error);
-                });
-        }
     }
 });
 

static/js/index.js

@@ -13 +13 @@
                 const urlParams = new URLSearchParams(params);
                 if (urlParams.get("success") != null) this.successMessage = urlParams.get("success");
 
+                // the following code is necessary to dismiss the alert when the page is reloaded
                 const nextURL = '/static/index.html';
                 const nextTitle = 'X.509 Certificate Management';
                 const nextState = { additionalInformation: 'Updated the URL with JS' };

static/js/utilities.js

@@ -25 +25 @@
     var local = new Date(this);
     local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
     return local.toJSON().slice(0,10);
-});
+});
+
+// Get the certificate PEM data from the server and downloads it to users computer
+function onCertificateDownload(id) {
+    axios.get(API_URL + "certificates/" + id)
+        .then(function (response) {
+            if (response.data["success"]) {
+                download(id + ".pem", response.data["data"])
+            } else
+                console.log("Error occurred while downloading the certificate") // TODO more action may be required
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+}
+
+// Get the certificate's chain of trust in PEM format from the server and downloads it to users computer
+function onCertificateChainDownload(id) {
+    axios.get(API_URL + "certificates/" + id + "/chain")
+        .then(function (response) {
+            if(response.data["success"]) {
+                download(id + "_chain.pem", response.data["data"])
+            }
+            else
+                console.log("Error occurred while downloading the certificate's chain of trust") // TODO more action may be required
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+}
+
+// Get the certificate's root CA as PEM data from the server and downloads it to users computer
+function onCertificateRootDownload(id) {
+    axios.get(API_URL + "certificates/" + id + "/root")
+        .then(function (response) {
+            if(response.data["success"]) {
+                download(id + "_root.pem", response.data["data"])
+            }
+            else
+                console.log("Error occurred while downloading the certificate's root CA") // TODO more action may be required
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+}