<template>
  <form @submit.prevent="validateBeforeSubmit">
    <title-page :propsTitle="'Réinitialisation du mot de passe'"></title-page>

    <div v-if="afficher" class="columns is-mobile is-centered">
      <div class="column is-half tailleFormInscription">
        <label class="label">Nouveau mot de passe</label>
        <div class="field">
          <div class="control is-expanded has-icons-left has-icons-right">
            <input
              name="password"
              class="input"
              v-model="nouveauMDP"
              v-validate="'required'"
              :class="{'input': true, 'is-danger': errors.has('password') }"
              type="password"
              placeholder="**********"
              ref="password"
            >
            <span class="icon is-small is-left">
              <i class="fas fa-lock"></i>
            </span>
            <span class="icon is-small is-right is-hidden">
              <i v-show="errors.has('password')" class="fa fa-warning"></i>
            </span>
          </div>
          <span
            v-show="errors.has('password')"
            class="help is-danger"
          >{{ errors.first('password') }}</span>
        </div>

        <div class="field">
          <label class="label">Confirmation du mot de passe</label>
          <div class="control is-expanded has-icons-left has-icons-right">
            <input
              name="password_confirmation"
              v-validate="'required|confirmed:password'"
              type="password"
              :class="{'input': true, 'is-danger': errors.has('password_confirmation')}"
              placeholder="**********"
              data-vv-as="password"
            >
            <span class="icon is-small is-left">
              <i class="fas fa-lock"></i>
            </span>
            <span class="icon is-small is-right is-hidden">
              <i v-show="errors.has('password_confirmation')" class="fa fa-warning"></i>
            </span>
          </div>
          <span
            v-show="errors.has('password_confirmation')"
            class="help is-danger"
          >{{ errors.first('password_confirmation') }}</span>
        </div>

        <div class="field">
          <div class="field is-grouped is-narrow">
            <div class="control">
              <button class="button is-link" type="submit">Soumettre</button>
            </div>
            <div class="control">
              <router-link to="/" class="button is-text">Annuler</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <popup
      :propsPopupHide="popupHide"
      :propsMessageClass="popupMessageClass"
      :propsMessageSuccessError="popupMessageContent"
    ></popup>
  </form>
</template>

<script>
import TitlePage from "@/components/static_rendering/TitrePage";
import axios from "axios";
import PopUpSavedCornerRightDown from "@/components/reactivity/PopUpSavedCornerRightDown.vue";

export default {
  name: "ChangePassword",
  components: {
    TitlePage,
    popup: PopUpSavedCornerRightDown
  },

  data() {
    return {
      user: localStorage.getItem("user"),
      key: "",
      userId: "",
      nouveauMDP: "",
      confirmPassword: "",
      afficher: false,
      popupHide: true,
      popupMessageClass: "",
      popupMessageContent: {}
    };
  },

  methods: {
    reinitliaserPassword() {
      console.log("is clicked");
      axios({
        method: "PUT",
        url: "api/Users/ReinitialiserMotDePasse/",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: {
          Id: this.userId,
          NouveauMDP: this.nouveauMDP,
          keyReinilisationMDP: this.key
        }
      })
        .then(response => {
          console.log(response);
          this.updateDBPopup("is-success", null);
          setTimeout(this.redirect, 2500);
        })
        .catch(error => {
          console.log(error);
          this.updateDBPopup("is-danger", {
            warning: "Échec de la réinitialisation du mot de passe"
          });
          setTimeout(this.closePopup, 2500);
        });
    },

    validateBeforeSubmit() {
      this.$validator.validateAll().then(result => {
        if (result) {
          console.log("is clicked");
          axios({
            method: "PUT",
            url: "api/Users/ReinitialiserMotDePasse/",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {
              Id: this.userId,
              NouveauMDP: this.nouveauMDP,
              keyReinilisationMDP: this.key
            }
          })
            .then(response => {
              console.log(response);
              this.updateDBPopup("is-success", null);
              setTimeout(this.redirect, 2500);
            })
            .catch(error => {
              console.log(error);
              this.updateDBPopup("is-danger", {
                warning: "Échec de la réinitialisation du mot de passe"
              });
              setTimeout(this.closePopup, 2500);
            });

          // eslint-disable-next-line
          return;
        }
        alert("Corrigez les erreurs!");
      });
    },

    updateDBPopup(stringClass, objectMessage) {
      this.popupHide = false;
      this.popupMessageClass = stringClass;
      this.popupMessageContent = objectMessage;
    },
    redirect() {
      this.$router.push("/");
    },
    closePopup() {
      this.popupHide = true;
    },
    VerifyKey() {
      var url_string = window.location.href;
      let url = new URL(url_string);
      this.userId = url.searchParams.get("userid");
      this.key = url.searchParams.get("key");
      console.log(this.userId);
      console.log(this.key);

      axios
        .get(`apiv2/users/VerifyKey/${this.key}/${this.userId}`)
        .then(responseUser => {
          console.log("marche");
        })
        .then(() => {
          this.afficher = true;
        })
        .catch(() => {
          console.log("erreur");
        });
    }
  },
  created() {
    console.log("created called.");
    this.VerifyKey();
  }
};
</script>

<style scoped>
</style>