pixelfed/resources/assets/components/groups/GroupInvite.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>