aswi2021jmsd-gitlab/static/js/components.js @ 0b8eac76

// 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'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></td>"+
                "<td class='align-middle'>{{ formattedNotBefore }}</td>"+
                "<td class='align-middle'>{{ formattedNotAfter }}</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='onChainOfTrustDownload()'>Download chain</button></td>"+
                "<td class='align-middle'><button v-on:click='onRootDownload()'>Download root</button></td>"+
                "<td class='align-middle'><button v-on:click='onPrivateKeyDownload()'>Download key</button></td>"+
                "<td v-if='certificate.issuer.id !== certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-bold'>{{ certificate.issuer.CN }}</a></td>"+
                "<td v-if='certificate.issuer.id === certificate.id'  class='align-middle'><a :href='issuerURL' class='font-weight-light'>self-signed</a></td>"+
            "</tr>",
    computed: {
        certificateURL: function () {
            return "/static/certificate.html?id=" + this.certificate.id;
        },
        issuerURL: function () {
            return "/static/certificate.html?id=" + this.certificate.issuer.id;
        },
        formattedNotAfter: function () {
            return this.certificate.notAfter.substring(0, 16);
        },
        formattedNotBefore: function () {
            return this.certificate.notBefore.substring(0, 16);
        }
    },
    methods: {
        // Get the certificate PEM data from the server and downloads it to users computer
        onCertificateDownload: function () {
            onCertificateDownload(this.certificate.id);
        },
        onPrivateKeyDownload: function () {
            onPrivateKeyDownload(this.certificate.id);
        },
        onChainOfTrustDownload: function () {
            onCertificateChainDownload(this.certificate.id);
        },
        onRootDownload: function () {
            onCertificateRootDownload(this.certificate.id);
        },
    }
});

// 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>"
});

// Component representing a certificate issued by displayed CA
Vue.component("issued-by-list-item", {
    props: ["certificate"],
    template:   "<tr class='align-middle text-center'>"+
                    "<td class='align-middle'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></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>"+
                "</tr>",
    computed: {
        certificateURL: function () {
            return "/static/certificate.html?id=" + this.certificate.id;
        }
    }
});