tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added error handling and cleaned up styles

Browse source
This commit is contained in:
Edward Tirado Jr 2026-04-10 18:10:01 -05:00
parent 21c3d42d90
commit 93c60498d0
6 changed files with 137 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

70
app/pages/invitations/[token]/accept.vue
View file

@ -1,26 +1,19 @@
<script lang="ts" setup>
import type {InviteStatus} from "~/types/invitation-status";
definePageMeta({
layout: 'auth'
})
const route = useRoute();
const token = route.params.token as string;
let isAuthorized = ref(false);
let isProcessed = ref(false);
let failed = ref(false);
let errorMessage = ref("An error occurred while accepting the request.");
enum InviteStatusEnum {
PENDING = "pending",
ACCEPTED = "accepted",
DECLINED = "declined",
NOT_FOUND = "not_found",
FAILED = "failed",
}
type InviteStatus = {
message: string
status: InviteStatusEnum
}
// check if the email from the invite has an existing user
const acceptInvitation = () => {
$api<InviteStatus>(`/api/invitations/${token}/accept`, {
method: "GET",
@ -29,6 +22,9 @@ const acceptInvitation = () => {
isAuthorized.value = false
isProcessed.value = true
return;
} else if (response.status === 404) {
errorMessage.value = "Invitation not found."
isProcessed.value = true
}
failed.value = true;
@ -43,20 +39,48 @@ acceptInvitation();
</script>
<template>
<div class="content">
<div v-if="!isAuthorized && !isProcessed && !failed">
<span class="status-message">Checking your invitation...</span>
</div>
<div v-else-if="!isAuthorized && isProcessed && !failed" class="auth-message">
<span>You'll need to <NuxtLink class="link" to="/auth/login">log in</NuxtLink> or
<NuxtLink class="link" to="/auth/register">create an account</NuxtLink> to view this list.</span>
<span>If you're creating a new account, be sure to use the email address where you received this invitation.</span>
</div>
<div v-if="!isAuthorized && !isProcessed && !failed">
<span>Processing...</span>
</div>
<div v-else-if="!isAuthorized && isProcessed && !failed">
<span>You need to <NuxtLink to="/auth/login">log in</NuxtLink> or <NuxtLink
to="/auth/register">create an account</NuxtLink></span>
</div>
<div v-show="failed">
<span>An error occurred while accepting the request.</span>
<div v-show="failed">
<span>{{ errorMessage }}</span>
</div>
</div>
</template>
<style scoped>
.auth-message {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1rem;
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
font-weight: bold;
font-size: 1.5rem;
text-align: center;
}
.link {
text-decoration: underline;
color: #007bff;
cursor: pointer;
}
.link:hover {
color: #0056b3;
}
</style>