asan-service/pages/account/verify/index.vue

<template>
  <user-dashboard-container page-class="verify" panel-title="تایید اطلاعات">
    <el-alert
      v-if="!user.confirmed"
      title="ثبت نام شما هنوز نهایی نشده است. چنانچه تا 24 ساعت پس از زمان ثبت نام اولیه اطلاعات خود را تایید نکنید اطلاعات حساب شما از سیستم پاک خواهد شد."
      class="mb-3"
      type="warning"
    >
    </el-alert>
    <el-alert
      v-if="!user.email_confirmed"
      title="کاربر گرامی چنانچه قادر به مشاهده کد تایید در صندوق ورودی ایمیل خود نیستید پوشه spam را چک کنید"
      class="mb-3"
      type="warning"
    >
    </el-alert>
    <div class="row">
      <div v-if="!user.mobile_confirmed" class="col-12 col-lg">
        <form class="form form_3" style="margin-bottom: 50px" @submit.prevent="verify('mobile')">
          <div class="formRow">
            <label class="verify-labels" for="mobileConfirmationKey">
              <b>شماره: </b>
              <b>{{ user.mobile_number }}</b>
              <span @click="showModal('mobile')">(تغییر شماره)</span>
              <span v-if="mobileResendCountDown < 1" @click="resend('mobile')">(ارسال مجدد کد)</span>
              <span v-else class="countdown">( ارسال مجدد کد {{ mobileResendCountDown }} ثانیه دیگر)</span>
            </label>
            <input
              id="mobileConfirmationKey"
              v-model="mobileConfirmationKey"
              type="text"
              name="mobileConfirmationKey"
              placeholder="کد امنیتی پیامک شده"
            />
          </div>

          <div class="btnRow">
            <el-button
              class="btn btn-primary custom-el-button"
              type="primary"
              native-type="submit"
              :loading="verifyingMobile"
              :disabled="mobileConfirmationKey.length < 6"
            >
              تایید شماره
            </el-button>
          </div>
        </form>
      </div>

      <div v-if="!user.email_confirmed" class="col-12 col-lg">
        <form class="form form_3" style="margin-bottom: 50px" @submit.prevent="verify('email')">
          <div class="formRow">
            <label class="verify-labels" for="emailConfirmationKey">
              <b>ایمیل: </b>
              <b>{{ user.email }}</b>
              <span @click="showModal('email')">(تغییر ایمیل)</span>
              <span v-if="emailResendCountDown < 1" @click="resend('email')">(ارسال مجدد کد)</span>
              <span v-else class="countdown">( ارسال مجدد کد {{ emailResendCountDown }} ثانیه دیگر)</span>
            </label>
            <input
              id="emailConfirmationKey"
              v-model="emailConfirmationKey"
              type="text"
              name="emailConfirmationKey"
              placeholder="کد امنیتی ایمیل شده"
            />
          </div>

          <div class="btnRow">
            <el-button
              class="btn btn-primary custom-el-button"
              type="primary"
              native-type="submit"
              :loading="verifyingEmail"
              :disabled="emailConfirmationKey.length < 6"
            >
              تایید ایمیل
            </el-button>
          </div>
        </form>
      </div>
    </div>
    <template #body>
      <ChangeEmailModal :key="modalKey" :show="modalVisible" :type="modalType" @closeModal="closeModal" />
    </template>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountVerify',
  layout: 'user',
  data() {
    return {
      emailConfirmationKey: '',
      mobileConfirmationKey: '',
      verifyingEmail: false,
      verifyingMobile: false,
      currentTime: Date.now(),
      mobileResendTime: 0,
      emailResendTime: 0,
      modalKey: 0,
      modalType: '',
      modalVisible: false
    }
  },
  computed: {
    user() {
      return this.$auth.user
    },
    emailResendCountDown() {
      const timer = 59
      const secondsPassed = Math.floor((this.currentTime - this.emailResendTime) / 1000)
      const remainSeconds = timer - secondsPassed
      if (remainSeconds > 0) return remainSeconds
      else return 0
    },
    mobileResendCountDown() {
      const timer = 59
      const secondsPassed = Math.floor((this.currentTime - this.mobileResendTime) / 1000)
      const remainSeconds = timer - secondsPassed
      if (remainSeconds > 0) return remainSeconds
      else return 0
    }
  },
  mounted() {
    // fetch countdown data from localstorga
    this.mobileResendTime = +localStorage.getItem('mobileResendTime')
    this.emailResendTime = +localStorage.getItem('emailResendTime')

    // update current time
    setInterval(() => (this.currentTime = Date.now()), 1000)
  },
  methods: {
    showModal(type) {
      this.modalType = type
      this.modalVisible = true
    },
    closeModal() {
      this.modalType = ''
      this.modalVisible = false
      this.modalKey = Math.random()
    },
    async verify(type) {
      try {
        let res
        if (type === 'email') {
          this.verifyingEmail = true
          res = await this.$axios.put('/api/user/confirmEmail', { verificationKey: this.emailConfirmationKey })
          this.verifyingEmail = false
        }

        if (type === 'mobile') {
          this.verifyingMobile = true
          res = await this.$axios.put('/api/user/confirmMobile', { verificationKey: this.mobileConfirmationKey })
          this.verifyingMobile = false
        }

        this.$message({
          type: 'success',
          message: res.data.message
        })
        await this.$auth.fetchUser()
        if (this.user.email_confirmed && this.user.mobile_confirmed) {
          this.$router.push({ name: 'account' })
        }
      } catch (err) {
        if (err.config.url === '/api/user/confirmEmail') this.verifyingEmail = false
        if (err.config.url === '/api/user/confirmMobile') this.verifyingMobile = false
        this.$message({
          type: 'error',
          message: err.response.data.message
        })
      }
    },
    async resend(type) {
      try {
        const thisTime = Date.now()
        let res
        if (type === 'email') {
          this.emailResendTime = thisTime
          localStorage.setItem('emailResendTime', thisTime)
          res = await this.$axios.post('/api/user/resendEmailConfirmation')
        }
        if (type === 'mobile') {
          this.mobileResendTime = thisTime
          localStorage.setItem('mobileResendTime', thisTime)
          res = await this.$axios.post('/api/user/resendMobileConfirmation')
        }
        this.$message({
          type: 'success',
          message: res.data.message
        })
      } catch (err) {
        this.$message({
          type: 'error',
          message: 'مشکلی در ارسال مجدد کد تایید پیش آمده'
        })
      }
    }
  }
}
</script>