feat: register validation + create + admin improvements

client/components/common/password-strength.vue

@@ -0,0 +1,79 @@
+<template lang="pug">
+  .password-strength
+    v-progress-linear(
+      :color='passwordStrengthColor'
+      v-model='passwordStrength'
+      height='2'
+    )
+    .caption(v-if='!hideText', :class='passwordStrengthColor + "--text"') {{passwordStrengthText}}
+</template>
+
+<script>
+import zxcvbn from 'zxcvbn'
+import _ from 'lodash'
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    hideText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      passwordStrength: 0,
+      passwordStrengthColor: 'grey',
+      passwordStrengthText: ''
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.checkPasswordStrength(newValue)
+    }
+  },
+  methods: {
+    checkPasswordStrength: _.debounce(function (pwd) {
+      if (!pwd || pwd.length < 1) {
+        this.passwordStrength = 0
+        this.passwordStrengthColor = 'grey'
+        this.passwordStrengthText = ''
+        return
+      }
+      const strength = zxcvbn(pwd)
+      this.passwordStrength = _.round((strength.score + 1 ) / 5 * 100)
+      if (this.passwordStrength <= 20) {
+        this.passwordStrengthColor = 'red'
+        this.passwordStrengthText = 'Very Weak'
+      } else if (this.passwordStrength <= 40) {
+        this.passwordStrengthColor = 'orange'
+        this.passwordStrengthText = 'Weak'
+      } else if (this.passwordStrength <= 60) {
+        this.passwordStrengthColor = 'teal'
+        this.passwordStrengthText = 'Average'
+      } else if (this.passwordStrength <= 80) {
+        this.passwordStrengthColor = 'green'
+        this.passwordStrengthText = 'Strong'
+      } else {
+        this.passwordStrengthColor = 'green'
+        this.passwordStrengthText = 'Very Strong'
+      }
+    }, 100)
+  }
+}
+</script>
+
+<style lang="scss">
+
+.password-strength > .caption {
+  width: 100%;
+  left: 0;
+  margin: 0;
+  position: absolute;
+  top: calc(100% + 5px);
+}
+
+</style>