base_ui/components/auth/auth-modals/ResetPassModal.vue

<template>
  <div class="m-sign-up">
    <div class="m-sign-up__text-number">{{ usernameemail }}</div>
    <div class="m-sign-up__text">کد ایمیل شده را وارد کنید</div>
    <div class="m-sign-up__form">
      <div class="m-sign-up__form-row m-sign-up__simple-input">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.code.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            v-model.trim="$v.code.$model"
            type="text"
            placeholder="کد ارسالی"
            name=""
            id=""
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.code.required">
            {{ $t("IsRequired") }}
          </div>
        </div>
      </div>
      <div class="m-sign-up__form-row m-sign-up__simple-input">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.password.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            type="password"
            name=""
            id=""
            v-model.trim="$v.password.$model"
            placeholder="رمز عبور"
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.password.required">
            {{ $t("IsRequired") }}
          </div>
          <div class="error" v-if="!$v.password.minLength">
            Password must have at least
            {{ $v.password.$params.minLength.min }} letters.
          </div>
        </div>
      </div>
      <div class="m-sign-up__form-row m-sign-up__simple-input">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.repassword.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            type="password"
            name=""
            id=""
            v-model.trim="$v.repassword.$model"
            placeholder="تکرار رمز عبور"
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.repassword.required">
            {{ $t("IsRequired") }}
          </div>
          <div class="error" v-if="!$v.repassword.sameAsPassword">
            رمزهای عبور باید یکسان باشند.
          </div>
        </div>
      </div>
      <div class="m-sign-up__button-container">
        <a
          href="#login"
          @click.prevent="$emit('set-component', { name: 'login' })"
          >بازگشت</a
        >
        <button v-on:click="authBase('doActivate','modal')">ثبت کد</button>
      </div>
    </div>
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";
import {
  required,
  minLength,
  maxLength,
  between,
  sameAs,
} from "vuelidate/lib/validators";

export default {
  validations: {
    password: {
      required,
      minLength: minLength(6),
    },
    repassword: {
      required,
      sameAsPassword: sameAs("password"),
    },
    code: {
      required,
    },
  },
  props: ["usernameemail"],
  mixins: [authMixin],
  data() {
    return {
      code: "",
      password: "",
      repassword: "",
    };
  },
  methods: {
    doActivate() {
      var vm = this;
      this.$v.$touch();

      if (this.$v.$invalid) {
        this.submitStatus = "ERROR";
      } else {
        if (this.loading) return false;
        this.loading = true;

        this.resetPassword({
          username: this.usernameemail,
          activationcode: this.code,
          newpass: this.password,
        })
          .then((res) => {
            mySwalToast({
              title: res.message,
              icon: "success",
            });

            this.submitStatus = "OK";
      this.$emit('set-component',{name:'login'})
            
            // this.$router.push({
            //   name: "login",
            // });
          })
          .catch((err) => {
            mySwalToast({
              title: err.message,
              icon: "error",
            });
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
  },
};
</script>