zxcvbnでパスワードの強度判定 クソパスワードにダメ出しを！

<script src="./zxcvbn-master/dist/zxcvbn.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js" integrity="sha512-TZlMGFY9xKj38t/5m2FzJ+RM/aD5alMHDe26p0mYUMoCF5G7ibfHUQILq0qQPV3wlsnCwL+TPRNK4vIWGLOkUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

#npmでzxcvbnをインストールする場合
npm install zxcvbn

#Bowerでzxcvbnをインストールする場合
bower install zxcvbn

<script src="./node_modules/zxcvbn/dist/zxcvbn.js"></script>

<!-- HTMLフォーム -->
<form>
  <input type="password" name="password" id="password-input" />
</form>

<!-- JavaScript -->
<script>
  //パスワードの入力値を取得
  const password = document.querySelector('#password-input').value;
  //パスワードの強度を判定
  const result = zxcvbn(password);
  //zxcvbnの出力
  console.log(result.score); //パスワードの強度を0~4のスコアで表す（4が最も強い）
  console.log(result.feedback.warning); //パスワードに対するフィードバック（警告）
  console.log(result.feedback.suggestions); //パスワードに対するフィードバック（改善案）
</script>

zxcvbn(password, ['string1', 'string2', ...])

//追加辞書を指定しない場合
const password = 'masawo_pw01';

const result = zxcvbn(password);
console.log(result.score);

/*出力
4
*/

//追加辞書を指定する場合
const userid = 'masawo';
const password = 'masawo_pw01';

const result = zxcvbn(password, [userid]);
console.log(result.score);

/*出力
2
*/

<!-- HTMLフォーム -->
<form>
  <label>
    Password:
    <input type="password" name="password" id="password-input" />
  </label>
  <button type="submit">送信</button>
  <p id="feedback-message"></p>
</form>

<!-- JavaScript -->
<script>
  //フォームの要素を変数に入れておく
  const passwordInput = document.querySelector('#password-input');
  const feedbackMessage = document.querySelector('#feedback-message');
  const form = document.querySelector('form');

  //フォームが送信されるときにパスワードをチェックする
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const password = passwordInput.value;

    //zxcvbnによるパスワード強度チェック
    const result = zxcvbn(password);

    //バリデーションメッセージを表示する
    switch (result.score) {
      case 0:
        feedbackMessage.textContent = 'クソみたいなパスワードです';
        break;
      case 1:
        feedbackMessage.textContent = '使い物にならないパスワードです';
        break;
      case 2:
        feedbackMessage.textContent = 'つまらないパスワードです';
        break;
      case 3:
        feedbackMessage.textContent = 'まぁ合格のパスワードです';
        break;
      case 4:
        feedbackMessage.textContent = 'ファビュラスなパスワードです';
        break;
      default:
        feedbackMessage.textContent = '';
    }
  });
</script>

<!-- HTMLフォーム -->
<form>
  <label>
    Password:
    <input type="password" name="password" id="password-input" />
  </label>
  <div class="progress-bar-container">
    <div class="progress-bar" id="password-strength-meter"></div>
  </div>
</form>

<!-- CSS -->
<style>
  .progress-bar-container {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 4px;
  }
  .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #ddd;
    border-radius: 4px;
    transition: width 0.4s ease-in-out;
  }
  .strength-0 {
    width: 2%;
    background-color: red;
  }
  .strength-1 {
    width: 25%;
    background-color: orange;
  }
  .strength-2 {
    width: 50%;
    background-color: gold;
  }
  .strength-3 {
    width: 75%;
    background-color: yellowgreen;
  }
  .strength-4 {
    width: 100%;
    background-color: green;
  }
</style>

<!-- JavaScript -->
<script>
  //フォームの要素を変数に入れておく
  const passwordInput = document.querySelector('#password-input');
  const meter = document.querySelector('#password-strength-meter');

  //フォームの値が変更されたら、パスワードをチェックし、メーターのclassを書き換える
  passwordInput.addEventListener('input', function () {
    //zxcvbnによるパスワード強度チェックとスコアの取得
    const password = passwordInput.value;
    const strength = zxcvbn(password).score;

    //パスワードが入力されていないとき
    if (password.length === 0) {
      meter.className = '';
      //パスワードが入力されているとき
    } else {
      meter.className = 'progress-bar strength-' + strength;
    }
  });
</script>