Improve text prompts when reCAPTCHA is enabled

resources/assets/src/views/auth/Login.vue

@@ -68,6 +68,8 @@ export default {
       password: '',
       remember: false,
       tooManyFails: blessing.extra.tooManyFails,
+      recaptcha: blessing.extra.recaptcha,
+      invisible: blessing.extra.invisible,
       infoMsg: '',
       warningMsg: '',
       pending: false,
@@ -112,7 +114,13 @@ export default {
         }, 1000)
       } else {
         if (loginFails > 3 && !this.tooManyFails) {
-          this.$alert(this.$t('auth.tooManyFails'), { type: 'error' })
+          if (this.recaptcha) {
+            if (!this.invisible) {
+              this.$alert(this.$t('auth.tooManyFails.recaptcha'), { type: 'error' })
+            }
+          } else {
+            this.$alert(this.$t('auth.tooManyFails.captcha'), { type: 'error' })
+          }
           this.tooManyFails = true
         }
         this.infoMsg = ''

resources/assets/tests/views/auth/Login.test.ts

@@ -23,6 +23,8 @@ test('login', async () => {
   Vue.prototype.$http.post
     .mockResolvedValueOnce({ errno: 1, msg: 'fail' })
     .mockResolvedValueOnce({ errno: 1, login_fails: 4 })
+    .mockResolvedValueOnce({ errno: 1, login_fails: 4 })
+    .mockResolvedValueOnce({ errno: 1, login_fails: 4 })
     .mockResolvedValueOnce({ errno: 0, msg: 'ok' })
   const wrapper = mount(Login, { stubs: { Captcha } })
   const form = wrapper.find('form')
@@ -51,9 +53,22 @@ test('login', async () => {
 
   form.trigger('submit')
   await wrapper.vm.$nextTick()
-  expect(Vue.prototype.$alert).toBeCalledWith('auth.tooManyFails', { type: 'error' })
+  expect(Vue.prototype.$alert).toBeCalledWith('auth.tooManyFails.captcha', { type: 'error' })
   expect(wrapper.find('img').exists()).toBeTrue()
 
+  wrapper.setData({
+    recaptcha: 'sitekey', invisible: true, tooManyFails: false,
+  })
+  form.trigger('submit')
+  await wrapper.vm.$nextTick()
+
+  wrapper.setData({
+    recaptcha: 'sitekey', invisible: false, tooManyFails: false,
+  })
+  form.trigger('submit')
+  await wrapper.vm.$nextTick()
+  expect(Vue.prototype.$alert).toBeCalledWith('auth.tooManyFails.recaptcha', { type: 'error' })
+
   wrapper.find('[type="checkbox"]').setChecked()
   form.trigger('submit')
   await wrapper.vm.$nextTick()

resources/lang/en/front-end.yml

@@ -4,7 +4,9 @@ auth:
   emptyCaptcha: Empty captcha.
   login: Log In
   loggingIn: Logging In
-  tooManyFails: You fails too many times! Please enter the CAPTCHA.
+  tooManyFails:
+    captcha: You fails too many times! Please enter the CAPTCHA.
+    recaptcha: You fails too many times! Please pass the reCAPTCHA challenge.
   emptyEmail: Empty email address.
   invalidEmail: Invalid format of email address.
   invalidPassword: Invalid password. The length of password should between 8 and 32.

resources/lang/zh_CN/front-end.yml

@@ -4,7 +4,9 @@ auth:
   emptyCaptcha: 你还没有填写验证码哦
   login: 登录
   loggingIn: 登录中
-  tooManyFails: 你尝试的次数太多啦，请输入验证码
+  tooManyFails:
+    captcha: 你尝试的次数太多啦，请输入验证码
+    recaptcha: 你尝试的次数太多啦，请通过 reCAPTCHA 人机验证
   emptyEmail: 你还没有填写邮箱哦
   invalidEmail: 邮箱格式不正确！
   invalidPassword: 无效的密码。密码长度应该大于 8 并小于 32。