Optimize form validation

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

@@ -2,7 +2,6 @@
   <form @submit.prevent="submit">
     <div class="form-group has-feedback">
       <input
-        ref="email"
         v-model="email"
         type="email"
         class="form-control"

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

@@ -2,7 +2,6 @@
   <form @submit.prevent="login">
     <div class="form-group has-feedback">
       <input
-        ref="identification"
         v-model="identification"
         class="form-control"
         :placeholder="$t('auth.identification')"
@@ -12,7 +11,6 @@
     </div>
     <div class="form-group has-feedback">
       <input
-        ref="password"
         v-model="password"
         type="password"
         class="form-control"

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

@@ -2,7 +2,6 @@
   <form @submit.prevent="submit">
     <div class="form-group has-feedback">
       <input
-        ref="email"
         v-model="email"
         type="email"
         class="form-control"
@@ -13,7 +12,6 @@
     </div>
     <div class="form-group has-feedback">
       <input
-        ref="password"
         v-model="password"
         type="password"
         class="form-control"
@@ -46,7 +44,6 @@
       data-toggle="tooltip"
     >
       <input
-        ref="playerName"
         v-model="playerName"
         type="text"
         class="form-control"
@@ -63,7 +60,6 @@
       data-toggle="tooltip"
     >
       <input
-        ref="nickname"
         v-model="nickname"
         type="text"
         class="form-control"

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

@@ -2,7 +2,6 @@
   <form @submit.prevent="reset">
     <div class="form-group has-feedback">
       <input
-        ref="password"
         v-model="password"
         type="password"
         class="form-control"

resources/assets/src/views/user/Profile.vue

@@ -16,7 +16,7 @@
           </div>
         </div>
 
-        <div class="box box-warning">
+        <form class="box box-warning" data-test="changePassword" @submit.prevent="changePassword">
           <div class="box-header with-border">
             <h3 v-t="'user.profile.password.title'" class="box-title" />
           </div><!-- /.box-header -->
@@ -24,20 +24,22 @@
             <div class="form-group">
               <label v-t="'user.profile.password.old'" />
               <input
-                ref="oldPassword"
                 v-model="oldPassword"
                 type="password"
                 class="form-control"
+                required
               >
             </div>
 
             <div class="form-group">
               <label v-t="'user.profile.password.new'" />
               <input
-                ref="newPassword"
                 v-model="newPassword"
                 type="password"
                 class="form-control"
+                required
+                minlength="8"
+                maxlength="32"
               >
             </div>
 
@@ -48,41 +50,44 @@
                 v-model="confirmPassword"
                 type="password"
                 class="form-control"
+                required
+                minlength="8"
+                maxlength="32"
               >
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <el-button type="primary" data-test="changePassword" @click="changePassword">
+            <el-button type="primary" native-type="submit">
               {{ $t('user.profile.password.button') }}
             </el-button>
           </div>
-        </div><!-- /.box -->
+        </form><!-- /.box -->
       </div>
       <div class="col-md-6">
-        <div class="box box-primary">
+        <form class="box box-primary" data-test="changeNickName" @submit.prevent="changeNickName">
           <div class="box-header with-border">
             <h3 v-t="'user.profile.nickname.title'" class="box-title" />
           </div><!-- /.box-header -->
           <div class="box-body">
             <div class="form-group has-feedback">
               <input
-                ref="nickname"
                 v-model="nickname"
                 type="text"
                 class="form-control"
                 :placeholder="$t('user.profile.nickname.rule')"
+                required
               >
               <span class="glyphicon glyphicon-user form-control-feedback" />
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <el-button type="primary" data-test="changeNickName" @click="changeNickName">
+            <el-button type="primary" native-type="submit">
               {{ $t('general.submit') }}
             </el-button>
           </div>
-        </div>
+        </form>
 
-        <div class="box box-warning">
+        <form class="box box-warning" data-test="changeEmail" @submit.prevent="changeEmail">
           <div class="box-header with-border">
             <h3 v-t="'user.profile.email.title'" class="box-title" />
           </div><!-- /.box-header -->
@@ -94,6 +99,7 @@
                 type="email"
                 class="form-control"
                 :placeholder="$t('user.profile.email.new')"
+                required
               >
               <span class="glyphicon glyphicon-envelope form-control-feedback" />
             </div>
@@ -104,16 +110,17 @@
                 type="password"
                 class="form-control"
                 :placeholder="$t('user.profile.email.password')"
+                required
               >
               <span class="glyphicon glyphicon-lock form-control-feedback" />
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <el-button type="primary" data-test="changeEmail" @click="changeEmail">
+            <el-button type="primary" native-type="submit">
               {{ $t('user.profile.email.button') }}
             </el-button>
           </div>
-        </div>
+        </form>
 
         <div class="box box-danger">
           <div class="box-header with-border">
@@ -143,7 +150,7 @@
       tabindex="-1"
       role="dialog"
     >
-      <div class="modal-dialog">
+      <form class="modal-dialog" data-test="deleteAccount" @submit.prevent="deleteAccount">
         <div class="modal-content">
           <div class="modal-header">
             <button
@@ -165,6 +172,7 @@
               type="password"
               class="form-control"
               :placeholder="$t('user.profile.delete.password')"
+              required
             >
             <br>
           </div>
@@ -175,15 +183,14 @@
               class="btn btn-outline"
               data-dismiss="modal"
             />
-            <a
+            <button
               v-t="'general.submit'"
+              type="submit"
               class="btn btn-outline"
-              data-test="deleteAccount"
-              @click="deleteAccount"
             />
           </div>
         </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
+      </form><!-- /.modal-dialog -->
     </div><!-- /.modal -->
   </section><!-- /.content -->
 </template>
@@ -233,24 +240,6 @@ export default {
         oldPassword, newPassword, confirmPassword,
       } = this
 
-      if (!oldPassword) {
-        this.$message.error(this.$t('user.emptyPassword'))
-        this.$refs.oldPassword.focus()
-        return
-      }
-
-      if (!newPassword) {
-        this.$message.error(this.$t('user.emptyNewPassword'))
-        this.$refs.newPassword.focus()
-        return
-      }
-
-      if (!confirmPassword) {
-        this.$message.error(this.$t('auth.emptyConfirmPwd'))
-        this.$refs.confirmPassword.focus()
-        return
-      }
-
       if (newPassword !== confirmPassword) {
         this.$message.error(this.$t('auth.invalidConfirmPwd'))
         this.$refs.confirmPassword.focus()
@@ -270,10 +259,6 @@ export default {
     async changeNickName() {
       const { nickname } = this
 
-      if (!nickname) {
-        return this.$alert(this.$t('user.emptyNewNickName'), { type: 'error' })
-      }
-
       try {
         await this.$confirm(this.$t('user.changeNickName', { new_nickname: nickname }))
       } catch {
@@ -294,14 +279,6 @@ export default {
     async changeEmail() {
       const { email } = this
 
-      if (!email) {
-        return this.$alert(this.$t('user.emptyNewEmail'), { type: 'error' })
-      }
-
-      if (!/\S+@\S+\.\S+/.test(email)) {
-        return this.$alert(this.$t('auth.invalidEmail'), { type: 'warning' })
-      }
-
       try {
         await this.$confirm(this.$t('user.changeEmail', { new_email: email }))
       } catch {
@@ -321,10 +298,6 @@ export default {
     async deleteAccount() {
       const { deleteConfirm: password } = this
 
-      if (!password) {
-        return this.$alert(this.$t('user.emptyDeletePassword'), { type: 'error' })
-      }
-
       const { code, message } = await this.$http.post(
         '/user/profile?action=delete',
         { password }

resources/assets/tests/views/user/Profile.test.ts

@@ -47,29 +47,17 @@ test('change password', async () => {
     .mockResolvedValueOnce({ code: 1, message: 'w' })
     .mockResolvedValueOnce({ code: 0, message: 'o' })
   const wrapper = mount(Profile)
-  const button = wrapper.find('[data-test=changePassword]')
-
-  button.trigger('click')
-  expect(Vue.prototype.$message.error).toBeCalledWith('user.emptyPassword')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
+  const form = wrapper.find('[data-test=changePassword]')
 
   wrapper.setData({ oldPassword: '1' })
-  button.trigger('click')
-  expect(Vue.prototype.$message.error).toBeCalledWith('user.emptyNewPassword')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-
   wrapper.setData({ newPassword: '1' })
-  button.trigger('click')
-  expect(Vue.prototype.$message.error).toBeCalledWith('auth.emptyConfirmPwd')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-
   wrapper.setData({ confirmPassword: '2' })
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$message.error).toBeCalledWith('auth.invalidConfirmPwd')
   expect(Vue.prototype.$http.post).not.toBeCalled()
 
   wrapper.setData({ confirmPassword: '1' })
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/user/profile?action=password',
@@ -77,7 +65,7 @@ test('change password', async () => {
   )
   expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' })
 
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith('o')
 })
@@ -90,19 +78,15 @@ test('change nickname', async () => {
     .mockRejectedValueOnce('close')
     .mockResolvedValue('confirm')
   const wrapper = mount(Profile)
-  const button = wrapper.find('[data-test=changeNickName]')
+  const form = wrapper.find('[data-test=changeNickName]')
   document.body.innerHTML += '<span class="nickname"></span>'
 
-  button.trigger('click')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(Vue.prototype.$alert).toBeCalledWith('user.emptyNewNickName', { type: 'error' })
-
   wrapper.setData({ nickname: 'nickname' })
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(Vue.prototype.$confirm).toBeCalledWith('user.changeNickName')
 
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/user/profile?action=nickname',
@@ -111,7 +95,7 @@ test('change nickname', async () => {
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' })
 
-  button.trigger('click')
+  form.trigger('submit')
   await flushPromises()
   expect(Vue.prototype.$message.success).toBeCalledWith('o')
   expect(document.querySelector('.nickname')!.textContent).toBe('nickname')
@@ -125,23 +109,14 @@ test('change email', async () => {
     .mockRejectedValueOnce('close')
     .mockResolvedValue('confirm')
   const wrapper = mount(Profile)
-  const button = wrapper.find('[data-test=changeEmail]')
-
-  button.trigger('click')
-  expect(Vue.prototype.$alert).toBeCalledWith('user.emptyNewEmail', { type: 'error' })
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-
-  wrapper.setData({ email: 'e' })
-  button.trigger('click')
-  expect(Vue.prototype.$alert).toBeCalledWith('auth.invalidEmail', { type: 'warning' })
-  expect(Vue.prototype.$http.post).not.toBeCalled()
+  const form = wrapper.find('[data-test=changeEmail]')
 
   wrapper.setData({ email: 'a@b.c', currentPassword: 'abc' })
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$confirm).toBeCalledWith('user.changeEmail')
   expect(Vue.prototype.$http.post).not.toBeCalled()
 
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/user/profile?action=email',
@@ -150,7 +125,7 @@ test('change email', async () => {
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' })
 
-  button.trigger('click')
+  form.trigger('submit')
   await flushPromises()
   expect(Vue.prototype.$message.success).toBeCalledWith('o')
 })
@@ -161,14 +136,10 @@ test('delete account', async () => {
     .mockResolvedValueOnce({ code: 1, message: 'w' })
     .mockResolvedValue({ code: 0, message: 'o' })
   const wrapper = mount(Profile)
-  const button = wrapper.find('[data-test=deleteAccount]')
-
-  button.trigger('click')
-  expect(Vue.prototype.$alert).toBeCalledWith('user.emptyDeletePassword', { type: 'error' })
-  expect(Vue.prototype.$http.post).not.toBeCalled()
+  const form = wrapper.find('[data-test=deleteAccount]')
 
   wrapper.setData({ deleteConfirm: 'abc' })
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/user/profile?action=delete',
     { password: 'abc' }
@@ -176,7 +147,7 @@ test('delete account', async () => {
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' })
 
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith('o', { type: 'success' })
 })