feat: check password match only on form submit

edge · Jan 21, 2022 · 822daea · 822daea
1 parent bac6003
commit 822daea
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 40 deletions.
diff --git a/src/components/index/CreateModal.vue b/src/components/index/CreateModal.vue
@@ -137,7 +137,10 @@ export default {
   },
   validations() {
     return {
-      password: validation.password,
+      password: [
+        validation.passwordRequired,
+        validation.passwordLength,
+      ],
       confirmPhrase: [
         validation.required,
         matchConfirmPhrase

diff --git a/src/components/index/RestoreModal.vue b/src/components/index/RestoreModal.vue
@@ -104,7 +104,10 @@ export default {
         validation.required,
         helpers.withMessage('Invalid private key.', v => privateKeyRegexp.test(v))
       ],
-      password: validation.password,
+      password: [
+        validation.passwordRequired,
+        validation.passwordLength,
+      ],
       repeatPassword: [
         helpers.withMessage('Passwords do not match.', sameAs(this.password))
       ]

diff --git a/src/components/index/UnlockModal.vue b/src/components/index/UnlockModal.vue
@@ -11,7 +11,7 @@
             <label>wallet address</label>
             <span class="break-all">{{ address }}</span>
           </div>
-          <div class="form-group" :class="{'form-group__error': v$.password.$error}">
+          <div class="form-group" :class="{'form-group__error': v$.password.$error || (passwordError && !v$.password.$dirty)}">
             <label for="password">ENTER PASSWORD</label>
             <div class="relative input-wrap">
               <span class="icon">
@@ -27,6 +27,7 @@
               />
             </div>
             <div class="form-group__error input-error" v-for="error of v$.password.$errors" :key="error.$uid">{{error.$message}}</div>
+            <div class="form-group__error input-error" v-if="passwordError && !v$.password.$dirty">{{passwordError}}</div>
           </div>
         </form>
       </div>
@@ -53,7 +54,6 @@ import { LockOpenIcon } from '@heroicons/vue/outline'
 import Modal from '../Modal'
 import useVuelidate from '@vuelidate/core'
 import { mapState } from 'vuex'
-import { helpers } from '@vuelidate/validators'
 
 export default {
   name: 'CreateModal',
@@ -64,16 +64,15 @@ export default {
   data() {
     return {
       password: '',
+      passwordError: ''
     }
   },
   validations() {
     return {
-      password: [
-        validation.passwordRequired,
-        helpers.withAsync(helpers.withMessage('Incorrect password.', this.checkPassword))
-      ]
+      password: [validation.passwordRequired]
     }
-  },  props: {
+  },
+  props: {
     afterUnlock: Function,
     close: Function,
     switchToForgetModal: Function,
@@ -89,11 +88,20 @@ export default {
     }
   },
   methods: {
-    checkPassword(input) {
-      return storage.comparePassword(input, this.walletVersion)
+    async checkPassword() {
+      this.v$.password.$reset()
+      if (await storage.comparePassword(this.password, this.walletVersion)) {
+        this.passwordError = ''
+        return true
+      }
+      else {
+        this.passwordError = 'Incorrect password.'
+        return false
+      }
     },
     async unlock() {
       if (!await this.v$.$validate()) return
+      if (!await this.checkPassword()) return
 
       const privateKey = await storage.getPrivateKey(this.password, this.walletVersion)
       const publicKey = await storage.getPublicKey(this.walletVersion)

diff --git a/src/components/tx/SellModal.vue b/src/components/tx/SellModal.vue
@@ -178,7 +178,7 @@
 
     <template v-slot:footer>
       <div class="px-24 py-32 border-t border-gray-700 border-opacity-30">
-        <div class="mb-24 form-group" :class="{'form-group__error': v$.password.$error}">
+        <div class="mb-24 form-group" :class="{'form-group__error': v$.password.$error || (passwordError && !v$.password.$dirty)}">
           <form>
             <label for="password">ENTER PASSWORD</label>
             <div class="relative input-wrap">
@@ -195,6 +195,7 @@
               />
             </div>
             <div class="form-group__error input-error" v-for="error of v$.password.$errors" :key="error.$uid">{{error.$message}}</div>
+            <div class="form-group__error input-error" v-if="passwordError && !v$.password.$dirty">{{passwordError}}</div>
           </form>
         </div>
 
@@ -322,6 +323,7 @@ export default {
       recipient: '',
       amount: '',
       password: '',
+      passwordError: '',
 
       completedTx: null,
       submitError: '',
@@ -344,10 +346,7 @@ export default {
           helpers.withMessage(`The exchange maximum is ${this.saleLimit} XE.`, () => this.withinSaleLimit)
         )
       ],
-      password: [
-        ...validation.password,
-        helpers.withAsync(helpers.withMessage('Incorrect password.', this.checkPassword))
-      ]
+      password: [validation.passwordRequired]
     }
   },
   computed: {
@@ -412,8 +411,16 @@ export default {
       this.reset()
       this.close()
     },
-    checkPassword(input) {
-      return storage.comparePassword(input)
+    async checkPassword() {
+      this.v$.password.$reset()
+      if (await storage.comparePassword(this.password)) {
+        this.passwordError = ''
+        return true
+      }
+      else {
+        this.passwordError = 'Incorrect password.'
+        return false
+      }
     },
     goto(step) {
       this.step = step
@@ -442,6 +449,7 @@ export default {
     },
     async sell() {
       if (!await this.v$.$validate()) return
+      if (!await this.checkPassword()) return
       const privateKey = await storage.getPrivateKey(this.password)
 
       // create tx

diff --git a/src/components/tx/SendModal.vue b/src/components/tx/SendModal.vue
@@ -92,7 +92,7 @@
     <template v-slot:footer>
       <div class="px-24 pt-32 pb-40 border-t border-gray-700 border-opacity-30">
         <form>
-          <div class="form-group" :class="{'form-group__error': v$.password.$error}">
+          <div class="form-group" :class="{'form-group__error': v$.password.$error || (passwordError && !v$.password.$dirty)}">
             <label for="pass-step">Enter Password</label>
             <div class="relative input-wrap">
               <span class="icon">
@@ -108,6 +108,7 @@
               />
             </div>
             <div class="form-group__error input-error" v-for="error of v$.password.$errors" :key="error.$uid">{{error.$message}}</div>
+            <div class="form-group__error input-error" v-if="passwordError && !v$.password.$dirty">{{passwordError}}</div>
           </div>
         </form>
         <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
@@ -206,6 +207,7 @@ export default {
       amount: '',
       memo: '',
       password: '',
+      passwordError: '',
 
       completedTx: null,
       submitError: '',
@@ -227,10 +229,7 @@ export default {
           v => v.length === 0 || memoRegexp.test(v)
         ),
       ],
-      password: [
-        ...validation.password,
-        helpers.withAsync(helpers.withMessage('Incorrect password.', this.checkPassword))
-      ]
+      password: [validation.passwordRequired],
     }
   },
   computed: {
@@ -258,8 +257,16 @@ export default {
       this.reset()
       this.close()
     },
-    checkPassword(input) {
-      return storage.comparePassword(input)
+    async checkPassword() {
+      this.v$.password.$reset()
+      if (await storage.comparePassword(this.password)) {
+        this.passwordError = ''
+        return true
+      }
+      else {
+        this.passwordError = 'Incorrect password.'
+        return false
+      }
     },
     goto(step) {
       this.step = step
@@ -278,6 +285,7 @@ export default {
       this.amount = ''
       this.memo = ''
       this.password = ''
+      this.passwordError = ''
 
       this.completedTx = null
       this.submitError = ''
@@ -286,6 +294,7 @@ export default {
     },
     async send() {
       if (!await this.v$.$validate()) return
+      if (!await this.checkPassword()) return
       const privateKey = await storage.getPrivateKey(this.password)
 
       // create tx

diff --git a/src/components/tx/WithdrawModal.vue b/src/components/tx/WithdrawModal.vue
@@ -170,7 +170,7 @@
 
     <template v-slot:footer>
       <div class="px-24 py-32 border-t border-gray-700 border-opacity-30">
-        <div class="mb-24 form-group" :class="{'form-group__error': v$.password.$error}">
+        <div class="mb-24 form-group" :class="{'form-group__error': v$.password.$error || (passwordError && !v$.password.$dirty)}">
           <form>
             <label for="pass-withdraw">ENTER PASSWORD</label>
             <div class="relative input-wrap">
@@ -187,6 +187,7 @@
               />
             </div>
             <div class="form-group__error input-error" v-for="error of v$.password.$errors" :key="error.$uid">{{error.$message}}</div>
+            <div class="form-group__error input-error" v-if="passwordError && !v$.password.$dirty">{{passwordError}}</div>
           </form>
         </div>
 
@@ -270,7 +271,6 @@ import Modal from '../Modal'
 import Radio from '../Radio'
 import Tooltip from '../Tooltip'
 import { fetchGasRates } from '../../utils/api'
-import { helpers } from '@vuelidate/validators'
 import { mapState } from 'vuex'
 import { parseAmount } from '../../utils/form'
 import { toMicroXe } from '@edge/wallet-utils'
@@ -306,6 +306,7 @@ export default {
       amount: '',
       speed: 'average',
       password: '',
+      passwordError: '',
 
       submitError: '',
       completedTx: null,
@@ -322,10 +323,7 @@ export default {
         validation.required,
         ...validation.amount(this.balance, this.amountParsed)
       ],
-      password: [
-        ...validation.password,
-        helpers.withAsync(helpers.withMessage('Incorrect password.', this.checkPassword))
-      ]
+      password: [validation.passwordRequired],
     }
   },
   computed: {
@@ -393,8 +391,16 @@ export default {
       this.reset()
       this.close()
     },
-    checkPassword(input) {
-      return storage.comparePassword(input)
+    async checkPassword() {
+      this.v$.password.$reset()
+      if (await storage.comparePassword(this.password)) {
+        this.passwordError = ''
+        return true
+      }
+      else {
+        this.passwordError = 'Incorrect password.'
+        return false
+      }
     },
     goto(step) {
       this.step = step
@@ -428,6 +434,7 @@ export default {
     },
     async withdraw() {
       if (!await this.v$.$validate()) return
+      if (!await this.checkPassword()) return
       const privateKey = await storage.getPrivateKey(this.password)
 
       // create tx

diff --git a/src/utils/validation.js b/src/utils/validation.js
@@ -50,17 +50,14 @@ const ethAddressRegexp = /^0x[a-fA-F0-9]{40}$/
 export const ethAddress = helpers.withMessage('Invalid Ethereum address.', v => ethAddressRegexp.test(v))
 
 /**
- * Required password validator,
+ * Password length validator.
  */
-export const passwordRequired = helpers.withMessage('Password required.', _required)
+export const passwordLength = helpers.withMessage('Must be 10 characters or more.', minLength(10))
 
 /**
- * Password validation rules.
+ * Required password validator.
  */
-export const password = [
-  passwordRequired,
-  helpers.withMessage('Must be 10 characters or more.', minLength(10)),
-]
+export const passwordRequired = helpers.withMessage('Password required.', _required)
 
 /**
  * Required value validator with a more attractive error message.