fixed register password inline validation

Author: msgill2017

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

@@ -36,6 +36,7 @@ export default {
     'The password is not strong enough',
   'user.password.strength.strong': 'Strength: strong',
   'user.password.strength.medium': 'Strength: medium',
+  'user.password.strength.low': 'Strength: low',
   'user.password.strength.short': 'Strength: too short',
   'user.confirm-password.required': 'Please confirm your password!',
   'user.phone-number.required': 'Please enter your phone number!',

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

@@ -34,6 +34,7 @@ export default {
   'user.password.strength.msg': '密码强度不够 ',
   'user.password.strength.strong': '强度：强',
   'user.password.strength.medium': '强度：中',
+  'user.password.strength.low': '强度：低',
   'user.password.strength.short': '强度：太短',
   'user.confirm-password.required': '请确认密码！',
   'user.phone-number.required': '请输入正确的手机号',

src/utils/util.js

@@ -65,3 +65,31 @@ export function removeLoadingAnimate (id = '', timeout = 1500) {
     document.body.removeChild(document.getElementById(id))
   }, timeout)
 }
+export function scorePassword (pass) {
+  let score = 0
+  if (!pass) {
+    return score
+  }
+  // award every unique letter until 5 repetitions
+  const letters = {}
+  for (let i = 0; i < pass.length; i++) {
+      letters[pass[i]] = (letters[pass[i]] || 0) + 1
+      score += 5.0 / letters[pass[i]]
+  }
+
+  // bonus points for mixing it up
+  const variations = {
+      digits: /\d/.test(pass),
+      lower: /[a-z]/.test(pass),
+      upper: /[A-Z]/.test(pass),
+      nonWords: /\W/.test(pass)
+  }
+
+  let variationCount = 0
+  for (var check in variations) {
+      variationCount += (variations[check] === true) ? 1 : 0
+  }
+  score += (variationCount - 1) * 10
+
+  return parseInt(score)
+}

src/views/user/Register.vue

@@ -18,7 +18,7 @@
         v-model="state.passwordLevelChecked">
         <template slot="content">
           <div :style="{ width: '240px' }" >
-            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
+            <div :class="['user-register', passwordLevelClass]">{{ $t(passwordLevelName) }}</div>
             <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
             <div style="margin-top: 10px;">
               <span>{{ $t('user.register.password.popover-message') }}
@@ -98,12 +98,13 @@
 <script>
 import { getSmsCaptcha } from '@/api/login'
 import { deviceMixin } from '@/store/device-mixin'
+import { scorePassword } from '@/utils/util'
 
 const levelNames = {
-  0: '低',
-  1: '低',
-  2: '中',
-  3: '强'
+  0: 'user.password.strength.short',
+  1: 'user.password.strength.low',
+  2: 'user.password.strength.medium',
+  3: 'user.password.strength.strong'
 }
 const levelClass = {
   0: 'error',
@@ -151,37 +152,26 @@ export default {
   },
   methods: {
     handlePasswordLevel (rule, value, callback) {
-      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)) {
-        this.state.level++
-      }
-      // 判断字符串中有没有字母
-      if (/[a-zA-Z]/.test(value)) {
-        this.state.level++
-      }
-      // 判断字符串中有没有特殊符号
-      if (/[^0-9a-zA-Z_]/.test(value)) {
-        this.state.level++
+       return callback()
       }
-      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
+      console.log('scorePassword ; ', scorePassword(value))
+      if (value.length >= 6) {
+        if (scorePassword(value) >= 30) {
+          this.state.level = 1
         }
-        callback()
-      } else {
-        if (this.state.level === 0) {
-          this.state.percent = 10
+        if (scorePassword(value) >= 60) {
+        this.state.level = 2
         }
+        if (scorePassword(value) >= 80) {
+        this.state.level = 3
+        }
+      } else {
+        this.state.level = 0
         callback(new Error(this.$t('user.password.strength.msg')))
       }
-      }
+      this.state.passwordLevel = this.state.level
+      this.state.percent = this.state.level * 33
     },
 
     handlePasswordCheck (rule, value, callback) {