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
>
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
>
@@ -14,7 +15,6 @@
{{ successMsg }}
- {{ infoMsg }}
{{ warningMsg }}
@@ -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
>
@@ -16,13 +17,13 @@
type="password"
class="form-control"
:placeholder="$t('auth.password')"
+ required
>
- {{ infoMsg }}
{{ warningMsg }}
@@ -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
>
@@ -17,6 +18,9 @@
type="password"
class="form-control"
:placeholder="$t('auth.password')"
+ required
+ minlength="8"
+ maxlength="32"
>
@@ -27,6 +31,9 @@
type="password"
class="form-control"
:placeholder="$t('auth.repeat-pwd')"
+ required
+ minlength="8"
+ maxlength="32"
>
@@ -44,6 +51,7 @@
type="text"
class="form-control"
:placeholder="$t('auth.player-name')"
+ required
>
@@ -60,6 +68,7 @@
type="text"
class="form-control"
:placeholder="$t('auth.nickname')"
+ required
>
@@ -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"
>
@@ -17,6 +20,9 @@
type="password"
class="form-control"
:placeholder="$t('auth.repeat-pwd')"
+ required
+ minlength="8"
+ maxlength="32"
>
@@ -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 中的错误显示
+- 优化登录、注册等页面的表单校验
## 修复