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 class="alert alert-success" v-if="exportStarted">
            <Icon v="check-circle"/>
            <T>profile.backup.export.success</T>
        </div>
        <div class="alert alert-success" v-if="importSuccessful">
            <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>