app/components/forms/auth/login-form.vue

@@ -1,19 +1,9 @@
 <script lang="ts" setup>
-import incorrectPasswordGif from '~/assets/img/incorrect-password.gif';
-
 const email = ref("");
 const password = ref("");
 const {login} = useAuth();
 
-const errorMessage = ref("");
-
-const handleLogin = async () => {
-  try {
-    await login(email.value, password.value)
-  } catch (error) {
-    errorMessage.value = "Invalid email or password";
-  }
-}
+const handleLogin = () => login(email.value, password.value)
 </script>
 
 <template>
@@ -39,22 +29,10 @@ const handleLogin = async () => {
     </div>
 
     <button type="submit">Submit</button>
-    <div class="error-container">
-      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
-      <img v-if="errorMessage" :src="incorrectPasswordGif" alt="You didn't say the magic word." class="error-image"
-           height="200" width="300"/>
-    </div>
   </form>
 </template>
 
 <style scoped>
-.error-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
 .password-form {
   display: flex;
   flex-direction: column;
@@ -68,9 +46,4 @@ const handleLogin = async () => {
   flex-direction: column;
   gap: 1rem;
 }
-
-.error-message {
-  color: red;
-  text-align: center;
-}
 </style>

app/components/forms/auth/registration-form.vue

@@ -5,36 +5,27 @@ const {register} = useAuth();
 
 const username = ref("");
 const email = ref("");
-const errorMessage = ref("");
 
-const handleRegistration = async () => {
-  try {
-    await register(email.value, username.value);
-  } catch (error: any) {
-    console.error(error);
-    errorMessage.value = error.message;
-  }
+const handleRegistration = () => {
+  register(email.value, username.value);
 }
 
 </script>
 
 <template>
   <form class="password-form" @submit.prevent="handleRegistration">
-    <div class="form-group">
-      <label for="email">Email</label>
-      <input id="email" v-model="email" type="email"/>
-    </div>
-
     <div class="form-group">
       <label for="username">Username</label>
       <input id="username" v-model="username" type="text"/>
     </div>
 
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
     <button type="submit">Submit</button>
   </form>
-  <div class="error-container">
-    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
-  </div>
 </template>
 
 <style scoped>
@@ -51,17 +42,4 @@ const handleRegistration = async () => {
   flex-direction: column;
   gap: 1rem;
 }
-
-.error-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.error-message {
-  color: red;
-  text-align: center;
-}
-
 </style>

app/composables/useAuth.ts

@@ -6,16 +6,7 @@ export const useAuth = () => {
             baseURL: config.public.apiBase,
             credentials: 'include',
         })
-        await $api('/api/login', {
-                method: 'POST',
-                onResponseError({response}) {
-                    if (response.status === 401) {
-                        throw new Error('INVALID_CREDENTIALS')
-                    }
-                },
-                body: {email, password}
-            }
-        )
+        await $api('/api/login', {method: 'POST', body: {email, password}})
         window.location.href = '/lists'
     }
 
@@ -24,16 +15,7 @@ export const useAuth = () => {
             baseURL: config.public.apiBase,
             credentials: 'include',
         })
-        await $api('/api/register', {
-            method: 'POST',
-            onResponseError({response}) {
-                console.log("wat", response)
-                if (response.status === 422) {
-                    throw new Error(response._data.message)
-                }
-            },
-            body: {email, username}
-        })
+        await $api('/api/register', {method: 'POST', body: {email, username}})
         await navigateTo('/auth/login')
     }
 

app/pages/invitations/[token]/accept.vue

@@ -1,19 +1,26 @@
 <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",
@@ -22,9 +29,6 @@ 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;
@@ -39,48 +43,20 @@ 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-show="failed">
-      <span>{{ errorMessage }}</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>
 </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>

app/types/invitation-status.ts

@@ -1,13 +0,0 @@
-export enum InviteStatusEnum {
-    PENDING = "pending",
-    ACCEPTED = "accepted",
-    DECLINED = "declined",
-    NOT_FOUND = "not_found",
-    FAILED = "failed",
-}
-
-export type InviteStatus = {
-    message: string
-    status: InviteStatusEnum
-}
-