Zaimki/components/Account.vue

<template>
    <section v-if="logoutInProgress">
        <p class="text-center">
            <Spinner size="5rem"/>
        </p>
        <div>
            <iframe v-for="domain in universalDomains"
                    :src="`${domain}/api/user/logout-universal`"
                    style="width: 1px; height: 1px; opacity: .01"
            >
            </iframe>
        </div>
    </section>
    <section v-else>
        <div v-if="showTermsUpdate" class="alert alert-info container my-4 small">
            <h4 class="mb-3">
                <Icon v="info-circle"/>
                <T>terms.update.header</T>
            </h4>
            <p>
                <T>terms.update.intro</T>
            </p>
            <ul>
                <li v-for="change in $t('terms.update.changes')">
                    {{ change }}
                </li>
            </ul>
            <p class="text-center">
                <button class="btn btn-primary" @click.prevent="dismissTermsUpdate">
                    <Icon v="shield-check"/>
                    <T>confirm.ok</T>
                </button>
            </p>
        </div>
        <div class="card mb-3">
            <div class="card-body d-flex flex-column flex-md-row">
                <div class="mx-2 text-center">
                    <p class="mb-0">
                        <Avatar :user="$user()"/>
                    </p>
                    <div class="mb-2">
                        <div v-if="$user().avatarSource === 'gravatar'" class="mt-3">
                            <a href="https://gravatar.com" target="_blank" rel="noopener" class="small">
                                <Icon v="external-link"/>
                                <T>user.avatar.change</T>
                                Gravatar
                            </a>
                        </div>
                        <div v-else class="mt-3">
                            Gravatar:
                            <a href="#" @click.prevent="setAvatar('gravatar')">
                                <Avatar :user="$user()" :src="gravatar($user())" dsize="2rem"/>
                            </a>
                        </div>
                        <div v-if="$user().avatarSource">
                            <a href="#" @click.prevent="setAvatar(null)" class="small">
                                <Icon v="trash"/>
                                <T>crud.remove</T>
                            </a>
                        </div>
                        <ImageUploader small @uploaded="uploaded" sizes="thumb"/>
                    </div>
                    <p v-if="$isGranted('panel') || $isGranted('users')">
                        <nuxt-link to="/admin" class="badge bg-primary text-white"><T>user.account.admin</T></nuxt-link>
                    </p>
                </div>
                <div class="mx-2 flex-grow-1">
                    <Alert type="danger" :message="error"/>

                    <div v-if="message" class="alert alert-success">
                        <p class="mb-0 narrow-message">
                            <Icon :v="messageIcon"/>
                            <T>{{message}}</T>
                        </p>
                    </div>

                    <form @submit.prevent="changeUsername" :disabled="savingUsername">
                        <h3 class="h6"><T>user.account.changeUsername.header</T></h3>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" v-model="username"
                                   required minlength="4" maxlength="16"/>
                            <button class="btn btn-outline-primary" :disabled="username === user.username">
                                <T>user.account.changeUsername.action</T>
                            </button>
                        </div>
                    </form>

                    <form @submit.prevent="changeEmail" :disabled="savingEmail">
                        <h3 class="h6"><T>user.account.changeEmail.header</T></h3>
                        <div v-if="!changeEmailAuthId" class="">
                            <input type="email" class="form-control mb-3" v-model="email" required/>
                            <div class="d-flex flex-column flex-md-row">
                                <Captcha v-model="captchaToken"/>
                                <div class="d-none d-md-block ms-3">
                                    <button class="btn btn-outline-primary" :disabled="!canChangeEmail">
                                        <T>user.account.changeEmail.action</T>
                                    </button>
                                </div>
                                <div class="d-block d-md-none mt-3">
                                    <button class="btn btn-outline-primary w-100" :disabled="!canChangeEmail">
                                        <T>user.account.changeEmail.action</T>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div v-else class="input-group mb-3">
                            <input type="text" class="form-control text-center" v-model="code"
                                   placeholder="000000" autofocus required minlength="0" maxlength="6"
                                   inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"
                                   ref="code"
                            />
                            <button class="btn btn-outline-primary">
                                <Icon v="key"/>
                                <T>user.code.action</T>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <Loading :value="profiles">
            <template v-slot:header>
                <h3 class="h4"><T>profile.list</T><T>quotation.colon</T></h3>
            </template>
            <ul v-if="profiles !== undefined" class="list-group">
                <li v-for="(options, locale) in locales" :key="locale" :class="['list-group-item', locale === config.locale ? 'profile-current' : '']">
                    <ProfileOverview :username="username" :profile="profiles[locale]" :locale="locale" @update="setProfiles"/>
                </li>
            </ul>
        </Loading>

        <Loading :value="socialConnections">
            <template v-slot:header>
                <h3 class="h4"><T>user.socialConnection.list</T><T>quotation.colon</T></h3>
            </template>
            <ul v-if="socialConnections !== undefined" class="list-group">
                <li v-for="(providerOptions, provider) in socialProviders" :key="provider" :class="['list-group-item', socialConnections[provider] !== undefined ? 'profile-current' : '']">
                    <SocialConnection :provider="provider" :providerOptions="providerOptions" :connection="socialConnections[provider]"
                                      @disconnected="socialConnections[provider] = undefined" @setAvatar="setAvatar"/>
                </li>
            </ul>
        </Loading>

        <section>
            <a href="#" class="badge bg-light text-dark border" @click.prevent="logout">
                <Icon v="sign-out"/>
                <T>user.logout</T>
            </a>

            <a href="#" class="badge bg-light text-dark border" @click.prevent="deleteAccount">
                <Icon v="trash-alt"/>
                <T>user.deleteAccount</T>
            </a>

            <a v-if="impersonationActive" href="#" class="badge bg-light text-dark border border-primary" @click.prevent="stopImpersonation">
                <Icon v="user-secret"/>
                Stop impersonation
            </a>
        </section>

        <div>
            <iframe v-for="domain in universalDomains"
                    :src="`${domain}/api/user/init-universal/${$cookies.get('token')}`"
                    style="width: 1px; height: 1px; opacity: .01"
            >
            </iframe>
        </div>
    </section>
</template>

<script>
    import {socialProviders} from "../src/data";
    import {gravatar} from "../src/helpers";
    import cookieSettings from "../src/cookieSettings";
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                username: this.$user().username,
                email: this.$user().email,

                message: '',
                messageIcon: null,
                error: '',
                changeEmailAuthId: null,
                code: '',

                profiles: undefined,

                socialProviders,
                socialConnections: undefined,

                savingUsername: false,
                savingEmail: false,

                gravatar,

                captchaToken: null,

                universalDomains: process.env.ALL_LOCALES_URLS.split(',').filter(x => x !== process.env.BASE_URL),

                logoutInProgress: false,

                impersonationActive: !!this.$cookies.get('impersonator'),

                showTermsUpdate: this.$ulidTime(this.$user().id) < new Date(2021, 11, 13) / 1000 && !this.$cookies.get('termsUpdateDismissed'),
            }
        },
        async mounted() {
            this.profiles = (await this.$axios.$get(`/profile/get/${this.$user().username}`)).profiles;
            this.socialConnections = await this.$axios.$get(`/user/social-connections`);

            if (process.client) {
                const redirectTo = window.sessionStorage.getItem('after-login');
                if (this.$user() && redirectTo) {
                    window.sessionStorage.removeItem('after-login')
                    await this.$router.push(redirectTo);
                }
            }
        },
        methods: {
            async changeUsername() {
                this.error = '';

                if (this.savingUsername) { return; }
                this.savingUsername = true;
                try {
                    const response = await this.$post(`/user/change-username`, {
                        username: this.username,
                    });

                    if (response.error) {
                        this.error = response.error;
                        return;
                    }

                    this.$store.commit('setToken', response.token);
                    this.username = this.$user().username;
                    this.$cookies.set('token', this.$store.state.token, cookieSettings);
                    this.message = 'crud.saved';
                    this.messageIcon = 'check-circle';
                    setTimeout(() => this.message = '', 3000);
                } finally {
                    this.savingUsername = false;
                }
            },
            async changeEmail() {
                this.error = '';

                if (this.savingEmail) { return; }
                this.savingEmail = true;
                try {
                    const response = await this.$post(`/user/change-email`, {
                        email: this.email,
                        authId: this.changeEmailAuthId,
                        code: this.code,
                        captchaToken: this.captchaToken,
                    });

                    if (response.error) {
                        this.error = response.error;
                        return;
                    }

                    if (!this.changeEmailAuthId) {
                        this.changeEmailAuthId = response.authId;
                        this.message = 'user.login.emailSent';
                        this.messageIcon = 'envelope-open-text';
                        this.$nextTick(_ => {
                            this.$refs.code.focus();
                        });
                    } else {
                        this.changeEmailAuthId = null;
                        this.message = '';
                        this.code = null;

                        this.$store.commit('setToken', response.token);
                        this.$cookies.set('token', this.$store.state.token, cookieSettings);
                        this.message = 'crud.saved';
                        this.messageIcon = 'check-circle';
                        setTimeout(() => this.message = '', 3000);
                    }
                } finally {
                    this.savingEmail = false;
                }
            },
            logout() {
                this.logoutInProgress = true;
                setTimeout(this.doLogout, 3000);
            },
            doLogout() {
                this.$store.commit('setToken', null);
                this.$cookies.removeAll();
                this.logoutInProgress = false;
            },
            setProfiles(profiles) {
                this.profiles = profiles;
            },
            async deleteAccount() {
                await this.$confirm(this.$t('user.deleteAccountConfirm'), 'danger');

                const response = await this.$post(`/user/delete`);
                this.logout();
            },
            async setAvatar(source) {
                const response = await this.$post(`/user/set-avatar`, {source});

                this.$store.commit('setToken', response.token);
                this.$cookies.set('token', this.$store.state.token, cookieSettings);
            },
            async uploaded(ids) {
                await this.setAvatar(`${process.env.BUCKET}/images/${ids[0]}-thumb.png`);
            },
            async stopImpersonation() {
                this.$cookies.set('token', this.$cookies.get('impersonator'));
                this.$cookies.remove('impersonator');
                window.location.reload();
            },
            dismissTermsUpdate() {
                this.$cookies.set('termsUpdateDismissed', true);
                this.showTermsUpdate = false;
            },
        },
        computed: {
            ...mapState([
                'user',
            ]),
            canChangeEmail() {
                return this.email && this.captchaToken;
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "assets/variables";

    .profile-current {
        border-inline-start: 3px solid $primary;
    }

    .narrow-message {
        max-width: 56ch;
    }
</style>