forked from mirror/pixelfed
134 lines
4.4 KiB
Vue
134 lines
4.4 KiB
Vue
<template>
|
|
<div class="container remote-auth-start">
|
|
<div class="row mt-5 justify-content-center">
|
|
<div class="col-12 col-md-5">
|
|
<div class="card shadow-none border" style="border-radius: 20px;">
|
|
<div v-if="!loaded" class="card-body d-flex justify-content-center flex-column" style="min-height: 662px;">
|
|
<p class="lead text-center font-weight-bold mb-0">Sign-in with Mastodon</p>
|
|
<div class="w-100">
|
|
<hr>
|
|
</div>
|
|
<div class="d-flex justify-content-center align-items-center flex-grow-1">
|
|
<b-spinner />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="card-body" style="min-height: 662px;">
|
|
<p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
|
|
<hr>
|
|
<p class="small text-center mb-3">Select your Mastodon server:</p>
|
|
<button
|
|
v-for="domain in domains"
|
|
type="button"
|
|
class="server-btn"
|
|
@click="handleRedirect(domain)">
|
|
<span class="font-weight-bold">{{ domain }}</span>
|
|
</button>
|
|
<hr>
|
|
<p class="text-center">
|
|
<button type="button" class="other-server-btn" @click="handleOther()">Sign-in with a different server</button>
|
|
</p>
|
|
<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">
|
|
export default {
|
|
data() {
|
|
return {
|
|
loaded: false,
|
|
domains: []
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.fetchDomains();
|
|
},
|
|
|
|
methods: {
|
|
fetchDomains() {
|
|
axios.post('/auth/raw/mastodon/domains')
|
|
.then(res => {
|
|
this.domains = res.data;
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
this.loaded = true;
|
|
}, 500);
|
|
})
|
|
},
|
|
|
|
handleRedirect(domain) {
|
|
axios.post('/auth/raw/mastodon/redirect', { domain: domain })
|
|
.then(res => {
|
|
if(!res || !res.data.hasOwnProperty('ready')) {
|
|
return;
|
|
}
|
|
|
|
if(res.data.hasOwnProperty('action') && res.data.action === 'incompatible_domain') {
|
|
swal('Oops!', 'This server is not compatible, please choose another or try again later!', 'error');
|
|
return;
|
|
}
|
|
|
|
if(res.data.ready) {
|
|
window.location.href = '/auth/raw/mastodon/preflight?d=' + domain + '&dsh=' + res.data.dsh;
|
|
}
|
|
})
|
|
},
|
|
|
|
handleOther() {
|
|
swal({
|
|
text: 'Enter your mastodon domain (without https://)',
|
|
content: "input",
|
|
button: {
|
|
text: "Next",
|
|
closeModal: false,
|
|
},
|
|
})
|
|
.then(domain => {
|
|
if (!domain) throw null;
|
|
|
|
if(domain.startsWith('https://')) {
|
|
return;
|
|
}
|
|
|
|
return this.handleRedirect(domain);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use '../../../../node_modules/bootstrap/scss/bootstrap';
|
|
|
|
.remote-auth-start {
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|