Real-Time Feedback on Password Strength

PasswordStrength.vue

<template>
  <div>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" v-model="password" @input="checkPassword">
    <div v-if="password">
      <p>Password Strength: {{ strength }}</p>
      <div :class="['strength-meter', 'level-' + strengthLevel]"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      strength: '',
      strengthLevel: 0
    };
  },
  methods: {
    checkPassword() {
      const password = this.password;
      const strength = this.calculateStrength(password);

      this.strength = strength.text;
      this.strengthLevel = strength.level;
    },
    calculateStrength(password) {
      let score = 0;

      if (password.length < 6) {
        return { text: 'Weak', level: 1 };
      }

      if (password.length >= 6 && password.length <= 10) {
        score += 1;
      } else if (password.length > 10) {
        score += 2;
      }

      if (/[a-z]/.test(password)) {
        score += 1;
      }

      if (/[A-Z]/.test(password)) {
        score += 1;
      }

      if (/[0-9]/.test(password)) {
        score += 1;
      }

      if (/[^A-Za-z0-9]/.test(password)) {
        score += 1;
      }

      if (password.length > 12) {
        score += 1;
      }

      if (score <= 3) {
        return { text: 'Weak', level: 1 };
      } else if (score <= 5) {
        return { text: 'Medium', level: 2 };
      } else {
        return { text: 'Strong', level: 3 };
      }
    }
  }
};
</script>

<style scoped>
.strength-meter {
  height: 10px;
  width: 100%;
  margin-top: 5px;
}

.level-1 {
  background-color: #ff9999;
}

.level-2 {
  background-color: #ffd699;
}

.level-3 {
  background-color: #99ff99;
}
</style>