<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/rss', 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
      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' })
    }
    // 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>
