UnivateProperties/src/components/user/loginPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="login-page">
    <form id="signIn">
      <div class="form">
        <div>
          <h4>Login</h4>
        </div>
        <div class="row">
          <div>
            <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
          </div>
          <div class="col-md-11">
            <input
              class="form-control"
              v-model="username"
              placeholder="Username"
              type="text"
              name="username"
              value
            />
          </div>
          <div>
            <eva-icon v-if="!showPassword" name="eye-off" fill="#60CBEB" @click="togglePassword()"></eva-icon>
            <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
          </div>
          <div class="col-md-11">
            <input
              class="form-control"
              :type="isPasswordShown"
              v-model="password"
              id="password"
              placeholder="Password"
              name="password"
              value
            />
          </div>
        </div>
        <div class="form-group row"></div>
        <button @click="Login" class="btn btn-b-n" type="submit">Sign In</button>
        <p v-if="user !== null">{{ user }}</p>
      </div>
    </form>

    <form id="forgot">
      <div class="form">
        <h5>Trouble signing in?</h5>
        <div>
          <div class="row">
            <eva-icon name="email" fill="#60CBEB"></eva-icon>

            <div class="col-md-11">
              <input class="form-control" placeholder="Your Email" type="text" name="email" value />
            </div>
          </div>
        </div>
        <div class="form-group row"></div>
        <div class="offset-md-3 col-md-5">
          <button class="btn btn-b-n" type="submit">Get Help</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
const axios = require('axios');

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      user: null,
      isPasswordShown: 'password',
      selectItems: [{ text: 'password', value: 0 }],
      selectErrors: 'Some error with the field',
      select: null,
      textErrors: 'Some error with the field',
      text: '',
      showPassword: false,
      password: '',
    };
  },
  methods: {
    Login() {
      console.log(this.username + this.password);
      axios
        .post('http://localhost:57260/api/register/authenticate', {
          username: this.username,
          password: this.password,
        })
        .then(response => console.log(response.data));
      this.$router.push('/about/us');
    },
    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = 'text';
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = 'password';
    },
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>