<template> <div class="m-sign-up"> <div class="m-sign-up__text-number"> {{ getFullName && getFullName.length ? getFullName : getMobile }} </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" autocomplete="off" /> </div> <div v-if="submitStatus === 'ERROR'"> <div class="error" v-if="!$v.code.required"> {{ $t("IsRequired") }} </div> </div> <div class="form-group"> کد تایید را دریافت نکرده اید؟ <button :disabled="!enableResendCode" @click.prevent="getcode" title="ارسال مجدد" class="resend-code-btn" type="button" > <span ref="countdown" id="countdown"></span> </button> </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" autocomplete="off" /> </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" autocomplete="off" /> </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="doActivate">ثبت کد</button> </div> </div> </div> </template> <script> import authMixin from "~/mixins/authMixin"; import { required, minLength, sameAs, } from "vuelidate/lib/validators"; import { mapState, mapActions } from "pinia"; import { useCommonStore } from "~/stores/commonStore"; import { useAuthStore } from "~/stores/authStore"; export default { validations: { password: { required, minLength: minLength(6), }, repassword: { required, sameAsPassword: sameAs("password"), }, code: { required, }, }, // props: ["usernameemail"], mixins: [authMixin], mounted() { this.countDownTimer(); this.getcode(); }, beforeDestroy() { clearInterval(this.downloadTimer); }, data() { return { code: "", password: "", repassword: "", downloadTimer: undefined, enableResendCode: false, }; }, computed: { ...mapState(useAuthStore,["getResetPasswordState", "getFullName", "getMobile"]), }, methods: { resetErrors() { if (this.$v.$invalid) this.$v.$reset(); }, doActivate() { this.$v.$touch(); const vm = this; if (this.$v.$invalid) { this.submitStatus = "ERROR"; } else { if (this.loading) return false; this.loading = true; this.resetPassword({ username: this.getMobile, 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; }); } }, getcode() { const vm = this; this.$v.$touch(); vm.enableResendCode = false; if (this.$v.$invalid) { this.submitStatus = "ERROR"; } else { if (this.loading) return; this.loading = true; this.submitStatus = "PENDING"; this.phoneLogin({ mobile: this.getMobile, }) .then(() => { this.submitStatus = "OK"; }) .finally(() => { this.loading = false; }); } }, countDownTimer(timeInSecond = 120) { const vm = this; var timeleft = timeInSecond; var downloadTimer = setInterval(function() { if (timeleft <= 0) { clearInterval(downloadTimer); vm.$refs.countdown.innerHTML = "ارسال مجدد"; vm.enableResendCode = true; } else { vm.$refs.countdown.innerHTML = timeleft; } timeleft -= 1; }, 1000); }, }, }; </script> <style lang="scss"> .resend-code-btn { height: 2.5em !important; min-width: auto !important; font-size: 1.2rem !important; color: #00b6e3 !important; margin: 0 !important; display: inline-block !important; text-align: center !important; border: none !important; background:unset !important; &[disabled] { min-width: 4em !important; } } </style>