How to use "zxcvbn" lib with PrimeVue Password component?

I am using the PrimeVue Password component with strength meter.

I want to integrate it with the zxcvbn library for checking password strength. The zxcvbn library provides a strength score, and I want to map that score to the strength meter.

Specifically, I want:

• A zxcvbn score of 2 for "medium" strength.
• A zxcvbn score of 3 for "strong" strength.

However, I'm unsure how to integrate this since the Password Strength Meter uses mediumRegex and strongRegex props to check for patterns in the input. I need guidance on how to use the zxcvbn score with these props, or maybe any other way of integrating the two.

<template>
  <div class="card flex justify-center">
    <Password v-model="password" placeholder="Password" />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import zxcvbn from 'zxcvbn';

const password = ref(null);

// How do we use this 'score' for the Password strength meter?
// Score of 2 is medium, score of 3 or above is strong.
watchEffect(() => {
  if (password.value) {
    const { score } = zxcvbn(password.value);
    console.log(score);
  }
});
</script>

Live reproduction: https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-l62tv7?file=src%2FApp.vue

The algorithm of Password for testing the strength is fixed, it would require to reimplement the meter in content slot and update it on model update.

Fortunately, Primevue components are written with Options API and easily extendable. It can be seen that testStrength method is responsible for calculating the strength. zxcvbn uses a similar score but it has the range 0-4, while testStrength is 1-3.

The score can be clamped, and the extended component can be:

defineComponent({
  name: 'MyPassword',
  extends: Password,
  methods: {
    testStrength(value) {
      const { score } = zxcvbn(value);
      return value ? Math.max(1, Math.min(score, 3))) : 0;
    }
  }
})