Refactor login error handling and improve user feedback

- Update LoginForm component to display error messages directly from the authentication response.
- Modify useAuth composable to handle login errors more effectively, ensuring proper error messages are thrown.
- Enhance login API response to return structured error messages for invalid credentials.
- Adjust Cidaas utility to throw specific errors for invalid username/password scenarios.

app/components/Auth/LoginForm.vue

@@ -32,19 +32,14 @@ const onSubmit = handleSubmit(async (values) => {
     // Redirect happens in login() function
   } catch (error: any) {
     console.error('Login error:', error)
-    submitError.value = error.data?.message || 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+    // Error message is now directly in error.message (thrown by useAuth composable)
+    submitError.value = error.message || 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
   }
 })
 </script>
 
 <template>
   <form @submit="onSubmit" class="space-y-6">
-    <!-- Error Alert -->
-    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
-      <AlertCircle class="h-5 w-5 text-destructive" />
-      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
-    </Alert>
-
     <!-- Email Field -->
     <FormField v-slot="{ componentField }" name="email">
       <FormItem>
@@ -67,6 +62,12 @@ const onSubmit = handleSubmit(async (values) => {
       </FormItem>
     </FormField>
 
+    <!-- Error Alert -->
+    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
+    </Alert>
+
     <!-- Submit Button -->
     <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting">
       <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />

app/composables/useAuth.ts

@@ -17,26 +17,32 @@ export function useAuth() {
    * Direct authentication via Cidaas API (no redirect)
    */
   async function login(email: string, password: string) {
-    try {
-      // Call login endpoint - creates session directly
-      await $fetch('/api/auth/login', {
-        method: 'POST',
-        body: { email, password },
-      })
+    // Call login endpoint - creates session directly
+    const response = await $fetch<{ success: boolean; message?: string }>('/api/auth/login', {
+      method: 'POST',
+      body: { email, password },
+      // Don't throw on 4xx/5xx, we handle the response ourselves
+      ignoreResponseError: true,
+    })
 
-      // Refresh user session
-      await fetch()
-
-      // Redirect to homepage or saved destination
-      const redirectAfterLogin = useCookie('redirect_after_login')
-      const destination = redirectAfterLogin.value || '/'
-      redirectAfterLogin.value = null // Clear cookie
-
-      navigateTo(destination)
-    } catch (error) {
-      console.error('Login failed:', error)
+    // Check if login was successful
+    if (!response.success) {
+      // Throw error with the server's message (contains German text with umlauts)
+      const error: any = new Error(response.message || 'Login failed')
+      error.data = response
+      error.statusCode = 401
       throw error
     }
+
+    // Refresh user session
+    await fetch()
+
+    // Redirect to homepage or saved destination
+    const redirectAfterLogin = useCookie('redirect_after_login')
+    const destination = redirectAfterLogin.value || '/'
+    redirectAfterLogin.value = null // Clear cookie
+
+    navigateTo(destination)
   }
 
   /**