customization with zxcvbn

password_strength.css

/*all these color hex below are 508 approved and have atleast 4.5:1 color contrast*/
$very-weak: #800020;
$weak: #DC2A2A;
$so-so: #AA5D00;
$good: #458600;
$great: #006D00;

#pswd-strength-cntnr { margin-top: -.75rem; }

#pswd-strength-txt {
	float:right;
  position: absolute;
}

.h6#pswd-strength {
  float: left;
  color: #000000;
}

.pw-bar {
  background-color: #e9e9e9;
  border: 2px solid #fff;
  box-sizing: border-box;
  float: left;
  height: 12px;
  width: 20%;
}

.pw-very-weak {
  color :$very-weak;
  .pw-bar:nth-child(-n+1) { background-color: $very-weak; }
}

.pw-weak {
  color: $weak;
  .pw-bar:nth-child(-n+2) { background-color: $weak; }
}

.pw-so-so {
  color: $so-so;
  .pw-bar:nth-child(-n+3) { background-color: $so-so; }
}

.pw-good {
  color: $good;
  .pw-bar:nth-child(-n+4) { background-color: $good; }
}

.pw-great {
  color: $great;
  .pw-bar { background-color: $great; }
}

password_strength.html.slim

#pswd-strength-cntnr.hide aria-live='polite' aria-atomic='true'
  .mb2
    .clearfix
      .pw-bar
      .pw-bar
      .pw-bar
      .pw-bar
      .pw-bar   
    / forms.password_strength.intro is -> 'Password strength: '
    / is in an en.yml file
    h3.h6#pswd-strength = t('forms.password_strength.intro')
    span#pswd-strength-txt.bold = ''
    br
    #pswd-feedback

password_strength.js

// zxcvbn returns a strength score from 0 to 4
// we map those scores to:
// 1. a CSS class to the pw strength module
// 2. text describing the score
var matched = 0;
var scale = {
  0: ['pw-very-weak', 'Very weak'],
  1: ['pw-weak', 'Weak'],
  2: ['pw-so-so', 'So-so'],
  3: ['pw-good', 'Good'],
  4: ['pw-great', 'Great!'],
};

  // fallback result if password field is empty or zxcvbn lookup fails
  var fallback = ['pw-na', 'None'];


function analyzePswd() {
  const input  = document.querySelector('input[id="user_password"]');
  const pswdCntnr = document.getElementById('pswd-strength-cntnr');
  const pswdTxt = document.getElementById('pswd-feedback');
  const pswdStrength = document.getElementById('pswd-strength-txt');
  
  function matcher(z){
    const strongRe = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!"#$%&'()*+,-.:;<=>?@{}/^_~`|\[\]]).{8,128}$/;
    const password = $('#user_password').val();
      // below was for testing purposes
      // console.log(password); to see if e.target.value was set
      // console.log("e is +" + password); which will give you what you type as you type it
      // console.log ("in here " + strongRe.test(password) + " END"); testing true or false
      matched = 0;
      var matcher =  password.match(strongRe);
      if (matcher) {
        // console.log(matcher); testing true or false
        // set the global variable
        matched = 1;
      }
    // console.log("checking the score:  = " + z.score + "and the match" + matched);
  }

  function addFeedback(z) {
    var warning = String(z.feedback.warning);
    var suggestions = String(z.feedback.suggestions);
    if(z.score < 3){
    // lookup to replace the comma with a dot/period so that feedback
    // is up to date with english standards
     warning = warning.replace(/\,/g, '. ');
     suggestions = suggestions.replace(/\,/g, '. ');
    }
    if (!warning && !suggestions.length) return '';

    return warning || suggestions;
  };

  if (pswdCntnr){
    pswdCntnr.className = '';
  }
  if (input) {
   input.addEventListener('keyup', function(e) {
    e.preventDefault();
    const z = zxcvbn(e.target.value);
    const fallback = ['pw-na', 'None'];
    matcher(z);
    // console.log("score: " + z.score + "matched: " + matched);
    // if the password doens't meet our constraints, we don't want it to have
    // a rating of great

    if (!matched && z.score == 4) {
      z.score = 3;
      z.feedback.suggestions = "Very uncommon password but does not meet all the requirements";
    } else if (!matched && z.score == 3 ) {
      z.feedback.suggestions = "Good uncommon password but does not meet all the requirements";
    } else if (matched && z.score == 4) {
      z.feedback.suggestions = "All requirements pass and it is a very strong password";
    } else if (matched && z.score == 3){
      z.feedback.suggestions = "All requirements pass, but consider making it stronger with more characters";
    }

    const result = z && z.password.length ? scale[z.score] : fallback;
    if (pswdCntnr){
      pswdCntnr.className = result[0];
    }
    if (pswdStrength){
      pswdStrength.innerHTML = '&nbsp' + result[1];
    }
    var feedback = addFeedback(z);
    if (pswdTxt){
      pswdTxt.innerHTML = feedback + '.';
    }
    // 508 compliance below
    var passStrengthHtml = ( result[1] + " - " + feedback);
    $('.pass-strength').html(" (Present Password Strength: " + passStrengthHtml + ')');
     
  }); 
  }
  
}

document.addEventListener('DOMContentLoaded', analyzePswd);