UnivateProperties/src/components/user/loginPage.vue

<template>
  <main id="main">
    <section id="intro">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
            <div class="intro-content">
              <div class="col-10 mx-auto">
                <div class="card card-signin my-5">
                  <div class="card-body">
                    <h3 class="card-title text-center">Login</h3>
                    <div v-if="error">
                      <alert
                        :text="'User doesn\'t exist or Username and Password is incorrect'"
                        :type="'ERROR'"
                      />
                    </div>
                    <div v-if="page">
                      <alert :text="page.text" :type="'INFO'" />
                    </div>
                    <div class="form-label-group">
                      <input
                        type="text"
                        id="inputEmail"
                        v-model="username"
                        class="form-control"
                        placeholder="Username"
                        required
                        autofocus
                      />
                    </div>
                    <div class="form-label-group">
                      <input
                        type="password"
                        placeholder="Password"
                        v-model="password"
                        id="inputPassword"
                        class="form-control"
                        required
                      />
                    </div>
                    <div class="custom-control custom-checkbox mb-3">
                      <input type="checkbox" class="custom-control-input" id="customCheck1" />
                      <label class="custom-control-label" for="customCheck1"
                        >Remember password?</label
                      >
                    </div>

                    <button v-on:click="Login()" class="btn-solid-blue" type="submit">
                      LOGIN
                    </button>
                    <router-link style="float:right" to="/user/forgotPassword"
                      >Forgot Password?</router-link
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <carousel
        :nav="false"
        :dots="false"
        :items="1"
        :autoplay="true"
        :loop="true"
        id="intro-carousel"
        style="margin-top:-50px"
        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
      >
        <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
      </carousel>
    </section>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions, mapState } from "vuex";
import alert from "../shared/alert.vue";
import Log from "../../assets/Log";
import carousel from "vue-owl-carousel";
export default {
  name: "Login",
  components: {
    carousel,
    alert
  },
  props: {
    page: {}
  },
  data() {
    return {
      username: "",
      password: "",
      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,
      error: false
    };
  },
  computed: {
    ...mapState("authentication", ["token", "status"])
  },
  mounted() {
    this.checkUserStatus();
  },
  methods: {
    ...mapActions("authentication", ["login", "init", "logout"]),
    ToggleTrouble() {
      if (this.troubleToggle) {
        this.troubleToggle = false;
      } else this.troubleToggle = true;
    },
    Login() {
      this.login({ username: this.username, password: this.password })
        .then(() => {
          // console.log(Log.getUser());
          if (!this.page) {
            if (!Log.getUser().loginPasswordChange) {
              this.$router.push("/");
            } else {
              this.$router.push("/user/changePasswordOnLogin");
            }
          } else {
            this.$router.push(this.page.pageRedirect);
          }
        })
        .catch(err => {
          this.error = true;
        });
    },
    checkUserStatus() {
      if (Log.isLoggedIn()) {
        this.logout();
        this.$router.go();
      }
    },
    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = "text";
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = "password";
    },
    SendMail() {},
    routerGoTo(goTo) {
      this.$router.push(goTo);
    }
  }
};
</script>

<style lang="scss" scoped></style>