PronounsPage/components/CardsBackup.vue

<template>
    <section>
        <h3 class="h4">
            <T>profile.backup.header</T>
        </h3>
        <ul class="list-inline">
            <li class="list-inline-item">
                <a
                    :href="exportLink"
                    :class="['btn btn-outline-primary', exportStarted ? 'disabled' : '']"
                    :aria-disabled="exportStarted"
                    @click="startExport"
                >
                    <Icon v="cloud-download" />
                    <T>profile.backup.export.action</T>
                </a>
            </li>
            <li class="list-inline-item">
                <FileUploader
                    :url="importLink"
                    mime="application/gzip"
                    classes="btn btn-outline-primary"
                    @uploaded="importDone"
                >
                    <Icon v="cloud-upload" />
                    <T>profile.backup.import.action</T>
                </FileUploader>
            </li>
        </ul>
        <div v-if="exportStarted" class="alert alert-success">
            <Icon v="check-circle" />
            <T>profile.backup.export.success</T>
        </div>
        <div v-if="importSuccessful" class="alert alert-success">
            <Icon v="check-circle" />
            <T>profile.backup.import.success</T>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            exportStarted: false,
            importSuccessful: false,
        };
    },
    computed: {
        exportLink() {
            return `${process.env.BASE_URL}/api/profile/export`;
        },
        importLink() {
            return `${process.env.BASE_URL}/api/profile/import`;
        },
    },
    methods: {
        startExport() {
            this.exportStarted = true;
            setTimeout(() => this.exportStarted = false, 5000);
        },
        importDone() {
            this.importSuccessful = true;
            setTimeout(() => window.location.reload(), 3000);
        },
    },
};
</script>