RestaurantSite/src/components/accounts/login.vue

<template>
  <div class="login-page">
    <div class="form col-md-12">
      <div>
        <h4>Login</h4>
      </div>
      <div v-if="hasError">
        <alert :text="errorMessage" :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="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                placeholder="Email Address"
                v-model="auth.emailAddress"
                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="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                :type="isPasswordShown"
                v-model="auth.password"
                id="password"
                placeholder="Password"
                value
              />
              <div class="input-group-append">
                <span class="input-group-text" @click="togglePassword()">
                  <eva-icon v-if="showPassword" name="eye-off-outline" fill="#24aae1"></eva-icon>
                  <eva-icon v-else name="eye-outline" fill="#24aae1"></eva-icon>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button @click="Login()" class="btn btn-b-n" type="button">Login</button>
    </div>
  </div>
</template>

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

export default {
  name: "Login",
  components: {
    alert
  },
  data() {
    return {
      isPasswordShown: "password",
      showPassword: false,
      hasError: false,
      errorMessage: ""
    };
  },
  methods: {
    ...mapActions("authentiaction", [
      "getAuthentication",
      "checkAuthentication"
    ]),
    Login() {
      this.checkAuthentication(this.auth).then(() => {
        //console.log(JSON.stringify(this.$store.state.authentiaction.result));
        // if (this.$store.state.auth.result === "Access Granted") {
        //   console.log(JSON.stringify(this.$store.state.auth));
        //   this.$router.push("/");
        // } else {
        //   console.log(JSON.stringify(this.auth));
        //   this.hasError = true;
        //   this.errorMessage = this.$store.state.auth.result;
        // }
        if (this.auth.result === "Access Granted") {
          alert("Yes");
        } else {
          alert("No");
        }
      });
    },
    togglePassword() {
      if (this.showPassword) {
        this.isPasswordShown = "password";
      } else {
        this.isPasswordShown = "text";
      }

      this.showPassword = !this.showPassword;
    }
  },
  computed: {
    ...mapState("authentiaction", ["auth", "result"])
  },
  mounted() {
    this.getAuthentication();
  },
  watch: {
    auth(value) {
      return value;
    }
  }
};
</script>