<template>
  <div class="sign-up">
    <div class="sign-up__title">خوش آمدید</div>

    <div class="sign-up__form">
      <div class="sign-up__form-row sign-up__number">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.usernameemail.$error }"
        >
          <input
            class="form-control"
            type="tel"
            name=""
            id=""
            v-model.trim="$v.usernameemail.$model"
            placeholder="نام کاربری یا ایمیل"
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.usernameemail.required">
            {{ $t("IsRequired") }}
          </div>
        </div>
      </div>
      <div class="sign-up__btn-container">
        <RouterLink tag="a" :to="{ path: '/login' }">بازگشت</RouterLink>
        <button v-on:click="getcode()">بازیابی کلمه عبور</button>
      </div>
    </div>
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";

import { required, minLength, maxLength, between } from "@vuelidate/validators";

export default {
  name: "forget",
  mixins: [authMixin],
  validations: {
    usernameemail: {
      required,
    },
  },
  data() {
    return {
      usernameemail: "",
    };
  },
  methods: {
    getcode() {
      var vm = this;
      this.$v.$touch();

      if (this.$v.$invalid) {
        this.submitStatus = "ERROR";
      } else {
        this.submitStatus = "PENDING";

        this.forget({
          username: vm.usernameemail,
          title: "تحریر",
        })
          .then((res) => {
            this.submitStatus = "OK";

            mySwalToast({
              title: res.message,
              icon: "success",
            });

            this.$router.push({
              name: "resetpass",
              params: { usernameemail: vm.usernameemail },
            });
          })
          .catch((error) => {
            mySwalToast({
              title: "خطا",
              text: error.message,
              icon: "error",
            });
          });
      }
    },
  },
};
</script>