aswi2021jmsd-gitlab/static/js/create_certificate.js @ 3243b35d

// VUE instance of certificate creation page
var createCertificateApp = new Vue({
    el: "#create-certificate-content",
    data: {
        notBefore: "",
        notAfter: "",
        isSelfSigned: false,
        invalidCN: false,
        invalidC: false,
        customKey: false,
        showIssuer: false,
        customExtensions: false,
        // available certificate authorities
        authorities: [],
        // data of the selected certificate authorities to be displayed in the form
        selectedCAData: {
            CN: "",
            C: "",
            L: "",
            ST: "",
            O: "",
            OU: "",
            emailAddress: ""
        },
        // Data of the new certificate to be created received from the input fields
        certificateData: {
            subject: {
                CN: "",
                C: "",
                L: "",
                ST: "",
                O: "",
                OU: "",
                emailAddress: ""
            },
            validityDays: 30,
            usage: {
                CA: false,
                authentication: false,
                digitalSignature: false,
                SSL: false
            },
            CA: null
        },
        extensions: null,
        key: {
            password: null,
            key_pem: null,
        },
        errorMessage: ""
    },
    // actions to be performed when the page is loaded
    // - initialize notBefore and notAfter with current date and current date + 1 month respectively
    async mounted() {
        this.notBefore = new Date().toDateInputValue(); // init notBefore to current date
        var endDate = new Date(new Date().getTime() + (30 * 24 * 60 * 60 * 1000));
        this.notAfter = endDate.toDateInputValue(); // init notAfter to notBefore + 30 days

        // Initialize available CA select values
        try {
            const response = await axios.get(API_URL + "certificates", {
                params: {
                    filtering: {
                        usage: ["CA"],
                    }
                }
            });
            if (response.data["success"]) {
                createCertificateApp.authorities = response.data["data"];
            } else {
                this.showError("Error occurred while downloading list of available CAs");
                console.error(response.data["data"]);
                createCertificateApp.authorities = [];
            }
        } catch (error) {
            this.showError("Error occurred while downloading list of available CAs");
            console.log(error);
        }
    },
    methods: {
        toggleShowIssuer: function () {
            this.showIssuer = ~this.showIssuer;
        },
        onKeyFileChange: function (event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = function (evt) {
                createCertificateApp.key.key_pem = evt.target.result;
            }
            reader.onerror = function (evt) {
                this.showError("Error occurred while reading custom private key file.");
            }

        },
        showError: function (message) {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            this.errorMessage = message;
        },
        // handle certificate creation request
        onCreateCertificate: async function () {
            // validate input data
            // - validate if is self signed or CA is selected
            // - validate if subject CN is filled in
            // - validate if C is either empty or has exactly 2 characters
            if (!this.isSelfSigned && this.certificateData.CA == null) {
                this.showError("Issuer must be selected or 'Self-signed' option must be checked!")
                return;
            }
            if (this.certificateData.subject.CN === "") {
                this.showError("CN field must be filled in!")
                this.invalidCN = true;
                return;
            }
            if (this.certificateData.subject.C !== "" && this.certificateData.subject.C.length !== 2) {
                this.showError("C field must be empty or must have exactly 2 characters!");
                this.invalidC = true;
                return;
            }

            // populate optional key field in the request body
            delete this.certificateData.key;
            if (this.customKey && this.key.password != null && this.key.password !== "") {
                if (!this.certificateData.hasOwnProperty("key")) this.certificateData.key = {};
                this.certificateData.key.password = this.key.password;
            }
            if (this.customKey && this.key.key_pem != null) {
                if (!this.certificateData.hasOwnProperty("key")) this.certificateData.key = {};
                this.certificateData.key.key_pem = this.key.key_pem;
            }

            // populate optional extensions field in the request body
            delete this.certificateData.extensions;
            if (this.customExtensions && this.extensions !== "" && this.extensions != null)
            {
                this.certificateData.extensions = this.extensions;
            }


            this.certificateData.validityDays = parseInt(this.certificateData.validityDays);
            try {
                // create a deep copy of the certificate dataa
                var certificateDataCopy = JSON.parse(JSON.stringify(this.certificateData));
                certificateDataCopy.usage = [];

                // convert usage dictionary to list
                if (this.certificateData.usage.CA) certificateDataCopy.usage.push("CA");
                if (this.certificateData.usage.digitalSignature) certificateDataCopy.usage.push("digitalSignature");
                if (this.certificateData.usage.authentication) certificateDataCopy.usage.push("authentication");
                if (this.certificateData.usage.SSL) certificateDataCopy.usage.push("SSL");

                // call RestAPI endpoint
                const response = await axios.post(API_URL + "certificates", certificateDataCopy);
                if (response.data["success"]) {
                    window.location.href = "/static/index.html?success=Certificate+successfully+created";
                }
                // on error display server response message
                else {
                    console.error(response.data["data"]);
                    createCertificateApp.showError(response.data["data"]);
                }
            } catch (error) {
                createCertificateApp.showError("An error occurred while creating a certificate.");
                console.error(error);
            }
        }
    },
    // data watches
    watch: {
        authorities: function (val, oldVal) {
            this.isSelfSigned = val.length === 0;
        },
        isSelfSigned: function (val, oldVal) {
            if (val) {
                this.certificateData.CA = null;
                this.certificateData.usage.CA = true;
            } else {
                this.certificateData.usage.CA = false;
            }
        },
        // if the selected CA is changed, the Issuer input fileds must be filled in
        'certificateData.validityDays': function (val, oldVal) {
            var endDate = new Date(new Date().getTime() + (val * 24 * 60 * 60 * 1000));
            this.notAfter = endDate.toDateInputValue(); // init notAfter to today + validityDays
        },
        'certificateData.subject.CN': function (val, oldVal) {
            if (val !== '') this.invalidCN = false;
        },
        'certificateData.CA': async function (val, oldVal) {
            // self-signed certificate - all fields are empty
            if (val === "null" || val == null) {
                createCertificateApp.selectedCAData = {
                    CN: "",
                    C: "",
                    L: "",
                    ST: "",
                    O: "",
                    OU: "",
                    emailAddress: ""
                };
            }
            // a CA is selected - get CA's details and display them
            else {
                try {
                    const response = await axios.get(API_URL + "certificates/" + val + "/details");
                    if (response.data["success"])
                        createCertificateApp.selectedCAData = response.data["data"]["subject"];
                    else
                        console.log("Error occurred while fetching CA details");
                } catch (error) {
                    console.log(error);
                }
            }
        }
    }
});