claude rework

vue/src/components/LoginPage.vue

@@ -2,57 +2,40 @@
 import axios from 'axios'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router';
+
 const username = ref('')
 const password = ref('')
+const error = ref('')
 const router = useRouter()
 
 async function login() {
+  error.value = ''
 
-  const loginData = {
-    "username": username.value,
-    "password": password.value,
-  }
-  const jsonData = JSON.stringify(loginData)
-  console.log('test')
   try {
-    const response = await axios.post('login/rss', jsonData, {
+    const response = await axios.post('/api/v1/auth/login', {
+      username: username.value,
+      password: password.value,
+    }, {
       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
+        'Content-Type': 'application/json',
       },
     });
 
-    // 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
-      let user_id = response.headers.user_id
-      localStorage.setItem("user-token", token)
-      localStorage.setItem("user-id", user_id)
-      sessionStorage.setItem("user-id", user_id)
-      sessionStorage.setItem("user-token", token)
-      router.push({ name: 'about' })
+      localStorage.setItem("user-token", response.headers.token)
+      localStorage.setItem("user-id", response.headers.user_id)
+      router.push({ name: 'feeds' })
     }
-    // Handle success
-  } catch (error) {
-    // Handle any errors here
-    console.error('Error:', error);
+  } catch (err) {
+    console.error('Login failed:', err)
+    error.value = 'Login failed. Please check your username and password.'
   }
-  // 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>
+  <div class="login-page">
+    <h1>Login</h1>
     <form @submit.prevent="login">
       <div class="form-group">
         <label for="username">Username/Email:</label>
@@ -62,7 +45,39 @@ async function login() {
         <label for="password">Password:</label>
         <input v-model="password" type="password" id="password" name="password" required />
       </div>
+      <p v-if="error" class="login-error">{{ error }}</p>
       <button type="submit">Login</button>
     </form>
   </div>
 </template>
+
+<style scoped>
+.login-page {
+  max-width: 420px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.form-group input {
+  min-height: 44px;
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+
+.login-page button {
+  min-height: 44px;
+  padding: 0.5rem 1.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.login-error {
+  color: #c0392b;
+}
+</style>