feat: register validation + create + admin improvements

client/components/common/loader.vue

@@ -0,0 +1,51 @@
+<template lang='pug'>
+  v-dialog(v-model='value', persistent, max-width='350')
+    v-card.loader-dialog.radius-7(:color='color', dark)
+      v-card-text.text-xs-center.py-4
+        atom-spinner.is-inline(
+          :animation-duration='1000'
+          :size='60'
+          color='#FFF'
+          )
+        .subheading {{ title }}
+        .caption {{ subtitle }}
+</template>
+
+<script>
+import { AtomSpinner } from 'epic-spinners'
+
+export default {
+  components: {
+    AtomSpinner
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: 'blue darken-3'
+    },
+    title: {
+      type: String,
+      default: 'Working...'
+    },
+    subtitle: {
+      type: String,
+      default: 'Please wait'
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+  .loader-dialog {
+    .atom-spinner.is-inline {
+      display: inline-block;
+    }
+    .caption {
+      color: rgba(255,255,255,.7);
+    }
+  }
+</style>

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>