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

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

          <p v-if="!resetPasswordSuccess">Enter your new password below</p>

          <form
            @submit.prevent="resetPassword"
            autocomplete="off"
            class="form login"
            v-if="!resetPasswordSuccess"
          >
            <div class="form__field">
              <label for="login__username">
                <i class="fa fa-lock icon"></i>
                <span class="hidden">Email</span>
              </label>

              <input
                id="login__username"
                type="password"
                v-model="password"
                class="form__input"
                placeholder="Password"
                required
              />
            </div>

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

              <input
                id="login__username"
                type="password"
                v-model="confirm_password"
                class="form__input"
                placeholder="Confirm Password"
                required
              />
            </div>

            <div class="form__field login-footer">
              <div class="d-all">
                <button type="submit">Reset Password</button>
              </div>
            </div>
          </form>

          <br clear="both" />

          <p
            v-if="password_message.length > 0"
            class="text--center green-color"
          >
            {{ password_message }} <br />
              <div class="d-all">
                <router-link to="/login">Login</router-link>
              </div>
          </p>

          <p v-if="resetError.length > 0" class="text--center red-color">
            {{ resetError }}
          </p>

          <p
            v-if="errors"
            v-for="error in errors"
            v-html="error"
            class="text--center red-color"
          ></p>
        </div>

        <div v-else class="grid forgotpassword-wrap">
          <img
            :src="logo_path+'Logo.svg'"
            id="logo"
            class="login-logo"
          />
          <p>Is appears this token has either expired or not valid.</p>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  mixins: [api],

  data() {
    return {
      password: "",
      confirm_password: "",
      isResetLoading: false,
      resetPasswordSuccess: false,
      resetFail: false,
      resetError: "",
      errors: [],
      password_message: "",
      logo_path: "",
      isTokenValid: false,
    };
  },
  mounted() {
    this.logo_path = wpApiSettings.assets_url;
    this.fetchToken();
    document.body.classList.add("white-body");
    this.$route;
  },
  methods: {
    async fetchToken() {
      const data = {
        token: this.$route.params.token,
      };

      const response = await this.api(
        "post",
        window.apipath + "/users/fetch/token",
        data,
        0
      );

      if (response.status == 200) {
        this.isTokenValid = true;
      }

      if (response.status == 403) {
        this.resetError = response.data.message;
        this.isTokenValid = false;
      }
    },
    async resetPassword() {
      this.isResetLoading = true;

      const data = {
        token: this.$route.params.token,
        password: this.password,
        password_confirmation: this.confirm_password,
      };

      const response = await this.api(
        "post",
        window.apipath + "/users/reset-password",
        data,
        0
      );

      if (response.status == 200) {
        this.password_message = response.data.message;
        this.resetPasswordSuccess = true;
        this.isResetLoading = false;
        this.resetFail = false;
        this.resetError = "";
      }

      if (response.status == 422) {
        this.errors = response.data.message;
        this.resetFail = true;
        this.isResetLoading = false;
      }
      if (response.status == 403) {
        this.resetError = response.data.message;
        this.isTokenValid = false;
      }
    },
    destroyed() {
      document.body.classList.remove("white-body");
    },
  },
};
</script>
