aswi2021jmsd-gitlab/static/js/components.js @ 43439c9f

// Component representing an instance in certificate listing
Vue.component("certificate-item",{
    // certificate = certificate to be displayed by the list 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: {
        // 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 + ".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);
                });
        },
        // 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.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);
                });
        },
        // 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.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);
                });
        }
    }
});

// Component representing an item in select of available CAs
Vue.component("ca-select-item", {
    // Certificate authority to be represented by the option
    props: ["ca"],
    template: "<option v-bind:value='ca.id'>{{ ca.CN }}</option>"
});