mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 04:21:27 +00:00
217 lines
6.5 KiB
Vue
217 lines
6.5 KiB
Vue
<template>
|
|
<div class="group-invite-component">
|
|
<div class="container">
|
|
<div class="row justify-content-center mt-5">
|
|
<div class="col-12 col-md-7">
|
|
<div class="card shadow-none border" style="min-height: 300px;">
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
|
|
<transition-group name="fade">
|
|
<div v-if="tab === 'initial'" key="initial">
|
|
<p class="text-center mb-1"><b-spinner variant="lighter" /></p>
|
|
<p class="text-center small text-muted mb-0">{{ loadingStatus }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'loading'" key="loading">
|
|
<p class="text-center mb-1"><b-spinner variant="lighter" /></p>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'login'" key="login">
|
|
<p class="text-center mb-0">Please <a href="/login">login</a> to continue</p>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'form'" key="form">
|
|
<div class="d-flex justify-content-center align-items-center flex-column">
|
|
<p class="text-center h4 font-weight-bold"><a href="#">@dansup</a> invited you to join</p>
|
|
|
|
<div class="card my-3 shadow-none border" style="width: 300px;">
|
|
<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: 100px;object-fit: cover;">
|
|
<div v-else class="card-img-top" style="width: 100px; height: 100px;padding: 5px;">
|
|
<div class="bg-primary d-flex align-items-center justify-content-center" style="width: 100%; height:100%;">
|
|
<i class="fal fa-users text-white fa-lg"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p class="h5 font-weight-bold mb-1 text-dark">
|
|
{{ group.name || 'Untitled Group' }}
|
|
</p>
|
|
|
|
<transition name="fade">
|
|
<p v-if="showMore" class="text-muted small mb-1">
|
|
{{ group.description }}
|
|
</p>
|
|
</transition>
|
|
|
|
<p class="mb-1">
|
|
<span class="text-muted mr-2">
|
|
<i class="far fa-users fa-sm text-lighter mr-1"></i>
|
|
<span class="small font-weight-bold">{{ prettyCount(group.member_count) }} Members</span>
|
|
</span>
|
|
|
|
<span v-if="!group.local" class="remote-label ml-2">
|
|
<i class="fal fa-globe"></i> Remote
|
|
</span>
|
|
</p>
|
|
|
|
<transition name="fade">
|
|
<div v-if="showMore">
|
|
<p class="text-muted small mb-1">
|
|
<i class="far fa-tag fa-sm text-lighter mr-2"></i>
|
|
<span class="font-weight-bold">Category: {{ group.category.name }}</span>
|
|
</p>
|
|
<p class="text-muted small mb-1">
|
|
<i class="far fa-clock fa-sm text-lighter mr-2"></i>
|
|
<span class="font-weight-bold">Created {{ timeago(group.created_at) }} ago</span>
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn btn-light border-lighter font-weight-bold btn-sm" @click="showMoreInfo">
|
|
{{ showMore ? 'Less' :'More' }} info
|
|
</button>
|
|
<div>
|
|
<button class="btn btn-light font-weight-bold btn-sm" @click="declineInvite">Decline</button>
|
|
<button class="btn btn-primary font-weight-bold btn-sm" @click="acceptInvite">Accept</button>
|
|
</div>
|
|
</div>
|
|
<!-- <p class="text-center h4 font-weight-bold">by <a href="#" class="font-weight-bold">@dansup</a></p> -->
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'existingmember'" key="existingmember">
|
|
<p class="text-center mb-0">You already are a member of this group</p>
|
|
<p class="text-center mb-0">
|
|
<a :href="group.url" class="font-weight-bold">View Group</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'notinvited'" key="notinvited">
|
|
<p class="text-center mb-0">We cannot find an active invitation for your account.</p>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'error'" key="error">
|
|
<p class="text-center mb-0">An unknown error occured. Please try again later.</p>
|
|
</div>
|
|
|
|
<div v-else key="unknown">
|
|
<p class="text-center mb-0">An unknown error occured. Please try again later.</p>
|
|
</div>
|
|
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
<!-- <h4>You've been invited to {{ group.name }}</h4> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
export default {
|
|
props: [
|
|
'id'
|
|
],
|
|
|
|
data() {
|
|
return {
|
|
loadingStatus: 'Determining invite eligibility',
|
|
tab: 'initial',
|
|
profile: {},
|
|
group: {},
|
|
showMore: false
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
axios.get('/api/pixelfed/v1/accounts/verify_credentials')
|
|
.then(res => {
|
|
this.profile = res.data;
|
|
this.fetchGroup();
|
|
}).catch(err => {
|
|
if(err.response.status === 403) {
|
|
this.tab = 'login';
|
|
return;
|
|
} else {
|
|
this.tab = 'error';
|
|
return
|
|
}
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
fetchGroup() {
|
|
axios.get(`/api/v0/groups/${this.id}`)
|
|
.then(res => {
|
|
this.group = res.data;
|
|
this.loadingStatus = 'Checking group invitations';
|
|
this.checkForInvitation();
|
|
}).catch(err => {
|
|
this.tab = 'error';
|
|
});
|
|
},
|
|
|
|
checkForInvitation() {
|
|
axios.post(`/api/v0/groups/${this.group.id}/invite/check`)
|
|
.then(res => {
|
|
this.tab = res.data.can_join == true ? 'form' : 'notinvited';
|
|
}).catch(err => {
|
|
if(err.response.status === 422 && err.response.data.error === 'Already a member') {
|
|
this.tab = 'existingmember';
|
|
} else {
|
|
this.tab = 'error';
|
|
}
|
|
})
|
|
},
|
|
|
|
prettyCount(val) {
|
|
return App.util.format.count(val);
|
|
},
|
|
|
|
timeago(ts) {
|
|
return App.util.format.timeAgo(ts);
|
|
},
|
|
|
|
showMoreInfo() {
|
|
event.currentTarget.blur();
|
|
this.showMore = !this.showMore;
|
|
},
|
|
|
|
acceptInvite() {
|
|
event.currentTarget.blur();
|
|
this.tab = 'loading';
|
|
axios.post(`/api/v0/groups/${this.group.id}/invite/accept`)
|
|
.then(res => {
|
|
setTimeout(() => {
|
|
location.href = res.data.next_url;
|
|
}, 2000);
|
|
}).catch(err => {
|
|
this.tab = 'error';
|
|
});
|
|
},
|
|
|
|
declineInvite() {
|
|
event.currentTarget.blur();
|
|
this.tab = 'loading';
|
|
axios.post(`/api/v0/groups/${this.group.id}/invite/decline`)
|
|
.then(res => {
|
|
location.href = res.data.next_url;
|
|
}).catch(err => {
|
|
this.tab = 'error';
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.group-invite-component {
|
|
.btn-light {
|
|
border-color: #E5E7EB;
|
|
}
|
|
}
|
|
</style>
|