aswi2021jmsd-gitlab/static/js/index.js @ 6b69049b

Vue.use(VueLoading);
Vue.component('loading', VueLoading)

// certificate listing app VUE instance
var certificateListingApp = new Vue({
    el: "#certificateListingPage",
    data: {
        certificatesPerPage: 20,
        hasNextPage: false,
        hasPreviousPage: false,
        currentPage: 1,
        displayFilters: false,
        loading: true,
        // list of all certificates to be displayed in the list
        certificates: [],
        successMessage: '',
        filtering: {
            type: {
                RootCA: false,
                IntermediateCA: false,
                EndCertificate: false,
            },
            usage: {
                CA: false,
                authentication: false,
                digitalSignature: false,
                SSL: false,
            },
            CN: "",
        }
    },
    methods: {
        onNextPage: async function () {
            this.currentPage++;
            await this.loadPage(this.currentPage, this.certificatesPerPage);
        },
        reloadData: async function() {
            await this.loadPage(this.currentPage, this.certificatesPerPage);
        },
        onPreviousPage: async function () {
            this.currentPage--;
            await this.loadPage(this.currentPage, this.certificatesPerPage);
        },
        loadPage: async function (page, perPage) {
            // download a list of all available certificates and display them in the table
            try {
                var params = {
                    page: page - 1,
                    per_page: perPage
                };
                var filtering = this.getFilterParameter();
                if (filtering != null) params.filtering = filtering;
                const response = await axios.get(API_URL + "certificates", {
                    params: params
                });
                if (response.data["success"]) {
                    this.certificates = [];
                    response.data["data"].forEach(item => certificateListingApp.certificates.push(item));
                    this.hasPreviousPage = page > 1;
                    this.hasNextPage = await this.checkIfNextPage(page, this.certificatesPerPage);
                }
            } catch (error) {
                console.log(error);
            }
        },
        getFilterParameter: function () {
            var type = [];
            if (this.filtering.type.EndCertificate) type.push("end");
            if (this.filtering.type.RootCA) type.push("root");
            if (this.filtering.type.IntermediateCA) type.push("inter");

            var usage = [];
            if (this.filtering.usage.CA) usage.push("CA");
            if (this.filtering.usage.SSL) usage.push("SSL");
            if (this.filtering.usage.digitalSignature) usage.push("digitalSignature");
            if (this.filtering.usage.authentication) usage.push("authentication");

            var filtering = {};
            if (usage.length > 0) filtering.usage = usage;
            if (type.length > 0) filtering.type = type;

            if (this.filtering.CN.length > 0) filtering.CN = this.filtering.CN;

            if (this.filtering.hasOwnProperty("type") ||
                this.filtering.hasOwnProperty("usage") ||
                this.filtering.hasOwnProperty("CN"))
                return filtering;
            else
                return null;
        },
        toggleFilters: function (){
            this.displayFilters = ~this.displayFilters;
        },
        clearFilters: async function () {
            this.filtering = {
                type: {
                    RootCA: false,
                    IntermediateCA: false,
                    EndCertificate: false,
                },
                usage: {
                    CA: false,
                    authentication: false,
                    digitalSignature: false,
                    SSL: false,
                },
                CN: "",
            }
            await this.reloadData();
        },
        checkIfNextPage: async function(page, perPage) {
            try {
                const response = await axios.get(API_URL + "certificates", {
                    params: {
                        page: page,
                        per_page: perPage
                    }
                });
                if (response.data["success"]) {
                    return response.data["data"].length > 0;
                }
                return false;
            } catch (error) {
                return false;
            }
        }
    },
    mounted: async function () {
        const params = window.location.search;
        if (params !== "") {
            const urlParams = new URLSearchParams(params);
            if (urlParams.get("success") != null) this.successMessage = urlParams.get("success");

            // the following code is necessary to dismiss the alert when the page is reloaded
            const nextURL = '/static/index.html';
            const nextTitle = 'X.509 Certificate Management';
            const nextState = {additionalInformation: 'Updated the URL with JS'};

            // This will create a new entry in the browser's history, without reloading
            window.history.pushState(nextState, nextTitle, nextURL);

            // This will replace the current entry in the browser's history, without reloading
            window.history.replaceState(nextState, nextTitle, nextURL);
        }

        // download a list of all available certificates and display them in the table
        await this.loadPage(1, this.certificatesPerPage);
        this.loading = false;
    }
});