UI tweak

resources/assets/src/stylus/auth.styl

@@ -7,3 +7,6 @@
 
 .captcha
   cursor pointer
+
+.el-button
+  width 100%

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

@@ -1,5 +1,5 @@
 <template>
-  <form>
+  <form @submit.prevent="submit">
     <div class="form-group has-feedback">
       <input
         ref="email"
@@ -18,20 +18,16 @@
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
-      <div class="col-xs-8">
+      <div class="col-xs-7">
         <a v-t="'auth.forgot.login-link'" :href="`${baseUrl}/auth/login`" class="text-center" />
       </div>
-      <div class="col-xs-4">
-        <button v-if="pending" disabled class="btn btn-primary btn-block btn-flat">
-          <i class="fa fa-spinner fa-spin" /> {{ $t('auth.sending') }}
-        </button>
-        <button
-          v-else
-          class="btn btn-primary btn-block btn-flat"
-          @click.prevent="submit"
-        >
-          {{ $t('auth.forgot.button') }}
-        </button>
+      <div class="col-xs-5">
+        <el-button type="primary" native-type="submit" :disabled="pending">
+          <template v-if="pending">
+            <i class="fa fa-spinner fa-spin" /> {{ $t('auth.sending') }}
+          </template>
+          <span v-else>{{ $t('auth.forgot.button') }}</span>
+        </el-button>
       </div>
     </div>
   </form>

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

@@ -131,5 +131,4 @@ export default {
 
 .el-button
   margin-top 10px
-  width 100%
 </style>

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

@@ -70,20 +70,16 @@
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
-      <div class="col-xs-8">
+      <div class="col-xs-7">
         <a v-t="'auth.login-link'" :href="`${baseUrl}/auth/login`" class="text-center" />
       </div>
-      <div class="col-xs-4">
-        <button v-if="pending" disabled class="btn btn-primary btn-block btn-flat">
-          <i class="fa fa-spinner fa-spin" /> {{ $t('auth.registering') }}
-        </button>
-        <button
-          v-else
-          class="btn btn-primary btn-block btn-flat"
-          type="submit"
-        >
-          {{ $t('auth.register-button') }}
-        </button>
+      <div class="col-xs-5">
+        <el-button type="primary" native-type="submit" :disabled="pending">
+          <template v-if="pending">
+            <i class="fa fa-spinner fa-spin" /> {{ $t('auth.registering') }}
+          </template>
+          <span v-else>{{ $t('auth.register-button') }}</span>
+        </el-button>
       </div>
     </div>
   </form>

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

@@ -1,5 +1,5 @@
 <template>
-  <form>
+  <form @submit.prevent="reset">
     <div class="form-group has-feedback">
       <input
         ref="password"
@@ -25,14 +25,14 @@
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
-      <div class="col-xs-8" />
-      <div class="col-xs-4">
-        <button v-if="pending" disabled class="btn btn-primary btn-block btn-flat">
-          <i class="fa fa-spinner fa-spin" /> {{ $t('auth.resetting') }}
-        </button>
-        <button v-else class="btn btn-primary btn-block btn-flat" @click.prevent="reset">
-          {{ $t('auth.reset-button') }}
-        </button>
+      <div class="col-xs-7" />
+      <div class="col-xs-5">
+        <el-button type="primary" native-type="submit" :disabled="pending">
+          <template v-if="pending">
+            <i class="fa fa-spinner fa-spin" /> {{ $t('auth.resetting') }}
+          </template>
+          <span v-else>{{ $t('auth.reset-button') }}</span>
+        </el-button>
       </div>
     </div>
   </form>

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

@@ -1,5 +1,5 @@
 <template>
-  <form>
+  <form @submit.prevent="submit">
     <div v-if="players.length">
       <p v-t="'user.bindExistedPlayer'" />
       <div class="form-group">
@@ -23,16 +23,13 @@
 
     <div v-show="message" class="callout callout-warning" v-text="message" />
 
-    <button v-if="pending" class="btn btn-primary btn-block btn-flat" disabled>
-      <i class="fa fa-spinner fa-spin" /> {{ $t('general.wait') }}
-    </button>
-    <button
-      v-else
-      class="btn btn-primary btn-block btn-flat"
-      @click.prevent="submit"
-    >
-      {{ $t('general.submit') }}
-    </button>
+
+    <el-button type="primary" native-type="submit" :disabled="pending">
+      <template v-if="pending">
+        <i class="fa fa-spinner fa-spin" /> {{ $t('general.wait') }}
+      </template>
+      <span v-else>{{ $t('general.submit') }}</span>
+    </el-button>
   </form>
 </template>
 

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

@@ -19,22 +19,22 @@ test('submit forgot form', async () => {
     .mockResolvedValueOnce({ errno: 1, msg: 'fail' })
     .mockResolvedValueOnce({ errno: 0, msg: 'ok' })
   const wrapper = mount(Forgot, { stubs: { Captcha } })
-  const button = wrapper.find('button')
+  const form = wrapper.find('form')
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
   const success = wrapper.find('.callout-success')
 
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.emptyEmail')
 
   wrapper.find('[type="email"]').setValue('a')
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.invalidEmail')
 
   wrapper.find('[type="email"]').setValue('a@b.c')
-  button.trigger('click')
+  form.trigger('submit')
   await flushPromises()
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/auth/forgot',
@@ -42,7 +42,7 @@ test('submit forgot form', async () => {
   )
   expect(warning.text()).toBe('fail')
 
-  button.trigger('click')
+  form.trigger('submit')
   await flushPromises()
   expect(success.text()).toBe('ok')
 })

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

@@ -11,35 +11,35 @@ test('reset password', async () => {
       $route: ['/auth/reset/1', '1'],
     },
   })
-  const button = wrapper.find('button')
+  const form = wrapper.find('form')
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.emptyPassword')
 
   wrapper.findAll('[type="password"]').at(0)
     .setValue('123456')
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.invalidPassword')
 
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.invalidConfirmPwd')
 
   wrapper.findAll('[type="password"]').at(1)
     .setValue('123456')
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).not.toBeCalled()
   expect(info.text()).toBe('auth.invalidConfirmPwd')
 
   wrapper.findAll('[type="password"]').at(1)
     .setValue('12345678')
-  button.trigger('click')
+  form.trigger('submit')
   expect(Vue.prototype.$http.post).toBeCalledWith(
     '/auth/reset/1', // Ignore `location.search`
     { password: '12345678' }
@@ -47,7 +47,7 @@ test('reset password', async () => {
   await wrapper.vm.$nextTick()
   expect(warning.text()).toBe('fail')
 
-  button.trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$message.success).toBeCalledWith('ok')
 })

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

@@ -26,13 +26,14 @@ test('submit', async () => {
     .mockResolvedValueOnce({ errno: 0, msg: 'ok' })
 
   const wrapper = mount(Bind)
+  const form = wrapper.find('form')
   wrapper.find('input').setValue('abc')
 
-  wrapper.find('button').trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(wrapper.find('.callout').text()).toBe('fail')
 
-  wrapper.find('button').trigger('click')
+  form.trigger('submit')
   await wrapper.vm.$nextTick()
   expect(Vue.prototype.$alert).toBeCalledWith({ message: 'ok', type: 'success' })
 })