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

        <div class="grid forgotpassword-wrap">
          <img
            :src="logo_path+'Logo.svg'"
            id="logo"
            class="login-logo"
          />
          <p>Please provide the email address associated with your account</p>

          <form
            @submit.prevent="resetPassword"
            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="email"
                class="form__input"
                placeholder="Email"
                required
              />
            </div>

            <div class="form__field login-footer">
              <div class="d-1of2">
                <p class="text--center gray align-link-center">
                  <router-link to="/login" class="gray"
                    >Back to Login</router-link
                  >
                </p>
              </div>

              <div class="d-1of2">
                <button type="submit">Reset</button>
              </div>
            </div>

            <br clear="both" />

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

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

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

export default {
  mixins: [api],

  data() {
    return {
      email: "",
      isResetLoading: false,
      resetPasswordSuccess: false,
      resetFail: false,
      resetError: "",
      errors: [],
      password_message: "",
      logo_path: "",
    };
  },
  mounted() {
    this.logo_path = wpApiSettings.assets_url;
    document.body.classList.add("white-body");
  },
  methods: {
    async resetPassword() {
      this.isResetLoading = true;

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

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

      if (response.status == 404) {
        this.resetError = response.data.message;
        this.resetFail = true;
        this.isResetLoading = false;
      }

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