UnivateProperties/src/components/user/loginPage.vue

<template>
  <div class="container">
    <!-- eslint-disable max-len -->
    <div class="login-page">
      <form id="signIn">
        <div class="form col-md-12">
          <div>
            <h4>Login</h4>
          </div>
          <button
            @click="routerGoTo('/user/register')"
            class="btn"
            style="margin:2px; color: #60CBEB"
          >Register</button>
          <button
            @click="routerGoTo('/user/registeragency')"
            class="btn"
            style="margin:2px; color: #60CBEB"
          >Agency Registration</button>
          <div v-if="this.$store.state.authentication.status === 'error'">
            <alert
              :text="'User doesn\'t exist or Username and Password is incorrect'"
              :type="'ERROR'"
            />
          </div>
          <div class="row">
            <div class="col-md-12" style="margin-bottom: 1em">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="username"
                    placeholder="Username"
                    v-model="username"
                    value
                  />
                </div>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    :type="isPasswordShown"
                    v-model="password"
                    id="password"
                    placeholder="Password"
                    name="password"
                    value
                  />
                  <div class="input-group-append">
                    <span class="input-group-text">
                      <eva-icon
                        v-if="!showPassword"
                        name="eye-off-outline"
                        fill="#60CBEB"
                        @click="togglePassword()"
                      ></eva-icon>
                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
          <hr />
          <div
            @click="ToggleTrouble()"
            class="btn cursor: pointer;"
            style="margin:2px; color: #60CBEB; font-size:110%;"
          >Trouble signing in?</div>
          <br />
          <div v-if="troubleToggle">
            <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
            <div class="row">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input class="form-control" placeholder="Your Email" type="text" name="email" value />
              </div>
            </div>
            <br />
            <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import alert from '../shared/alert.vue';

export default {
  name: 'Login',
  components: {
    alert,
  },
  data() {
    return {
      isPasswordShown: 'password',
      selectItems: [{ text: 'password', value: 0 }],
      selectErrors: 'Some error with the field',
      select: null,
      textErrors: 'Some error with the field',
      text: '',
      showPassword: false,
      email: '',
      troubleToggle: false,
    };
  },
  computed: {
    ...mapState('authentication', ['token', 'status', 'username', 'password']),
  },
  methods: {
    ...mapActions('authentication', ['login', 'init']),
    ToggleTrouble() {
      if (this.troubleToggle) {
        this.troubleToggle = false;
      } else this.troubleToggle = true;
    },
    Login() {
      this.login().then(() => {
        if (this.$store.state.authentication.status === 'error') {
          this.$router.push('/user/login');
        }
      });
    },
    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = 'text';
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = 'password';
    },
    SendMail() {},
    routerGoTo(goTo) {
      console.log(goTo);
      this.$router.push(goTo);
    },
  },
};
</script>

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