Error handling on signup, login and home view

front/src/services/api.ts

@@ -72,7 +72,14 @@ async function request<T = any>(method: string, url: string, body?: any, attempt
 
   if (!res.ok) {
     const errorBody = await parseJsonOrThrow(res)
-    throw Object.assign(new Error(res.statusText || 'Request failed'), { status: res.status, body: errorBody })
+
+    if (errorBody?.errors) {
+      const messages = errorBody.errors.map((e: any) => e.message ?? e)
+
+      const err = new Error(messages[0]) as any
+      err.messages = messages
+      throw err
+    }
   }
 
   return await parseJsonOrThrow(res)

front/src/views/HomeView.vue

@@ -18,7 +18,12 @@ const selectedJoinPolicy = ref(WhiteboardJoinPolicy.FreeToJoin)
 const maxParticipants = ref(10)
 const showCreateModal = ref(false)
 
+const newWhiteboardError = ref<string[]>([])
+const joinWithCodeError = ref<string[]>([])
+
 async function handleCreateNewWhiteboard() {
+  newWhiteboardError.value = []
+
   if (!whiteboardTitle.value.trim()) {
     alert('Please enter a title for the whiteboard.')
     return
@@ -37,12 +42,16 @@ async function handleCreateNewWhiteboard() {
     maxParticipants.value = 10
 
     await router.push({ name: 'whiteboard', params: { id: newWhiteboardId } })
-  } catch (e) {
-    console.error('Failed to create new whiteboard', e)
+  } catch (e: any) {
+    newWhiteboardError.value = e.messages || ['Failed to create whiteboard']
+  } finally {
+    whiteboards.isLoading = false
   }
 }
 
 async function joinWithCode() {
+  joinWithCodeError.value = []
+
   if (joinCode.value.length !== 8) {
     alert('Please enter a valid 8-digit code.')
     return
@@ -59,7 +68,7 @@ async function joinWithCode() {
 
     await router.push({ name: 'whiteboard', params: { id: joinResult.whiteboardId } })
   } catch (err: any) {
-    console.error(err)
+    joinWithCodeError.value = err.messages || ['Failed to join whiteboard with code']
   }
 }
 
@@ -99,6 +108,13 @@ async function joinWithCode() {
     style="min-height: calc(100vh - 56px);"
   >
     <div style="width: 320px;">
+
+      <div v-if="joinWithCodeError.length" class="alert alert-danger">
+        <ul>
+          <li v-for="errorMessage in joinWithCodeError" :key="errorMessage">{{ errorMessage }}</li>
+        </ul>
+      </div>
+
       <input
         v-model="joinCode"
         type="text"
@@ -126,6 +142,13 @@ async function joinWithCode() {
           <button type="button" class="btn-close btn-close-white" @click="showCreateModal = false"></button>
         </div>
         <div class="modal-body">
+
+          <div v-if="newWhiteboardError.length" class="alert alert-danger">
+            <ul>
+              <li v-for="errorMessage in newWhiteboardError" :key="errorMessage">{{ errorMessage }}</li>
+            </ul>
+          </div>
+
           <input
             v-model="whiteboardTitle"
             type="text"

front/src/views/LoginView.vue

@@ -8,17 +8,17 @@ const auth = useAuthStore()
 
 const email = ref('')
 const password = ref('')
-const error = ref('')
+const error = ref<string[]>([])
 const loading = ref(false)
 
 async function onSubmit() {
-  error.value = ''
+  error.value = []
   loading.value = true
   try {
     await auth.login({ email: email.value, password: password.value })
     router.push('/')
   } catch (e: any) {
-    error.value = e.message || 'Login failed'
+    error.value = e.messages || ['Login failed']
   } finally {
     loading.value = false
   }
@@ -30,7 +30,11 @@ async function onSubmit() {
     <div class="card-body p-4">
       <h2 class="card-title text-center mb-4">Log In</h2>
 
-      <div v-if="error" class="alert alert-danger">{{ error }}</div>
+      <div v-if="error.length" class="alert alert-danger">
+        <ul>
+          <li v-for="m in error" :key="m">{{ m }}</li>
+        </ul>
+      </div>
 
       <form @submit.prevent="onSubmit">
         <div class="mb-3">

front/src/views/SignupView.vue

@@ -9,17 +9,17 @@ const auth = useAuthStore()
 const username = ref('')
 const email = ref('')
 const password = ref('')
-const error = ref('')
+const error = ref<string[]>([])
 const loading = ref(false)
 
 async function onSubmit() {
-  error.value = ''
+  error.value = []
   loading.value = true
   try {
     await auth.signup({ username: username.value, email: email.value, password: password.value })
     router.push('/')
   } catch (e: any) {
-    error.value = e.message || 'Signup failed'
+    error.value = e.messages || ['Signup failed']
   } finally {
     loading.value = false
   }
@@ -31,7 +31,11 @@ async function onSubmit() {
     <div class="card-body p-4">
       <h2 class="card-title text-center mb-4">Sign Up</h2>
 
-      <div v-if="error" class="alert alert-danger">{{ error }}</div>
+      <div v-if="error.length" class="alert alert-danger">
+        <ul>
+          <li v-for="m in error" :key="m">{{ m }}</li>
+        </ul>
+      </div>
 
       <form @submit.prevent="onSubmit">
         <div class="mb-3">