asan-service/pages/auth/resetpass/index.vue

<template>
  <div class="user-auth reset-pass page">
    <div class="formBox">
      <div class="side">
        <p v-if="emailMode">
          <span>برای بازیابی کلمه عبور با استفاده از شماره موبایل روی دکمه زیر کلیک کنید </span>
        </p>
        <p v-else>
          <span>برای بازیابی کلمه عبور با استفاده از آدرس ایمیل روی دکمه زیر کلیک کنید </span>
        </p>
        <button class="btn btn-secondary" @click.prevent="changeForm">
          {{ emailMode ? 'موبایل' : 'ایمیل' }}
        </button>
      </div>

      <div class="main">
        <form v-if="emailMode" class="form form_2" @submit.prevent="send">
          <div class="title">
            <p>بازیابی کلمه عبور با ایمیل</p>
          </div>
          <div class="formRow" :class="validation.email ? 'err' : null">
            <input v-model="email" type="text" name="email" placeholder="ایمیل" />
            <p v-if="validation.email">{{ validation.email.msg }}</p>
          </div>
          <div class="btnRow">
            <el-button
              class="btn btn-secondary secondary-reverse custom-el-button"
              :loading="waiting"
              :disabled="!email.length"
              native-type="submit"
              >ارسال لینک بازیابی</el-button
            >
          </div>
        </form>

        <form v-else class="form form_2" @submit.prevent="send">
          <div class="title">
            <p>بازیابی کلمه عبور با شماره موبایل</p>
          </div>
          <div class="formRow" :class="validation.mobile ? 'err' : null">
            <input v-model="mobile" type="text" name="mobile" placeholder="شماره موبایل" />
            <p v-if="validation.mobile">{{ validation.mobile.msg }}</p>
          </div>
          <div class="btnRow">
            <el-button
              class="btn btn-secondary secondary-reverse custom-el-button"
              :loading="waiting"
              :disabled="!mobile.length"
              native-type="submit"
              >ارسال لینک بازیابی</el-button
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResetPassPage',
  layout: 'user-auth',
  data() {
    return {
      emailMode: true,
      switchTL: null,
      mobile: '',
      email: '',
      waiting: false,
      validation: {}
    }
  },
  mounted() {
    // switch animation
    const sideWidth = $('.reset-pass .formBox .side').width()
    const sideHeight = $('.reset-pass .formBox .side').height()
    const boxHeight = $('.reset-pass .formBox').height()
    const _du = 0.7
    const _ease = 'power4.inOut'
    this.switchTL = this.$gsap
      .timeline({ paused: true })
      .to($('.reset-pass .formBox'), {
        height: boxHeight,
        duration: _du,
        ease: _ease
      })
      .to(
        $('.reset-pass .formBox .side'),
        {
          width: '100%',
          height: '100%',
          duration: _du,
          ease: _ease,
          onComplete: () => {
            this.emailMode = !this.emailMode
          }
        },
        0
      )
      .to(
        $('.reset-pass .formBox .main'),
        {
          marginRight: 0,
          marginLeft: () => {
            return window.innerWidth > 992 ? sideWidth : 0
          },
          duration: _du,
          ease: _ease
        },
        0
      )
      .to($('.reset-pass .formBox .side'), { right: 'auto', left: 0, duration: 0 })
      .to($('.reset-pass .formBox .side'), {
        width: () => {
          return window.innerWidth > 992 ? sideWidth : '100%'
        },
        height: () => {
          return window.innerWidth > 992 ? '100%' : sideHeight
        },
        duration: _du,
        ease: _ease,
        onReverseComplete: () => {
          this.emailMode = !this.emailMode
        }
      })

    const windowWidth = window.innerWidth
    $(window).resize(() => {
      if (window.innerWidth !== windowWidth) {
        if (window.innerWidth < 992) window.location.reload()
      }
    })
  },
  methods: {
    changeForm() {
      this.validation = {}
      this.waiting = false
      this.mobile = ''
      this.email = ''
      this.emailMode ? this.switchTL.play() : this.switchTL.reverse()
    },
    send() {
      if (this.waiting) {
        return this.$message({
          type: 'warning',
          message: 'لطفا منتظر بمانید'
        })
      }
      this.waiting = true
      this.validation = {}
      const data = { type: this.emailMode ? 'email' : 'mobile' }
      if (this.emailMode) data.email = this.email
      else data.mobile = this.mobile
      this.$axios
        .post('/api/auth/reset-pass-token', data)
        .then(res => {
          this.waiting = false
          this.mobile = ''
          this.email = ''
          const title = 'عملیات موفق'
          this.$alert(res.data.message, title, {
            confirmButtonText: 'بستن'
          })
        })
        .catch(e => {
          this.waiting = false
          if (e.response.status === 422) this.validation = e.response.data.validation
          else {
            const title = 'خطا'
            this.$alert(e.response.data.message, title, {
              type: 'error',
              confirmButtonText: 'بستن'
            })
          }
        })
    }
  }
}
</script>