PronounsPage/components/SocialConnection.vue

<template>
    <div class="d-md-flex justify-content-between align-items-center">
        <h4 class="my-md-0 d-flex align-items-center gap-2">
            <Icon
                :v="providerOptions.icon || provider"
                set="b"
                :class="[providerOptions.icon && providerOptions.icon.endsWith('.png') ? 'mx-1 invertible' : '']"
            />
            {{ providerOptions.name }}
            <button
                v-if="providerOptions.deprecated"
                type="button"
                class="badge badge-sm text-bg-light border border-warning"
                @click="depreciationNotice(providerOptions.deprecated)"
            >
                <Icon v="exclamation-triangle" />
                <T>user.login.deprecated</T>
            </button>
            <button
                v-if="providerOptions.broken"
                type="button"
                class="badge badge-sm text-bg-light border border-warning"
                @click="brokenNotice()"
            >
                <Icon v="exclamation-triangle" />
                <T>user.login.broken</T>
            </button>
        </h4>
        <span v-if="connection === undefined">
            <template v-if="providerOptions.instanceRequired">
                <form
                    v-if="formShown"
                    :action="buildSocialLoginConnectLink(config.locale, provider, providerOptions)"
                    class="input-group input-group-sm"
                >
                    <input
                        type="text"
                        name="instance"
                        class="form-control"
                        autofocus
                        required
                        :placeholder="$t(providerOptions.domain ? 'user.login.domainPlaceholder' : 'user.login.instancePlaceholder')"
                    >
                    <button type="submit" class="btn btn-outline-secondary">
                        <Icon v="link" />
                    </button>
                </form>
                <button v-else type="button" class="btn btn-light border" @click="formShown = true">
                    <Icon v="link" />
                    <T>user.socialConnection.connect</T>
                </button>
            </template>
            <a
                v-else
                :href="buildSocialLoginConnectLink(config.locale, provider, providerOptions)"
                class="btn btn-light border"
            >
                <Icon v="link" />
                <T>user.socialConnection.connect</T>
            </a>
        </span>
        <span v-else class="text-center">
            <span class="me-2">
                <a v-if="providerOptions.avatars && connection.avatar" href="#" @click.prevent="$emit('setAvatar', provider)">
                    <Tooltip :text="$t('user.avatar.change')">
                        <Avatar :src="connection.avatarCopy || connection.avatar" :user="$user()" dsize="2rem" validate />
                    </Tooltip>
                </a>
                {{ connection.name }}
            </span>
            <br class="d-md-none">
            <a
                :href="buildSocialLoginConnectLink(config.locale, provider, providerOptions, connection.name.split('@').slice(-1)[0])"
                class="btn btn-light border"
            >
                <Icon v="sync" />
                <T>user.socialConnection.refresh</T>
            </a>
            <Spinner v-if="disconnecting" />
            <a v-else href="#" class="btn btn-light border" @click.prevent="disconnect">
                <Icon v="unlink" />
                <T>user.socialConnection.disconnect</T>
            </a>
        </span>
    </div>
</template>

<script>
import useConfig from '../composables/useConfig.ts';
import useDialogue from '../composables/useDialogue.ts';
import useSocial from '../composables/useSocial.ts';

export default {
    props: {
        provider: { required: true },
        providerOptions: { required: true },
        connection: {},
    },
    emits: ['setAvatar', 'disconnected'],
    setup() {
        const { buildSocialLoginConnectLink } = useSocial();
        return {
            config: useConfig(),
            dialogue: useDialogue(),
            buildSocialLoginConnectLink,
        };
    },
    data() {
        return {
            disconnecting: false,
            formShown: false,
        };
    },
    methods: {
        async disconnect() {
            await this.dialogue.confirm(this.$t('user.socialConnection.disconnectConfirm', { email: this.$user().email }), 'danger');

            this.disconnecting = true;
            try {
                const response = await this.dialogue.postWithAlertOnError(`/api/user/social-connection/${this.provider}/disconnect`);
                this.$emit('disconnected', response);
            } finally {
                this.disconnecting = false;
            }
        },
        async depreciationNotice(link) {
            await this.dialogue.alert(this.$t('user.login.depreciationNotice', { link }), 'warning');
        },
        async brokenNotice() {
            await this.dialogue.alert(this.$t('user.login.brokenNotice'), 'warning');
        },
    },
};
</script>