added vue component

vue/src/components/LoginPage.vue

@@ -0,0 +1,64 @@
+<script setup>
+import axios from 'axios'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+const username = ref('')
+const password = ref('')
+const router = useRouter()
+
+async function login() {
+
+  const loginData = {
+    "username": username.value,
+    "password": password.value,
+  }
+  const jsonData = JSON.stringify(loginData)
+  console.log('test')
+  try {
+    const response = await axios.post('login', jsonData, {
+      headers: {
+        'Content-Type': 'application/json', // Set the content type to JSON
+        'crossDomain': true,
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Credentials': true,
+        'strict-origin-when-cross-origin': false
+      },
+    });
+
+    // Handle the response data here
+    console.log('Response:', response.data);
+
+    // You can also access the HTTP status code
+    console.log('HTTP Status Code:', response.status);
+
+    if (response.status == 200) {
+      let token = response.headers.token
+      localStorage.setItem("user-token", token);
+      router.push({ name: 'about' })
+    }
+    // Handle success
+  } catch (error) {
+    // Handle any errors here
+    console.error('Error:', error);
+  }
+  // Implement your login logic here (e.g., send a request to your backend)
+  // If login is successful, you can redirect the user to the dashboard:
+}
+</script>
+
+<template>
+  <div>
+    <h1>Login Page</h1>
+    <form @submit.prevent="login">
+      <div class="form-group">
+        <label for="username">Username/Email:</label>
+        <input v-model="username" type="text" id="username" name="username" required />
+      </div>
+      <div class="form-group">
+        <label for="password">Password:</label>
+        <input v-model="password" type="password" id="password" name="password" required />
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>