My login button only seems to work when I press the tab button after entering my email and password. I would like it to work whenever I press the enter key while on the Login page of this VueJS application.
This is the HTML template:
<template>
<div class="login-page" id="login-page">
<div class="form" id="form">
<form class="login-form" id="login-form">
<div class="head-login">
<img class="teamfu-image" src="../assets/teamfu-v.png"/><h2 class="login">Login</h2>
</div>
<hr class="beneathBorder" color="white">
<div>
<p class="text">Email: <input v-model="input.email" class="input" type="text" placeholder='e.g. [email protected]' /></p>
<p class="text">Password: <input v-model="input.password" class="input" type="password" placeholder=" " /></p>
</div>
<button type="button" @click="login" @keyup.enter="login"" > Login</button>
<p class="message">Not a part of the team? <router-link class="reg" :to="'/register'">Register</router-link></p>
</form>
</div>
</div>
</template>
This is the script:
<script>
import { checkUser } from "../db/storage";
export default {
name: 'login-page',
data() {
return {
input: {
email: '',
password: ''
}
};
},
methods: {
login() {
if (this.input.email !== "" && this.input.password !== "") {
if (checkUser(this.input.email, this.input.password)) {
this.$emit("authenticated", true);
this.$router.replace('/dashboard');
} else {
alert("The username and/or password is incorrect");
console.log("The username and/or password is incorrect");
}
} else {
alert("A username and password must be present");
console.log("A username and password must be present");
}
}
}
};
</script>