Revize b556270c

Re #8475 - Create certificate, available CA selection

static/create_certificate.html

@@ -13 +13 @@
                 <div class="form-group">
                     <td><label for="CA">Certificate Authority:</label></td>
                     <td class="pl-3">
-                        <select name="CA" id="CA" class="form-control">
-                            <option value="volvo">Self-Signed</option>
-                            <option value="#test-cert-id">Test</option>
+                        <select v-model="selectedCA" name="CA" id="CA" class="form-control">
+                            <option value=null>Self-Signed</option>
+                            <option is="ca-select-item"
+                                    v-for="ca in authorities"
+                                    v-bind:ca="ca"
+                                    v-bind:key="ca.id"></option>
                         </select>
                     </td>
                 </div>
@@ -39 +42 @@
                 <div class="form-group">
                     <td><label for="issuer_CN">Common Name:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCA.CN" disabled>
+                        <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
                     </td>
                 </div>
             </tr>
@@ -47 +50 @@
                 <div class="form-group">
                     <td><label for="issuer_C">Country Code:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCA.C"  disabled>
+                        <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
                     </td>
                 </div>
             </tr>
@@ -55 +58 @@
                 <div class="form-group">
                     <td><label for="issuer_L">Locality:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCA.L" disabled>
+                        <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
                     </td>
                 </div>
             </tr>
@@ -63 +66 @@
                 <div class="form-group">
                     <td><label for="issuer_ST">Province/State:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCA.ST" disabled>
+                        <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
                     </td>
                 </div>
             </tr>
@@ -71 +74 @@
                 <div class="form-group">
                     <td><label for="issuer_O">Organization:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCA.O" disabled>
+                        <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
                     </td>
                 </div>
             </tr>
@@ -79 +82 @@
                 <div class="form-group">
                     <td><label for="issuer_OU">Organization Unit:</label></td>
                     <td class="pl-3">
-                        <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCA.OU" disabled>
+                        <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
                     </td>
                 </div>
             </tr>
@@ -87 +90 @@
                 <div class="form-group">
                     <td><label for="issuer_emailAddress">Email:</label></td>
                     <td class="pl-3">
-                        <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCA.emailAddress" disabled>
+                        <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
                     </td>
                 </div>
             </tr>

static/js/components.js

@@ -1 +1 @@
 Vue.component("certificate-item",{
-        props: ["certificate"],
-        template: "<tr>"+
-                    "<td class='align-middle'>{{ certificate.CN }}</td>"+
-                    "<td class='align-middle'>{{ certificate.notBefore }}</td>"+
-                    "<td class='align-middle'>{{ certificate.notAfter }}</td>"+
-                    "<td class='align-middle'>" +
-                    "   <div v-if='certificate.usage.CA'>CA</div>" +
-                    "   <div v-if='certificate.usage.authentication'>authentication</div>" +
-                    "   <div v-if='certificate.usage.digitalSignature'>digital signature</div>" +
-                    "   <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>"+
-                "</tr>",
-        methods: {
-            onCertificateDownload: function () {
-                var id = this.certificate.id;
-                axios.get(API_URL + "certificates/" + id)
-                    .then(function (response) {
-                        if(response.data["success"]) {
-                            download(id + ".crt", response.data["data"])
-                        }
-                        else
-                            console.log("Error occurred while downloading the certificate") // TODO more action may be required
-                    })
-                    .catch(function (error) {
-                        console.log(error);
-                    });
-            },
-            onCertificateChainDownload: function () {
-                var id = this.certificate.id;
-                axios.get(API_URL + "certificates/" + id + "/chain")
-                    .then(function (response) {
-                        if(response.data["success"]) {
-                            download(id + "_chain.crt", 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);
-                    });
-            },
-            onCertificateRootDownload: function () {
-                var id = this.certificate.id;
-                axios.get(API_URL + "certificates/" + id + "/root")
-                    .then(function (response) {
-                        if(response.data["success"]) {
-                            download(id + "_root.crt", 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);
-                    });
-            }
+    props: ["certificate"],
+    template: "<tr>"+
+                "<td class='align-middle'>{{ certificate.CN }}</td>"+
+                "<td class='align-middle'>{{ certificate.notBefore }}</td>"+
+                "<td class='align-middle'>{{ certificate.notAfter }}</td>"+
+                "<td class='align-middle'>" +
+                "   <div v-if='certificate.usage.CA'>CA</div>" +
+                "   <div v-if='certificate.usage.authentication'>authentication</div>" +
+                "   <div v-if='certificate.usage.digitalSignature'>digital signature</div>" +
+                "   <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>"+
+            "</tr>",
+    methods: {
+        onCertificateDownload: function () {
+            var id = this.certificate.id;
+            axios.get(API_URL + "certificates/" + id)
+                .then(function (response) {
+                    if(response.data["success"]) {
+                        download(id + ".crt", response.data["data"])
+                    }
+                    else
+                        console.log("Error occurred while downloading the certificate") // TODO more action may be required
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        },
+        onCertificateChainDownload: function () {
+            var id = this.certificate.id;
+            axios.get(API_URL + "certificates/" + id + "/chain")
+                .then(function (response) {
+                    if(response.data["success"]) {
+                        download(id + "_chain.crt", 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);
+                });
+        },
+        onCertificateRootDownload: function () {
+            var id = this.certificate.id;
+            axios.get(API_URL + "certificates/" + id + "/root")
+                .then(function (response) {
+                    if(response.data["success"]) {
+                        download(id + "_root.crt", 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);
+                });
         }
-    });
+    }
+});
+
+Vue.component("ca-select-item", {
+    props: ["ca"],
+    template: "<option v-bind:value='ca.id'>{{ ca.CN }}</option>"
+});

static/js/create_certificate.js

@@ -1 +1 @@
     var createCertificateApp = new Vue({
             el: "#create-certificate-content",
             data: {
-                selectedCA: {
+                authorities: [{id: 5, CN: "Test"}],
+                selectedCA: null,
+                selectedCAData: {
                     CN: "",
                     C:  "",
                     L:  "",
@@ -10 +12 @@
                     OU: "",
                     emailAddress: ""
                 }
+            },
+            watch: {
+                selectedCA: function (val, oldVal) {
+                    if (val === "null" || val == null) {
+                        createCertificateApp.selectedCAData = {
+                            CN: "",
+                            C:  "",
+                            L:  "",
+                            ST: "",
+                            O:  "",
+                            OU: "",
+                            emailAddress: ""
+                        };
+                    }
+                    else {
+                        axios.get(API_URL + "certificates/" + val + "/details")
+                            .then(function (response) {
+                                if (response.data["success"]) {
+                                    createCertificateApp.selectedCAData = response.data["data"]["subject"];
+                                }
+                                else
+                                    console.log("Error occurred while fetching CA details");
+                            })
+                            .catch(function (error) {
+                                console.log(error);
+                            });
+                    }
+                }
+            }
+        });
+
+    axios.get(API_URL+"certificates", {
+            params: {
+                filtering: {
+                    CA: true
+                }
+            }
+        })
+        .then(function (response) {
+            if (response.data["success"]) {
+                createCertificateApp.authorities = response.data["data"];
             }
+            else
+                console.log("Error occurred while fetching list of available certificate authorities");
+        })
+        .catch(function (error) {
+            console.log(error);
         });