commit b556270ccfbe90aae1eab18423eb4b107199cd9b
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Fri Apr 2 19:52:04 2021 +0200

    Re #8475 - Create certificate, available CA selection

diff --git a/static/create_certificate.html b/static/create_certificate.html
index 853593d..9f0c4af 100644
--- a/static/create_certificate.html
+++ b/static/create_certificate.html
@@ -13,9 +13,12 @@
                 <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,7 +42,7 @@
                 <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,7 +50,7 @@
                 <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,7 +58,7 @@
                 <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,7 +66,7 @@
                 <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,7 +74,7 @@
                 <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,7 +82,7 @@
                 <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,7 +90,7 @@
                 <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>
diff --git a/static/js/components.js b/static/js/components.js
index c9a19fa..54842aa 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -1,61 +1,66 @@
 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);
+                });
         }
-    });
\ No newline at end of file
+    }
+});
+
+Vue.component("ca-select-item", {
+    props: ["ca"],
+    template: "<option v-bind:value='ca.id'>{{ ca.CN }}</option>"
+});
\ No newline at end of file
diff --git a/static/js/create_certificate.js b/static/js/create_certificate.js
index 8773ebe..a1a127e 100644
--- a/static/js/create_certificate.js
+++ b/static/js/create_certificate.js
@@ -1,7 +1,9 @@
     var createCertificateApp = new Vue({
             el: "#create-certificate-content",
             data: {
-                selectedCA: {
+                authorities: [{id: 5, CN: "Test"}],
+                selectedCA: null,
+                selectedCAData: {
                     CN: "",
                     C:  "",
                     L:  "",
@@ -10,5 +12,51 @@
                     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);
         });
\ No newline at end of file
