Add live password strength indicators

test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue

@@ -35,8 +35,19 @@
             type="password"
             hint="Minimal 8 karakter, wajib huruf besar, huruf kecil, angka, dan simbol"
             persistent-hint
+            :success="passwordReady"
+            :error="passwordTouched && !passwordReady"
+            :error-messages="passwordTouched && !passwordReady ? ['Password belum memenuhi aturan'] : []"
+            @blur="passwordTouched = true"
             v-model="password"
           ></v-text-field>
+          <div class="caption mt-1">
+            <span :class="passwordChecks.length ? 'green--text' : 'red--text'">• Minimal 8 karakter</span><br>
+            <span :class="passwordChecks.upper ? 'green--text' : 'red--text'">• Ada huruf besar (A-Z)</span><br>
+            <span :class="passwordChecks.lower ? 'green--text' : 'red--text'">• Ada huruf kecil (a-z)</span><br>
+            <span :class="passwordChecks.number ? 'green--text' : 'red--text'">• Ada angka (0-9)</span><br>
+            <span :class="passwordChecks.symbol ? 'green--text' : 'red--text'">• Ada simbol</span>
+          </div>
         </v-flex>
 
         <v-flex xs12 pa-1>
@@ -79,6 +90,7 @@ module.exports = {
       username: '',
       displayName: '',
       password: '',
+      passwordTouched: false,
       selectedProject: null,
       projectKeyword: '',
       pendingProjects: []
@@ -90,6 +102,23 @@ module.exports = {
     assignedProjects() { return this.isEditMode ? (this.selectedUser.projects || []) : this.pendingProjects },
     dialogsuccess() { return this.$store.state.dashboard_user.dialog_success },
     msgsuccess() { return this.$store.state.dashboard_user.msg_success },
+    passwordChecks() {
+      let pwd = this.password || ''
+      return {
+        length: pwd.length >= 8,
+        upper: /[A-Z]/.test(pwd),
+        lower: /[a-z]/.test(pwd),
+        number: /[0-9]/.test(pwd),
+        symbol: /[^A-Za-z0-9]/.test(pwd)
+      }
+    },
+    passwordReady() {
+      return this.passwordChecks.length
+        && this.passwordChecks.upper
+        && this.passwordChecks.lower
+        && this.passwordChecks.number
+        && this.passwordChecks.symbol
+    },
     projectItems() {
       return (this.$store.state.dashboard_user.project_options || []).map(p => {
         return Object.assign({}, p, { label: p.project_number + ' - ' + p.project_name })
@@ -104,6 +133,7 @@ module.exports = {
         this.username = val.User_Username || ''
         this.displayName = val.User_DisplayName || ''
         this.password = ''
+        this.passwordTouched = false
         if (val && val.User_ID) this.pendingProjects = []
       }
     },
@@ -140,6 +170,7 @@ module.exports = {
         return false
       }
       if (requirePassword) {
+        this.passwordTouched = true
         let pwd = this.password || ''
         if (pwd.length < 8) {
           alert('Password minimal 8 karakter')
@@ -170,6 +201,7 @@ module.exports = {
           }
           this.pendingProjects = []
         }
+        this.passwordTouched = false
         this.$store.commit('dashboard_user/update_selected_user', {})
         this.refreshList()
       } else {
@@ -258,6 +290,7 @@ module.exports = {
       this.username = ''
       this.displayName = ''
       this.password = ''
+      this.passwordTouched = false
       this.selectedProject = null
       this.projectKeyword = ''
       this.pendingProjects = []