pixelfed/resources/assets/components/remote-auth/GettingStartedComponent.vue

<template>
<div class="container remote-auth-getting-started">
    <div class="row mt-5 justify-content-center">
        <div class="col-12 col-xl-5 col-md-7">
            <div v-if="!error" class="card shadow-none border" style="border-radius: 20px;">
                <div v-if="!loaded && !existing && !maxUsesReached" class="card-body d-flex align-items-center flex-column" style="min-height: 400px;">
                    <div class="w-100">
                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
                        <hr />
                    </div>
                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
                        <div class="position-relative w-100">
                            <p class="pa-center">Please wait...</p>
                            <instagram-loader></instagram-loader>
                        </div>
                        <div class="w-100">
                            <hr>
                            <p class="text-center mb-0">
                                <a class="font-weight-bold" href="/login">Go back to login</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div v-else-if="!loaded && !existing && maxUsesReached" class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
                    <div class="w-100">
                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
                        <hr />
                    </div>
                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">

                        <p class="lead text-center font-weight-bold mt-3">Oops!</p>

                        <p class="mb-2 text-center">We cannot complete your request at this time</p>
                        <p class="mb-3 text-center text-xs">It appears that you've signed-in on other Pixelfed instances and reached the max limit that we accept.</p>
                    </div>

                    <div class="w-100">
                        <p class="text-center mb-0">
                            <a class="font-weight-bold" href="/site/contact">Contact Support</a>
                        </p>
                        <hr>
                        <p class="text-center mb-0">
                            <a class="font-weight-bold" href="/login">Go back to login</a>
                        </p>
                    </div>
                </div>

                <div v-else-if="!loaded && existing" class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
                    <div class="w-100">
                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
                        <hr />
                    </div>
                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
                        <b-spinner />
                        <div class="text-center">
                            <p class="lead mb-0">Welcome back!</p>
                            <p class="text-xs text-muted">One moment please, we're logging you in...</p>
                        </div>
                    </div>
                </div>

                <register-form v-else :initialData="prefill" v-on:setCanReload="setCanReload" />
            </div>
            <div v-else class="card shadow-none border">
                <div class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
                    <div class="w-100">
                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
                        <hr />
                    </div>
                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">

                        <p class="lead text-center font-weight-bold mt-3">Oops, something went wrong!</p>

                        <p class="mb-3">We cannot complete your request at this time, please try again later.</p>

                        <p class="text-xs text-muted mb-1">This can happen for a few different reasons:</p>

                        <ul class="text-xs text-muted">
                            <li>The remote instance cannot be reached</li>
                            <li>The remote instance is not supported yet</li>
                            <li>The remote instance has been disabled by admins</li>
                            <li>The remote instance does not allow remote logins</li>
                        </ul>
                    </div>

                    <div class="w-100">
                        <hr>
                        <p class="text-center mb-0">
                            <a class="font-weight-bold" href="/login">Go back to login</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script type="text/javascript">
    import { InstagramLoader } from 'vue-content-loader';
    import RegisterForm from './partials/RegisterForm.vue';

    export default {
        components: {
            InstagramLoader,
            RegisterForm
        },

        data() {
            return {
                loaded: false,
                error: false,
                prefill: false,
                existing: undefined,
                maxUsesReached: undefined,
                tab: 'loading',
                canReload: false,
            }
        },

        mounted() {
            this.validateSession();

            window.onbeforeunload = function () {
                if(!this.canReload) {
                    alert('You are trying to leave.');
                    return false;
                }
            }
        },

        methods: {
            validateSession() {
                axios.post('/auth/raw/mastodon/s/check')
                .then(res => {
                    if(!res && !res.hasOwnProperty('action')) {
                        swal('Oops!', 'An unexpected error occured, please try again later', 'error');
                        return;
                    }

                    switch(res.data.action) {
                        case 'onboard':
                            this.getPrefillData();
                            return;
                        break;

                        case 'redirect_existing_user':
                            this.existing = true;
                            this.canReload = true;
                            window.onbeforeunload = undefined;
                            this.redirectExistingUser();
                            return;
                        break;

                        case 'max_uses_reached':
                            this.maxUsesReached = true;
                            this.canReload = true;
                            window.onbeforeunload = undefined;
                            return;
                        break;

                        default:
                            this.error = true;
                            return;
                        break;
                    }
                })
                .catch(error => {
                    this.canReload = true;
                    window.onbeforeunload = undefined;
                    this.error = true;
                })
            },

            setCanReload() {
                this.canReload = true;
                window.onbeforeunload = undefined;
            },

            redirectExistingUser() {
                this.canReload = true;
                setTimeout(() => {
                    this.handleLogin();
                }, 1500);
            },

            handleLogin() {
                axios.post('/auth/raw/mastodon/s/login')
                .then(res => {
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                })
                .catch(err => {
                    this.canReload = false;
                    this.error = true;
                })
            },

            getPrefillData() {
                axios.post('/auth/raw/mastodon/s/prefill')
                .then(res => {
                    this.prefill = res.data;
                })
                .catch(error => {
                    this.error = true;
                })
                .finally(() => {
                    setTimeout(() => {
                        this.loaded = true;
                    }, 1000);
                })
            }
        }
    }
</script>

<style lang="scss">
    @use '../../../../node_modules/bootstrap/scss/bootstrap';

    .remote-auth-getting-started {
        .text-xs {
            font-size: 12px;
        }

        .gap-1 {
            gap: 1rem;
        }

        .opacity-50 {
            opacity: .3;
        }

        .server-btn {
            @extend .btn;
            @extend .btn-primary;
            @extend .btn-block;
            @extend .rounded-pill;
            @extend .font-weight-light;

            background: linear-gradient(#6364FF, #563ACC);
        }

        .other-server-btn {
            @extend .btn;
            @extend .btn-dark;
            @extend .btn-block;
            @extend .rounded-pill;
            @extend .font-weight-light;
        }

        .pa-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
            font-weight: 600;
            font-size: 16px;
        }
    }
</style>