Data fetching error
hello, i'm having errors when logging in. my server is working fine when im trying to test it with postman. i also tried adding logs but it seems like it doesnt store the email and password. also it proceeds to login with invalid credentials. i need help, thanks in advance 🙏
1 Reply
<template>
<div class="container">
<a-form class="login-form" @submit.prevent="handleSubmit">
<a-form-item>
<a-input v-model="email" placeholder="Email or Username" prefix-icon="user" />
</a-form-item>
<a-form-item>
<a-input-password v-model="password" placeholder="Password" prefix-icon="lock" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" class="btn-login">Login</a-button>
</a-form-item>
<div class="or-divider">
<span>OR</span>
<div class="divider-line"></div>
</div>
<a-form-item>
<a-button type="primary" @click="handleGoogleLogin" class="btn-google">
<GoogleSquareFilled />
<span>Log in with Google</span>
</a-button>
</a-form-item>
<div class="signup-link">
<span>Don’t have an account?</span>
<nuxt-link to="/register" class="btn-signup"> Sign up</nuxt-link>
</div>
</a-form>
</div>
</template>
<template>
<div class="container">
<a-form class="login-form" @submit.prevent="handleSubmit">
<a-form-item>
<a-input v-model="email" placeholder="Email or Username" prefix-icon="user" />
</a-form-item>
<a-form-item>
<a-input-password v-model="password" placeholder="Password" prefix-icon="lock" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" class="btn-login">Login</a-button>
</a-form-item>
<div class="or-divider">
<span>OR</span>
<div class="divider-line"></div>
</div>
<a-form-item>
<a-button type="primary" @click="handleGoogleLogin" class="btn-google">
<GoogleSquareFilled />
<span>Log in with Google</span>
</a-button>
</a-form-item>
<div class="signup-link">
<span>Don’t have an account?</span>
<nuxt-link to="/register" class="btn-signup"> Sign up</nuxt-link>
</div>
</a-form>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Input, Button } from "ant-design-vue";
import Icon from "ant-design-vue/es/icon";
import { message } from 'ant-design-vue';
import axios from 'axios';
export default defineComponent({
components: {
'a-input': Input,
'a-input-password': Input.Password,
'a-button': Button,
'a-icon': Icon
},
data() {
return {
email: '',
password: ''
};
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('http://localhost:8000/auth/login', {
email: this.email,
password: this.password
});
console.log('Email:', this.email);
console.log('Password:', this.password);
console.log(response.data);
} catch (error) {
console.error('Login failed:', error);
message.error('Incorrect username or password.');
}
},
handleGoogleLogin() {
// Handle Google login
}
}
});
</script>
<script lang="ts">
import { defineComponent } from "vue";
import { Input, Button } from "ant-design-vue";
import Icon from "ant-design-vue/es/icon";
import { message } from 'ant-design-vue';
import axios from 'axios';
export default defineComponent({
components: {
'a-input': Input,
'a-input-password': Input.Password,
'a-button': Button,
'a-icon': Icon
},
data() {
return {
email: '',
password: ''
};
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('http://localhost:8000/auth/login', {
email: this.email,
password: this.password
});
console.log('Email:', this.email);
console.log('Password:', this.password);
console.log(response.data);
} catch (error) {
console.error('Login failed:', error);
message.error('Incorrect username or password.');
}
},
handleGoogleLogin() {
// Handle Google login
}
}
});
</script>