PronounsPage/components/CardsBackup.vue

<script setup lang="ts">
import { getUrlForLocale } from '~/src/domain.ts';

const config = useConfig();

const exportStarted = ref(false);
const importSuccessful = ref(false);

const exportLink = computed(() => {
    return `${getUrlForLocale(config.locale)}/api/profile/export`;
});

const importLink = computed(() => {
    return `${getUrlForLocale(config.locale)}/api/profile/import`;
});

const startExport = () => {
    exportStarted.value = true;
    setTimeout(() => exportStarted.value = false, 5000);
};

const importDone = () => {
    importSuccessful.value = true;
    setTimeout(() => window.location.reload(), 3000);
};
</script>

<template>
    <section>
        <h5>
            <T>profile.backup.header</T>
        </h5>
        <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>