tried it with axios

axios.config.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import serversideConfig from './serversideConfig.js'
+
+//create axios instance
+const Axios = axios.create({
+  baseURL: `http://${serversideConfig.url}:${serversideConfig.port}`,
+  headers: {
+    // 'Accept': 'application/json', 
+    'Content-Type': 'application/json',
+    //Authorization: `Bearer`,
+    Accept: "*",
+  },
+})
+
+export default Axios;

components/LoginForm.vue

@@ -41,6 +41,7 @@
 <script setup>
 import { ref } from 'vue';
 // import LoginService from '../server/loginService.js';
+import Axios from '../axios.config.js';
 
 const darkMode = ref(true);
 </script>
@@ -53,52 +54,23 @@ export default {
       const username = document.getElementById('username-input').value;
       const password = document.getElementById('password-input').value;
 
-      const { data, error } = await useFetch('/api/login', {
-        method: 'post',
-        body: {
-          username: username,
-          password: password
-        }
-      })
-      if (!data.value) {
-        console.log(error.value)
-      } else {
-        console.log(data.value)
+      const requestBody = {
+        username: username,
+        password: password,
       }
-      // }).then(res => {
-      //   const data = res.data.value
-      //   const error = res.error.value
-      //   if (error) {
-      //     // dealing error
-      //     // console.log(error)
-      //   } else {
-      //     console.log(data)
-      //   }
-      // }, error => {
-      //   console.log('exception...')
-      //   console.log(error)
-      // })
 
-      // console.log(data.value)
-      // console.log(error)
-      // }
+      try {
+        let res = await Axios.post('/api/login', requestBody);
 
-      // // const response = await LoginService.login(data);
-      // const { response } = await useFetch('/api/login')
-      // console.log(response)
+        // something to do with the res?
+        console.log(res)
 
-
-      // Axios.post('/api/login', data, {
-      //   headers: {
-      //     'Content-Type': 'application/json'
-      //   }
-      // })
-      //   .then(function (response) {
-      //     console.log(response);
-      //   })
-      //   .catch(function (error) {
-      //     console.log(error);
-      //   });
+        // sucessfully logged in
+        this.$router.push('/')
+      } catch (err) {
+        // handle the error 
+        console.log(err.message)
+      }
     }
   }
 }

server/api/login.ts

@@ -1,15 +1,30 @@
+import { globalUserObject } from "../middleware/login";
+
 export default defineEventHandler(async (event) => {
+
     const body = await readBody(event)
 
-    if ((body.username == 'test') && (body.password == 'asd')) {
-        setResponseStatus(event, 202)
-        return {
-            login: 'successful'
-        }
-    } else {
+    let correctUsername;
+    let correctPassword;
+    if (globalUserObject !== null) {
+        correctUsername = globalUserObject.username;
+        correctPassword = globalUserObject.password;
+    }
+
+    let authorized = false;
+
+    if (body.username == correctUsername && body.password == correctPassword) {
+        authorized = true;
+    }
+
+    if (!authorized) {
         throw createError({
             statusCode: 400,
-            statusMessage: 'Login failed',
+            statusMessage: 'Username or password not valid.',
         })
     }
+
+    setResponseStatus(event, 202)
+    return 'Successfully logged in.'
+
 })

server/middleware/login.ts

@@ -0,0 +1,17 @@
+let globalUserObject: { [key: string]: any } | null = null;
+// let globalUserObject = null;
+
+export default defineEventHandler((event) => {
+
+    if (event.path.startsWith("/api/login")) {
+
+        // get user object from backend
+        const userObject = {
+            username: "test",
+            password: "asd"
+        }
+        globalUserObject = userObject;
+    }
+})
+
+export { globalUserObject };