93 lines
3.4 KiB
Vue
93 lines
3.4 KiB
Vue
<template>
|
|
<UDashboardPanel>
|
|
<template #header>
|
|
<UDashboardNavbar title="Accept Invitation" :ui="{ right: 'gap-3' }">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right />
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left />
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
|
|
<UPageCard title="Accept Invitation" description="Accept or decline the invitation." class="mb-6">
|
|
<div v-if="invitation && !error">
|
|
<div v-if="invitationStatus === 'pending'" class="space-y-4">
|
|
<p>
|
|
<strong>{{ invitation.inviterEmail }}</strong> has invited you to join
|
|
<strong>{{ invitation.organizationName }}</strong
|
|
>.
|
|
</p>
|
|
<p>
|
|
This invitation was sent to <strong>{{ invitation.email }}</strong
|
|
>.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="invitationStatus === 'accepted'" class="space-y-4 text-center">
|
|
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-green-100 rounded-full">
|
|
<UIcon name="i-lucide-check" class="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<h2 class="text-2xl font-bold">Welcome to {{ invitation.organizationName }}!</h2>
|
|
<p>You've successfully joined the organization. We're excited to have you on board!</p>
|
|
</div>
|
|
|
|
<div v-if="invitationStatus === 'rejected'" class="space-y-4 text-center">
|
|
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-red-100 rounded-full">
|
|
<UIcon name="i-lucide-x" class="w-8 h-8 text-red-600" />
|
|
</div>
|
|
<h2 class="text-2xl font-bold">Invitation Declined</h2>
|
|
<p>You've declined the invitation to join {{ invitation.organizationName }}.</p>
|
|
</div>
|
|
|
|
<div v-if="invitationStatus === 'pending'" class="flex justify-between mt-6">
|
|
<UButton variant="soft" color="neutral" @click="handleReject">Decline</UButton>
|
|
<UButton color="primary" @click="handleAccept">Accept Invitation</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="!invitation && !error" class="space-y-4">
|
|
<USkeleton class="w-1/3 h-6" />
|
|
<USkeleton class="w-full h-4" />
|
|
<USkeleton class="w-2/3 h-4" />
|
|
<USkeleton class="w-24 h-10 ml-auto" />
|
|
</div>
|
|
|
|
<div v-else>
|
|
<p class="text-red-600 font-medium">{{ error }}</p>
|
|
</div>
|
|
</UPageCard>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CustomInvitation } from '~/types/auth'
|
|
|
|
const invitationId = useRoute().params.id as string
|
|
|
|
const { acceptInvitation, rejectInvitation, getInvitation } = useOrganizationStore()
|
|
const invitation = ref<CustomInvitation>(null)
|
|
const invitationStatus = ref<'pending' | 'accepted' | 'rejected'>('pending')
|
|
const error = ref<string | null>(null)
|
|
|
|
async function handleAccept() {
|
|
await acceptInvitation(invitationId)
|
|
}
|
|
|
|
async function handleReject() {
|
|
await rejectInvitation(invitationId)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
invitation.value = await getInvitation(invitationId)
|
|
})
|
|
</script>
|