PronounsPage/components/ProfileOverview.vue

<template>
    <div class="d-flex justify-content-between align-items-center">
        {{ $locales[locale].name }}
        <span v-if="profile">
            <LocaleLink :locale="locale" :link="`/@${username}`" class="badge badge-lg bg-primary text-white text-white">
                <Icon v="id-card" />
                <T>profile.show</T>
            </LocaleLink>
            <LocaleLink :locale="locale" link="/editor" class="badge badge-lg bg-light text-dark border">
                <Icon v="edit" />
                <T>profile.edit</T>
            </LocaleLink>
            <Spinner v-if="deleting" />
            <a v-else href="#" class="badge badge-lg bg-light text-dark" :aria-label="$t('profile.delete')" @click.prevent="removeProfile(locale)">
                <Icon v="trash-alt" />
            </a>
        </span>
        <span v-else>
            <LocaleLink :locale="locale" link="/editor" class="badge badge-lg bg-light text-dark border">
                <Icon v="plus-circle" />
                <T>profile.init</T>
            </LocaleLink>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        username: { required: true },
        profile: { required: true },
        locale: { required: true },
    },
    data() {
        return {
            deleting: false,
        };
    },
    methods: {
        async removeProfile(locale) {
            await this.$confirm(this.$t('profile.deleteConfirm'), 'danger');

            this.deleting = true;
            try {
                const response = await this.$post(`/profile/delete/${locale}`);
                this.$emit('update', response);
            } finally {
                this.deleting = false;
            }
        },
    },
};
</script>