https://www.ry-elerelay.com/assets/js/unit/findpwd.js

1class ScriptFindpwd extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$form = this.$dom.querySelector(`form`)
6    this.$step1 = this.$dom.querySelector('.unit-findpwd__step-1')
7    this.$step2 = this.$dom.querySelector('.unit-findpwd__step-2')
8    this.$step3 = this.$dom.querySelector('.unit-findpwd__step-3')
9    this.$email = this.$dom.querySelector('.unit-findpwd__email')
10    this.$emailSite = this.$dom.querySelector('.unit-findpwd__email-site')
11    this.$code = this.$dom.querySelector('.unit-findpwd__code')
12    this.$codeSubmit = this.$dom.querySelector('.unit-findpwd__code-submit')
13    this.$password = this.$dom.querySelector(`.unit-findpwd__password`)
14    this.$password2 = this.$dom.querySelector(`.unit-findpwd__password2`)
15    this.$step2Error = this.$dom.querySelector('.unit-findpwd__step-2-error')
16    this.$emailGroup = this.$dom.querySelector('.unit-findpwd__email-group')
17    this.$submitContinue = this.$dom.querySelector('.unit-findpwd__group-continue')
18    this.$reminderLink = this.$dom.querySelector('.unit-findpwd__step-2-reminder_link')
19    this.step = 1
20    this.email = ''
21    this.verifyToken = ''
22    this.codeErrorNum = 0
23  }
24  /** 初始化，支持异步 */
25  init() {
26    this.setStep(1)
27    this.bindCodeSubmitEvent()
28    this.bindFormSubmitEvent()
29  }
30
31  bindFormSubmitEvent() {
32    this.$form.onsubmit = event => {
33      event.preventDefault()
34      this.submit()
35    }
36  }
37
38  /** 绑定验证码重发事件 */
39  bindCodeSubmitEvent() {
40
41    this.$codeSubmit.addEventListener('click', () => {
42      this.retryCode()
43    })
44
45    this.$reminderLink.addEventListener('click', async () => {
46      const isSendCode = await this.retryCode()
47      if (isSendCode) new Message().success(this.utilts.$t('The verification code has been sent'))
48    })
49  }
50
51  /** 提交 */
52  async submit() {
53    this.$form.classList.add('was-validated')
54    switch (this.step) {
55      case 1:
56        // 检查邮箱
57        if (!this.checkEmail()) break
58        // 调用接口查看当前邮箱是否存在
59        if (!await this.checkAccount()) {
60          new Message().warn(this.utilts.$t('Account is not exists'))
61          break
62        }
63        // 腾讯验证
64        if (!await this.utilts.checkTCaptcha('inquiry')) break
65        this.email = this.$email.value // 将输入验证成功的邮箱保存下来
66        // 发送验证码
67        this.sendVerifyCode().then(res => {
68          this.$code.value = ''
69          // 下一步
70          this.setStep(2)
71        })
72        break
73      case 2:
74        // 检查验证码
75        this.verifyToken = await this.checkCodeSync()
76        if (!this.verifyToken) { break }
77        this.$password.value = ''
78        this.$password2.value = ''
79        // 下一步
80        this.setStep(3)
81        break
82      case 3:
83        // 确认密码
84        if (!this.checkPassWord()) {
85          break
86        }
87        // // 修改密码 
88        if (!await this.postResetPassWord()) break
89        // 去登录
90        this.gotoLogin()
91        break
92    }
93  }
94
95  checkEmail() {
96    const emailRexp = /[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)*@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*(\.[a-zA-Z]{2,})$/
97    if (!emailRexp.test(this.$email.value)) {
98      new Message().warn(this.utilts.$t('email format does not match'))
99      return false
100    } else {
101      return true
102    }
103  }
104  checkCodeSync() {
105    return new Promise(async (resolve, reject) => {
106      if (!this.$code.value) {
107        new Message().warn(this.utilts.$t('Please enter the verification code'))
108        resolve(false)
109      } else {
110        if (this.codeErrorNum >= 3) {
111          if (!await this.utilts.checkTCaptcha('inquiry')) {
112            resolve(false)
113            return
114          }
115          this.codeErrorNum = 0
116        }
117        this.requestCheckCode()
118          .then(token => resolve(token))
119          .catch(_err => resolve(false))
120      }
121    })
122  }
123  checkPassWord() {
124    const reg = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/
125    if (!reg.test(this.$password.value)) {
126      new Message().warn(this.utilts.$t('Password contains at least numbers and letters length should be 6-20'))
127      return false
128    } else if (this.$password.value !== this.$password2.value) {
129      new Message().warn(this.utilts.$t('Confirm password is inconsistent with new password'))
130      return false
131    }
132    return this.$password.checkValidity() && reg.test(this.$password.value) &&
133      this.$password.value === this.$password2.value
134  }
135
136  setStep(value) {
137    switch (value) {
138      case 1:
139        // 到步骤1，更新视图：显示邮箱
140        this.$step2.classList.remove('show')
141        this.$step3.classList.remove('show')
142        this.$step1.classList.add('show')
143        break
144      case 2:
145        // 到步骤2，更新视图：验证码
146        this.$step1.classList.remove('show')
147        this.$step3.classList.remove('show')
148        this.$step2.classList.add('show')
149        this.$emailSite.innerHTML = this.$email.value
150        break
151      case 3:
152        // 到步骤3，更新视图：新密码
153        this.$step1.classList.remove('show')
154        this.$step2.classList.remove('show')
155        this.$step3.classList.add('show')
156        break
157    }
158    this.step = value
159    this.$form.classList.remove('was-validated')
160  }
161
162  /** 去登陆 */
163  gotoLogin() {
164    new Message().success(this.utilts.$t('Update password success'))
165    window.location.href = globalThis.Server.getRinseHref('login.html', window.app.info.site)
166  }
167
168
169  /** 1.判断会员账号是否存在 */
170  checkAccount() {
171    return this._getApi('/member/exists-by-account', { account: this.$email.value, site_id: window.app.info.site.site_id })
172  }
173
174  /** 2.发送邮件验证码 */
175  sendVerifyCode() {
176    return new Promise((resolve, _reject) => {
177      this._getApi('/member-verify/send-code', { email: this.email })
178        .then(res => resolve(res))
179        .catch(err => {
180          new Message().error(err)
181        })
182    })
183  }
184
185  /** 3.验证邮件验证码 */
186  requestCheckCode() {
187    return new Promise((resolve, _reject) => {
188      const params = { email: this.email, code: this.$code.value }
189      this._getApi('/member-verify/check-code', params, 'POST')
190        .then(res => {
191          // 验证码错误
192          if (res.code === 120) {
193            this.codeErrorNum += 1
194            new Message().warn(this.utilts.$t(res.msg))
195            resolve(null)
196          }
197          // 验证码过期
198          else if (res.code === 110) {
199            new Message().warn(this.utilts.$t(res.msg))
200            this._showReSendCode()
201            resolve(null)
202          }
203          else resolve(res.verifyToken)
204        })
205        .catch(_err => {
206          this._showReSendCode()
207        })
208    })
209  }
210
211  /** 4.验证码校验后设置新密码 */
212  postResetPassWord() {
213    const password = this.utilts.encodeBase64(this.$password.value)
214    const confirm_password = this.utilts.encodeBase64(this.$password2.value)
215    const params = { email: this.email, verifyToken: this.verifyToken, password, confirm_password }
216    return this._getApi('/member-verify/set-password', params, 'POST')
217  }
218
219  /** 再次发送验证码 */
220  retryCode() {
221    return new Promise(async (resolve, _reject) => {
222      if (await this.utilts.checkTCaptcha('inquiry')) {
223        this.sendVerifyCode().then(_res => {
224          resolve(true)
225          this.$form.classList.remove('was-validated')
226          this.$code.value = ''
227          this.$step2Error.classList.add('d-none') // 隐藏再次发送
228          this.$emailGroup.classList.remove('d-none') // 显示输入邮箱验证码
229          this.$submitContinue.classList.remove('d-none') // 显示继续
230          this.$reminderLink.classList.remove('d-none') // 显示未收到验证码发送
231        })
232      } else resolve(false)
233    })
234  }
235
236  _getApi(url, params, method = 'GET') {
237    return new Promise((resolve, reject) => {
238      this.utilts.request({ url, method, params })
239        .then(res => {
240          // 正确数据
241          if (res.code === 0) resolve(res.data)
242        }).catch(err => {
243          //120验证码错误 110验证码过期
244          if (err.code === 120 || err.code === 110) resolve(err)
245          else reject(err.msg)
246        })
247    })
248  }
249
250  /** 显示验证码过期再次发送验证码 */
251  _showReSendCode() {
252    this.$step2Error.classList.remove('d-none') // 显示再次发送隐藏
253    this.$emailGroup.classList.add('d-none') // 隐藏输入邮箱验证码
254    this.$submitContinue.classList.add('d-none')  // 隐藏输入邮箱验证码
255    this.$reminderLink.classList.add('d-none') // 隐藏未收到验证码发送
256  }
257}
258
259