rss-reader/vue/src/components/LoginPage.vue

69 lines
2.0 KiB
Vue

<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>