From a4d4dcfa9cd482a064271a7da3c42541931c392b Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Mon, 8 Jul 2019 13:10:34 +0800
Subject: [PATCH] Optimize form validation

---
 resources/assets/src/components/Captcha.vue   |  1 +
 resources/assets/src/views/auth/Forgot.vue    | 17 +------
 resources/assets/src/views/auth/Login.vue     | 17 +------
 resources/assets/src/views/auth/Register.vue  | 45 ++++---------------
 resources/assets/src/views/auth/Reset.vue     | 18 +++-----
 .../assets/tests/views/auth/Forgot.test.ts    | 10 -----
 .../assets/tests/views/auth/Login.test.ts     |  9 ----
 .../assets/tests/views/auth/Register.test.ts  | 33 --------------
 .../assets/tests/views/auth/Reset.test.ts     | 14 ------
 resources/misc/changelogs/en/4.4.0.md         |  1 +
 resources/misc/changelogs/zh_CN/4.4.0.md      |  1 +
 11 files changed, 21 insertions(+), 145 deletions(-)

diff --git a/resources/assets/src/components/Captcha.vue b/resources/assets/src/components/Captcha.vue
index 90fc6513..d3640a93 100644
--- a/resources/assets/src/components/Captcha.vue
+++ b/resources/assets/src/components/Captcha.vue
@@ -18,6 +18,7 @@
           type="text"
           class="form-control"
           :placeholder="$t('auth.captcha')"
+          required
         >
       </div>
     </div>
diff --git a/resources/assets/src/views/auth/Forgot.vue b/resources/assets/src/views/auth/Forgot.vue
index 1316559b..759bbc4b 100644
--- a/resources/assets/src/views/auth/Forgot.vue
+++ b/resources/assets/src/views/auth/Forgot.vue
@@ -7,6 +7,7 @@
         type="email"
         class="form-control"
         :placeholder="$t('auth.email')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -14,7 +15,6 @@
     <captcha ref="captcha" />
 
     <div class="callout callout-success" :class="{ hide: !successMsg }">{{ successMsg }}</div>
-    <div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
@@ -59,7 +59,6 @@ export default {
   data: () => ({
     email: '',
     successMsg: '',
-    infoMsg: '',
     warningMsg: '',
     pending: false,
   }),
@@ -67,30 +66,16 @@ export default {
     async submit() {
       const { email } = this
 
-      if (!email) {
-        this.infoMsg = this.$t('auth.emptyEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!/\S+@\S+\.\S+/.test(email)) {
-        this.infoMsg = this.$t('auth.invalidEmail')
-        this.$refs.email.focus()
-        return
-      }
-
       this.pending = true
       const { code, message } = await this.$http.post(
         '/auth/forgot',
         { email, captcha: await this.$refs.captcha.execute() }
       )
       if (code === 0) {
-        this.infoMsg = ''
         this.warningMsg = ''
         this.successMsg = message
         this.pending = false
       } else {
-        this.infoMsg = ''
         this.warningMsg = message
         this.pending = false
         this.$refs.captcha.refresh()
diff --git a/resources/assets/src/views/auth/Login.vue b/resources/assets/src/views/auth/Login.vue
index a2d88b09..cacd8524 100644
--- a/resources/assets/src/views/auth/Login.vue
+++ b/resources/assets/src/views/auth/Login.vue
@@ -6,6 +6,7 @@
         v-model="identification"
         class="form-control"
         :placeholder="$t('auth.identification')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -16,13 +17,13 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
 
     <captcha v-if="tooManyFails" ref="captcha" />
 
-    <div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
@@ -78,7 +79,6 @@ export default {
       tooManyFails: blessing.extra.tooManyFails,
       recaptcha: blessing.extra.recaptcha,
       invisible: blessing.extra.invisible,
-      infoMsg: '',
       warningMsg: '',
       pending: false,
     }
@@ -89,18 +89,6 @@ export default {
         identification, password, remember,
       } = this
 
-      if (!identification) {
-        this.infoMsg = this.$t('auth.emptyIdentification')
-        this.$refs.identification.focus()
-        return
-      }
-
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       this.pending = true
       const {
         code, message, data: { login_fails: loginFails } = { login_fails: 0 },
@@ -131,7 +119,6 @@ export default {
           }
           this.tooManyFails = true
         }
-        this.infoMsg = ''
         this.warningMsg = message
         this.pending = false
         this.$refs.captcha.refresh()
diff --git a/resources/assets/src/views/auth/Register.vue b/resources/assets/src/views/auth/Register.vue
index e398e09f..de48d8c7 100644
--- a/resources/assets/src/views/auth/Register.vue
+++ b/resources/assets/src/views/auth/Register.vue
@@ -7,6 +7,7 @@
         type="email"
         class="form-control"
         :placeholder="$t('auth.email')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -17,6 +18,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
@@ -27,6 +31,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.repeat-pwd')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-log-in form-control-feedback" />
     </div>
@@ -44,6 +51,7 @@
         type="text"
         class="form-control"
         :placeholder="$t('auth.player-name')"
+        required
       >
       <span class="glyphicon glyphicon-pencil form-control-feedback" />
     </div>
@@ -60,6 +68,7 @@
         type="text"
         class="form-control"
         :placeholder="$t('auth.nickname')"
+        required
       >
       <span class="glyphicon glyphicon-pencil form-control-feedback" />
     </div>
@@ -125,48 +134,12 @@ export default {
         email, password, confirm, playerName, nickname,
       } = this
 
-      if (!email) {
-        this.infoMsg = this.$t('auth.emptyEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!/\S+@\S+\.\S+/.test(email)) {
-        this.infoMsg = this.$t('auth.invalidEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
-      if (password.length < 8 || password.length > 32) {
-        this.infoMsg = this.$t('auth.invalidPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       if (password !== confirm) {
         this.infoMsg = this.$t('auth.invalidConfirmPwd')
         this.$refs.confirm.focus()
         return
       }
 
-      if (this.requirePlayer && !playerName) {
-        this.infoMsg = this.$t('auth.emptyPlayerName')
-        this.$refs.playerName.focus()
-        return
-      }
-
-      if (!this.requirePlayer && !nickname) {
-        this.infoMsg = this.$t('auth.emptyNickname')
-        this.$refs.nickname.focus()
-        return
-      }
-
       this.pending = true
       const { code, message } = await this.$http.post(
         '/auth/register',
diff --git a/resources/assets/src/views/auth/Reset.vue b/resources/assets/src/views/auth/Reset.vue
index 3dc55d60..42ff394c 100644
--- a/resources/assets/src/views/auth/Reset.vue
+++ b/resources/assets/src/views/auth/Reset.vue
@@ -7,6 +7,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
@@ -17,6 +20,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.repeat-pwd')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-log-in form-control-feedback" />
     </div>
@@ -65,18 +71,6 @@ export default {
     async reset() {
       const { password, confirm } = this
 
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
-      if (password.length < 8 || password.length > 32) {
-        this.infoMsg = this.$t('auth.invalidPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       if (password !== confirm) {
         this.infoMsg = this.$t('auth.invalidConfirmPwd')
         this.$refs.confirm.focus()
diff --git a/resources/assets/tests/views/auth/Forgot.test.ts b/resources/assets/tests/views/auth/Forgot.test.ts
index 9d271bdf..16c821b2 100644
--- a/resources/assets/tests/views/auth/Forgot.test.ts
+++ b/resources/assets/tests/views/auth/Forgot.test.ts
@@ -20,19 +20,9 @@ test('submit forgot form', async () => {
     .mockResolvedValueOnce({ code: 0, message: 'ok' })
   const wrapper = mount(Forgot, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
   const success = wrapper.find('.callout-success')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyEmail')
-
-  wrapper.find('[type="email"]').setValue('a')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidEmail')
-
   wrapper.find('[type="email"]').setValue('a@b.c')
   form.trigger('submit')
   await flushPromises()
diff --git a/resources/assets/tests/views/auth/Login.test.ts b/resources/assets/tests/views/auth/Login.test.ts
index 0f9a18dd..9340055d 100644
--- a/resources/assets/tests/views/auth/Login.test.ts
+++ b/resources/assets/tests/views/auth/Login.test.ts
@@ -28,18 +28,9 @@ test('login', async () => {
     .mockResolvedValueOnce({ code: 0, message: 'ok' })
   const wrapper = mount(Login, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyIdentification')
-
   wrapper.find('input').setValue('a@b.c')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
   wrapper.find('[type="password"]').setValue('123')
   form.trigger('submit')
   await wrapper.vm.$nextTick()
diff --git a/resources/assets/tests/views/auth/Register.test.ts b/resources/assets/tests/views/auth/Register.test.ts
index cf1d07d1..2004f19d 100644
--- a/resources/assets/tests/views/auth/Register.test.ts
+++ b/resources/assets/tests/views/auth/Register.test.ts
@@ -34,32 +34,9 @@ test('register', async () => {
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyEmail')
-
-  wrapper.find('[type="email"]').setValue('a')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidEmail')
-
   wrapper.find('[type="email"]').setValue('a@b.c')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
-  wrapper.findAll('[type="password"]').at(0)
-    .setValue('123456')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidPassword')
-
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidConfirmPwd')
-
   wrapper.findAll('[type="password"]').at(1)
     .setValue('123456')
   form.trigger('submit')
@@ -68,10 +45,6 @@ test('register', async () => {
 
   wrapper.findAll('[type="password"]').at(1)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyNickname')
-
   wrapper.findAll('[type="text"]').at(0)
     .setValue('abc')
   form.trigger('submit')
@@ -99,17 +72,11 @@ test('register with player name', async () => {
   Vue.prototype.$http.post.mockResolvedValue({ code: 0, message: 'ok' })
   const wrapper = mount(Register, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   wrapper.find('[type="email"]').setValue('a@b.c')
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
   wrapper.findAll('[type="password"]').at(1)
     .setValue('12345678')
-
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPlayerName')
-
   wrapper.findAll('[type="text"]').at(0)
     .setValue('abc')
   form.trigger('submit')
diff --git a/resources/assets/tests/views/auth/Reset.test.ts b/resources/assets/tests/views/auth/Reset.test.ts
index 713c50f5..7ab4d5e6 100644
--- a/resources/assets/tests/views/auth/Reset.test.ts
+++ b/resources/assets/tests/views/auth/Reset.test.ts
@@ -15,22 +15,8 @@ test('reset password', async () => {
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
-  wrapper.findAll('[type="password"]').at(0)
-    .setValue('123456')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidPassword')
-
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidConfirmPwd')
-
   wrapper.findAll('[type="password"]').at(1)
     .setValue('123456')
   form.trigger('submit')
diff --git a/resources/misc/changelogs/en/4.4.0.md b/resources/misc/changelogs/en/4.4.0.md
index 45864108..b618bb5d 100644
--- a/resources/misc/changelogs/en/4.4.0.md
+++ b/resources/misc/changelogs/en/4.4.0.md
@@ -6,6 +6,7 @@
 
 - Push notifications to queue for performance.
 - Optimized exception stack of Ajax error.
+- Optimized validating forms of pages like logining and registering.
 
 ## Fixed
 
diff --git a/resources/misc/changelogs/zh_CN/4.4.0.md b/resources/misc/changelogs/zh_CN/4.4.0.md
index d6531ce3..638545af 100644
--- a/resources/misc/changelogs/zh_CN/4.4.0.md
+++ b/resources/misc/changelogs/zh_CN/4.4.0.md
@@ -6,6 +6,7 @@
 
 - 发送通知时将任务推送到队列
 - 优化 Ajax 中的错误显示
+- 优化登录、注册等页面的表单校验
 
 ## 修复