Add message when login failed

pages/login.vue

@@ -3,7 +3,12 @@ definePageMeta({
     layout: 'login'
 })
 
+const errorMessage = ref('')
+
 const login = async () => {
+    // Clear any previous error messages
+    errorMessage.value = ''
+    
     const payload = {
         username: document.getElementById('username')?.value,
         password: document.getElementById('password')?.value
@@ -11,18 +16,23 @@ const login = async () => {
     const config = useRuntimeConfig()
     const apiBase = config.public.apiBase
     const api_url = `${apiBase}/auth/token`
+    
+    try {
         const { data: user } = await useFetch(api_url, {
             method: 'POST',
             body: payload
         })
+        
         if (!user.value) {
-        throw createError({
-            statusCode: 401,
-            statusMessage: 'Unauthorized'
-        })
+            errorMessage.value = 'Kirjautuminen epäonnistui. Tarkista käyttäjätunnus ja salasana.'
+            return
         }
+        
         localStorage.setItem('user', JSON.stringify(user.value))
         navigateTo('/')
+    } catch (error) {
+        errorMessage.value = 'Kirjautuminen epäonnistui. Palvelimeen ei saada yhteyttä.'
+    }
 }
 </script>
 
@@ -31,6 +41,9 @@ const login = async () => {
         <div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
             <h1 class="text-center font-bold text-lg">Kirjaudu</h1>
             <form @submit.prevent="login" class="">
+                <div v-if="errorMessage" class="error-message p-2 my-2 bg-red-100 text-red-700 rounded border border-red-300">
+                    {{ errorMessage }}
+                </div>
                 <label>Käyttäjätunnus
                     <input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
                 </label>