When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works.
This is the code snippet for the login-box:
<div class="login-box">
<div v-if="pageMethod == 'login'">
<h1 class="display-4">Authentication</h1>
<p class="lead small">You are registered on this server. Enter your account's password to proceed with the authentication.</p>
</div>
<div v-if="pageMethod == 'register'">
<h1 class="display-4">Registration</h1>
<p class="lead small">You are not registered on this server. Enter your account's password to proceed with the registration.</p>
</div>
<div class="input-group">
<input v-model="password" :type="showPassword == true ? 'text' : 'password'" class="form-control"
placeholder="Password">
<div @click="showPassword = !showPassword" class="input-group-prepend">
<span class="input-group-text">
<i :class="showPassword != true ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
</span>
</div>
</div>
<button v-if="pageMethod == 'login'" @click="sendAuth(true)" class="btn btn-primary mt-3">Login</button>
<button v-if="pageMethod == 'register'" @click="sendAuth(false)" class="btn btn-primary mt-3">Register</button>
</div>
Here is the login-box CSS section:
.login-box {
text-align: center;
z-index: 1;
height: 100%;
width: 400px;
position: absolute;
right: 0px;
top: 0px;
display: flex;
background-color: rgba($card-bg, 0.8);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
h1 {
font-family: 'HouseScript';
font-size: 50px;
line-height: 50px;
color: #fff;
}