refactor Register page

Author: msgill2017

src/locales/lang/en-US/user.js

@@ -31,12 +31,12 @@ export default {
   'user.email.wrong-format': 'The email address is in the wrong format!',
   'user.userName.required': 'Please enter account name or email address',
   'user.password.required': 'Please enter your password!',
-  'user.password.twice': 'The passwords entered twice do not match!',
-  'user.strength.msg':
-    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
-  'user.strength.strong': 'Strength: strong',
-  'user.strength.medium': 'Strength: medium',
-  'user.strength.short': 'Strength: too short',
+  'user.password.twice.msg': 'The passwords entered twice do not match!',
+  'user.password.strength.msg':
+    'The password is not strong enough',
+  'user.password.strength.strong': 'Strength: strong',
+  'user.password.strength.medium': 'Strength: medium',
+  'user.password.strength.short': 'Strength: too short',
   'user.confirm-password.required': 'Please confirm your password!',
   'user.phone-number.required': 'Please enter your phone number!',
   'user.phone-number.wrong-format': 'Please enter a valid phone number',

src/locales/lang/zh-CN/user.js

@@ -30,11 +30,11 @@ export default {
   'user.email.wrong-format': '邮箱地址格式错误！',
   'user.userName.required': '请输入帐户名或邮箱地址',
   'user.password.required': '请输入密码！',
-  'user.password.twice': '两次输入的密码不匹配!',
-  'user.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
-  'user.strength.strong': '强度：强',
-  'user.strength.medium': '强度：中',
-  'user.strength.short': '强度：太短',
+  'user.password.twice.msg': '两次输入的密码不匹配!',
+  'user.password.strength.msg': '密码强度不够 ',
+  'user.password.strength.strong': '强度：强',
+  'user.password.strength.medium': '强度：中',
+  'user.password.strength.short': '强度：太短',
   'user.confirm-password.required': '请确认密码！',
   'user.phone-number.required': '请输入正确的手机号',
   'user.phone-number.wrong-format': '手机号格式错误！',

src/views/user/Register.vue

@@ -31,7 +31,7 @@
             size="large"
             @click="handlePasswordInputClick"
             :placeholder="$t('user.register.password.placeholder')"
-            v-decorator="['password', {rules: [{ required: true, message: $t('user.password.required')}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+            v-decorator="['password', {rules: [{ required: true, message: $t('user.password.required') }, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
           ></a-input-password>
         </a-form-item>
       </a-popover>
@@ -128,6 +128,7 @@ export default {
 
       state: {
         time: 60,
+        level: 0,
         smsSendBtn: false,
         passwordLevel: 0,
         passwordLevelChecked: false,
@@ -150,43 +151,47 @@ export default {
   },
   methods: {
     handlePasswordLevel (rule, value, callback) {
-      let level = 0
-
+      console.log('value form handlePassword level', value)
+      if (value === '') {
+        callback()
+      } else {
+      console.log('level inside else form handlePassword level', this.state.level)
       // 判断这个字符串中有没有数字
       if (/[0-9]/.test(value)) {
-        level++
+        this.state.level++
       }
       // 判断字符串中有没有字母
       if (/[a-zA-Z]/.test(value)) {
-        level++
+        this.state.level++
       }
       // 判断字符串中有没有特殊符号
       if (/[^0-9a-zA-Z_]/.test(value)) {
-        level++
+        this.state.level++
       }
-      this.state.passwordLevel = level
-      this.state.percent = level * 30
-      if (level >= 2) {
-        if (level >= 3) {
+      this.state.passwordLevel = this.state.level
+      this.state.percent = this.state.level * 30
+      if (this.state.level >= 2) {
+        if (this.state.level >= 3) {
           this.state.percent = 100
         }
         callback()
       } else {
-        if (level === 0) {
+        if (this.state.level === 0) {
           this.state.percent = 10
         }
-        callback(new Error('密码强度不够'))
+        callback(new Error(this.$t('user.password.strength.msg')))
+      }
       }
     },
 
     handlePasswordCheck (rule, value, callback) {
       const password = this.form.getFieldValue('password')
-      console.log('value', value)
+      // console.log('value', value)
       if (value === undefined) {
-        callback(new Error('请输入密码'))
+        callback(new Error(this.$t('user.password.required')))
       }
       if (value && password && value.trim() !== password.trim()) {
-        callback(new Error('两次密码不一致'))
+        callback(new Error(this.$t('user.password.twice.msg')))
       }
       callback()
     },