https://www.wallartsgallery.com/assets/js/unit/third-authorize.js

1class ScriptThirdAuthorize extends Script {
2  constructor(params) {
3    super(params)
4
5    this.$form = document.querySelector(`#thirdAuthorize-${this.attrId}`)
6    // 邦定账号
7    this.$success = this.$form.querySelector('.unit-third-authorize__success')
8    // 邮箱注册
9    this.$failure = this.$form.querySelector('.unit-third-authorize_failure')
10    // 获取验证码
11    this.$btnCode = this.$form.querySelector('.unit-third-authorize__code')
12    // code input
13    this.$code = this.$form.querySelector('.unit-bind-mail__code')
14    // 根据第三方回调过来的参数来判断显示邦定账号还是邮箱注册status只是例子，举体看回调参数
15    this.code = this.utilts.getParamsByUrl('code')
16    this.error = this.utilts.getParamsByUrl('error')
17    this.new_email = ''
18    this.username = this.utilts.getParamsByUrl('email')
19    this.email =''
20    this.verifyToken = ''
21    this.codeErrorNum = 0
22  }
23
24  init() {
25      this.initShow()
26      this.bindFormSubmitEvent()
27      this.bindCodeEvent()    
28  }
29
30  /** 初始化显示邦定账号或邮箱注册 */
31  initShow() {
32    if (this.username) {
33      this.$success.querySelector('[name=username]').value = this.username
34    }else{
35      this.$success.classList.add('d-none')
36      this.$failure.classList.add('d-flex')
37    } 
38    if (this.error) new Message().error(this.error.replace(/\+/g, ' ')) 
39  }
40
41  /** 表单提交事件 */
42  bindFormSubmitEvent() {
43    this.$form.onsubmit = event => {
44      event.preventDefault()
45      this.submit()
46    }
47  }
48
49  /** 获取注册验证码 */
50  bindCodeEvent() {
51    this.$btnCode.addEventListener('click', async () => {
52      const emailRexp = /[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)*@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*(\.[a-zA-Z]{2,})$/
53      const $username = this.$failure.querySelector('[name=username]')
54      if (!$username.value) {
55        new Message().warn(this.utilts.$t('Please enter the email'))
56        return false
57      }
58      // 检查邮箱
59      if (!emailRexp.test($username.value)) {
60        new Message().warn(this.utilts.$t('email format does not match'))
61        return false
62      }
63      if (!await this.utilts.checkTCaptcha('inquiry')) return
64      this.codeApi()
65    })
66    const $email = this.$failure.querySelector('[name=username]')
67    $email.addEventListener('input', (event) => {
68      event.target.value = event.target.value.toLocaleLowerCase()
69    })
70  }
71
72  submit() {
73    if (this.username) this.loginApi()
74    else this.registerApi()
75  }
76
77  /** 注册接口 */
78  async registerApi() {
79    const $username = this.$failure.querySelector('[name=username]')
80    const $code = this.$failure.querySelector('[name=password]')
81    const emailRexp = /[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)*@[a-z0-9\-]+(\.[a-z0-9\-]+)*(\.[a-z]{2,})$/
82    this.$form.classList.add('was-validated')
83    if (!$username.checkValidity() || !$code.checkValidity()) return
84    else this.$form.classList.remove('was-validated')
85    if (!emailRexp.test($username.value)) {
86      new Message().warn(Utilts.ins().$t('email format does not match'))
87      return false
88    }
89    this.verifyToken = await this.checkCodeSync()
90    if (!this.verifyToken) { return false }
91    this.$form.querySelector('[type=submit]').setAttribute('disabled', 'disabled')
92    setTimeout(() => {
93      this.$form.querySelector('[type=submit]').removeAttribute('disabled')
94    }, 3000)
95    const password = Math.random().toString(36).slice(-8)
96    this.utilts.request({
97      url: '/member/register',
98      method: 'POST',
99      params: {
100        email: $username.value,
101        password: this.utilts.encodeBase64(password),
102        confirm_password: this.utilts.encodeBase64(password),
103        site_id: window.app.info.site.site_id,
104        visitor_code: window.app.info.user.visitor_code,
105        visitor_id: window.app.info.user.visitor_id
106      },
107      message: false
108    }).then((res) => {
109      if (res.code !== 0) new Message().error(res.msg);
110      else {
111        window.LFSDK.login({username:$username.value, password:password,code:this.code}).then(r=>{
112          window.location.href = `${window.location.origin}/?type=third-login`
113        }).catch(error => new Message().error(error.msg)) 
114      }
115    }).catch(err => new Message().error(err.msg))
116  }
117
118  /** 注册接口 */
119  loginApi() {
120    const $username = this.$success.querySelector('[name=username]')
121    const $password = this.$success.querySelector('[name=password]')
122    const emailRexp = /[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)*@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*(\.[a-zA-Z]{2,})$/
123    this.$form.classList.add('was-validated')
124    if (!$password.checkValidity()) return
125    else this.$form.classList.remove('was-validated')
126    if (!emailRexp.test($username.value)) {
127      new Message().warn(Utilts.ins().$t('email format does not match'))
128      return false
129    }
130    if ($password.value.length < 6) {
131      new Message().warn(Utilts.ins().$t('Password length should be 6-20'))
132      return false
133    }
134    this.$form.querySelector('[type=submit]').setAttribute('disabled', 'disabled')
135    setTimeout(() => {
136      this.$form.querySelector('[type=submit]').removeAttribute('disabled')
137    }, 3000)
138    
139    window.LFSDK.login({username:$username.value, password:$password.value,code:this.code}).then(r=>{
140      window.location.href = `${window.location.origin}/?type=third-login`
141    }).catch(error => new Message().error(error.msg)) 
142    
143  }
144
145  /** 获取验证码接口 */
146  async codeApi() {
147    const $username = this.$failure.querySelector('[name=username]')
148    this.email = $username.value // 将输入验证成功的邮箱保存下来
149    this.$btnCode.setAttribute('disabled', 'disabled')
150    // 发送验证码
151    this.sendVerifyCode().then(res => {
152      this.$btnCode.removeAttribute('disabled')
153    })
154  }
155
156  /** 2.发送邮件验证码 */
157  sendVerifyCode() {
158    return new Promise((resolve, _reject) => {
159      this._getApi('/member-verify/send-code', { email: this.email, verify_type: 2 })
160        .then(res => resolve(res))
161        .catch(err => {
162          new Message().error(err)
163          this.$btnCode.removeAttribute('disabled')
164        })
165    })
166  }
167
168  /** 3.验证邮件验证码 */
169  requestCheckCode() {
170    return new Promise((resolve, _reject) => {
171      const params = { email: this.$failure.querySelector('[name=username]').value, code: this.$code.value, verify_type: 2 }
172      this._getCodeApi('/member-verify/check-code', params, 'POST')
173        .then(res => {
174          // 验证码错误
175          if (res.code === 120) {
176            this.codeErrorNum += 1
177            new Message().error(this.utilts.$t(res.msg))
178            resolve(null)
179          }
180          else if (res.code === 0) resolve(res.data.verifyToken)
181          else {
182            new Message().error(this.utilts.$t(res.msg))
183            resolve(null)
184          }
185        })
186        .catch(_err => {
187          console.log('_err_err', _err);
188        })
189    })
190  }
191
192  checkCodeSync() {
193    return new Promise(async (resolve, reject) => {
194      if (!this.$code.value) {
195        new Message().warn(this.utilts.$t('Please enter the verification code'))
196        resolve(false)
197      } else {
198        if (this.codeErrorNum >= 3) {
199          if (!await this.utilts.checkTCaptcha('inquiry')) {
200            resolve(false)
201            return
202          }
203          this.codeErrorNum = 0
204        }
205        this.requestCheckCode()
206          .then(token => {
207            resolve(token)
208          })
209          .catch(_err => resolve(false))
210      }
211    })
212  }
213
214  _getApi(url, params, method = 'GET') {
215    return new Promise((resolve, reject) => {
216      this.utilts.request({ url, method, params, message: false })
217        .then(res => {
218          // 正确数据
219          if (res.code === 0) resolve(res.data)
220        }).catch(err => {
221          //120验证码错误 110验证码过期
222          if (err.code === 120 || err.code === 110) resolve(err)
223          else reject(err.msg)
224        })
225    })
226  }
227  _getCodeApi(url, params, method = 'GET') {
228    return new Promise((resolve, reject) => {
229      this.utilts.request({ url, method, params, message: false })
230        .then(res => {
231          resolve(res)
232        }).catch(err => {
233          //120验证码错误 110验证码过期
234          if (err.code === 120 || err.code === 110) resolve(err)
235          else reject(err.msg)
236        })
237    })
238  }
239}