somewhere

2023-08-17 13:05:51 +03:30
parent 30c7eb0e7b
commit 53843207cc
429 changed files with 117489 additions and 1 deletions
@@ -0,0 +1,179 @@
+<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>