Button and text label in vue are not clickable

Issue

So I have created a registration page in vue and when I want to type something in the box or click the register/login button it wont do anything but if I hit TAB and write my password and then hit TAB and press ENTER it will work.

This is the code:

<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. Insert 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. Insert your account's password to proceed with the reegistration.</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>

And this is the login-box css part:

.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);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
h1 {
  font-family: 'HouseScript';
  font-size: 50px;
  line-height: 50px;
  color: #fff;
}

Solution

I fixed it. There was a logo that was hovering over the textlabel and button. I had to add pointer-events: none; in the css part of the logo. Thanks for your suggestions.

Answered By - Andrei Radu