mirror of https://github.com/pixelfed/pixelfed.git
263 lines
9.5 KiB
Vue
263 lines
9.5 KiB
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>
|