<template>
  <div>
    <div class="loginreg">
      <div class="wrap">
        <br clear="both" />

        <div class="grid">
          <img
            :src="logo_path+'Logo.svg'"
            id="logo"
            class="login-logo"
          />

          <form @submit.prevent="login" autocomplete="off" class="form login">
            <div class="form__field">
              <label for="login__username">
                <i class="far fa-user icon"></i>
                <span class="hidden">Email</span>
              </label>

              <input
                id="login__username"
                type="text"
                v-model="loginvar.email"
                class="form__input"
                placeholder="Email"
                required
                v-on:keyup.enter="login"
              />
            </div>

            <div class="form__field">
              <label for="login__password"
                ><i class="far fa-lock icon"></i>
                <span class="hidden">Password</span>
              </label>

              <input
                id="login__password"
                type="password"
                v-model="loginvar.password"
                class="form__input"
                placeholder="Password"
                required
                v-on:keyup.enter="login"
              />

              <router-link to="/forgot-password" class="forgotpassword-btn"
                >Forgot Password?</router-link
              >
            </div>

            <div class="form__field login-footer">
              <div class="d-1of2">
                <p class="text--center gray align-link-center">
                  <router-link to="/register" class="gray"
                    >Create an account</router-link
                  >
                </p>
              </div>

              <div class="d-1of2">
                <Button :ButtonType="'submit'" :buttonName="'Login'" :isLoading="isLoginLoading"></Button>
              </div>
            </div>

            <br clear="both" />

            <p v-if="loginError.length > 0" class="text--center red-color">
              {{ loginError }}
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Button from "../../includes/Button";
import api from "../../../mixins/api";

export default {
  mixins: [api],
  components: {
    Button,
  },
  data() {
    return {
      register: {
        name: "",
        email: "",
        title: "title",
        company_name: "",
        password: "",
        password_confirmation: "",
      },
      loginvar: {
        email: "",
        password: "",
      },
      errors: [],
      loginError: "",
      registerSuccess: false,
      isRegisterLoading: false,
      isLoginLoading: false,
      registerFail: false,
      loginSuccess: false,
      loginFail: false,
      logo_path: "",
    };
  },
  mounted() {
    this.logo_path = wpApiSettings.assets_url;
    document.body.classList.add("white-body");
  },
  methods: {
    async login() {
      this.isLoginLoading = true;

      const data = {
        email: this.loginvar.email,
        password: this.loginvar.password,
      };
      const response = await this.api(
        "post",
        window.apipath + "/users/authenticate",
         data,
        0
      );

      if (response.status == 200) {
        this.loginSuccess = true;
        this.loginFail = false;
        this.isLoginLoading = false;
        this.updateToken(response.data);
        window.bearer_token = response.data.token;
      }

      if (response.status == 403) {
        this.loginError = response.data.message;
        this.registerFail = true;
        this.isLoginLoading = false;
      }
    },
    async updateToken(token_data) {
      const data = {
        token: token_data.token,
      };

      const response = await this.api(
        "post",
        wpApiSettings.root + "enstract/v1/updateToken",
        data,
        0
      );

      if (response.status == 200) {
        this.registerSuccess = false;
        this.registerFail = false;

        if (token_data.onboarded == 0) {
          this.$router.push({ name: "enstract.onboarding" });
        } else {
          this.$router.push({ name: "dashboard.settings" }).catch(() => {});
        }

      }
    },
  },
  destroyed() {
    document.body.classList.remove("white-body");
  },
};
</script>
