CODEWITHSUNDEEP
javascripthtmlpasswordsmeter
user3131345
user3131345

Reputation: 63

Javascript - Simple Password Strength Indicator

I'm trying to create a simple password strength indicator with javascript by changing the value of the html5 progress element, but somethings wrong, can somebody point out the error here please? Console is showing zero errors and it must be something to do with change function not binding to the input with ID 'pwd'?

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
window.addEventListener('load', function() {
var password = document.getElementById("pwd");
  password.addEventListener('change', function() {

  // Reset if password length is zero
  if (password.length === 0) {
      document.getElementById("progresslabel").innerHTML = "";
      document.getElementById("progress").value = "0";
      return;
  }
  // Password requirements
  var match = new Array();
  match.push("[$@$!%*#?&]"); // Special Chars
  match.push("[A-Z]");      // Uppercase
  match.push("[0-9]");      // Numbers
  match.push("[a-z]");     // Lowercase

  // Check progress
  var prog = 0;
  for (var i = 0; i < match.length; i++) {
      if (new RegExp(match[i]).test(password)) {
          prog++;
      }
  }
    //Length must be at least 8 chars
  if(prog > 2 && password.length > 7){
    prog++;
  }
  // Display it
  var progress = "";
  var strength = "";
  switch (prog) {
      case 0:
      case 1:
      case 2:
          strength = "25%";
          progress = "25";
          break;
      case 3:
          strength = "50%";
          progress = "50";
          break;
      case 4:
          strength = "75%";
          progress = "75";
          break;
      case 5:
          strength = "100% - Password strength is good";
          progress = "100";
          break;
  }
  document.getElementById("progresslabel").innerHTML = strength;
  document.getElementById("progress").value = progress;

});
});
</script>
</head>
<body>
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100">70</progress>
<span id="progresslabel"></span></div>
</form>
</body>
</html>

Upvotes: 0

Views: 9136

Answers (3)

Eduardo Gonzalez
Eduardo Gonzalez

Reputation: 45

var password = document.querySelector('#pwd');

password.onkeyup = function (event) {
  handleChange(password)
}

function handleChange(password) {
  var pwd = password.value

  var progresslabel = document.querySelector('#progresslabel')
  var progress = 0;
  var strength = '0';

  switch (pwd.length) {
    case 1:
      strength = '12.5%';
      progress = 12;
      break;
    case 2:
      strength = '25%';
      progress = 25;
      break;
    case 3:
      strength = '37.5%';
      progress = 37.5;
      break;
    case 4:
      strength = '50%';
      progress = 50;
      break;
    case 5:
      strength = '62.5%';
      progress = 62.5;
      break;
    case 6:
      strength = '75%';
      progress = 75;
      break;
    case 7:
      strength = '87.5%';
      progress = 87.5;
      break;
    case 8:
      strength = '100% - Password strength is good';
      progress = 100;
      break;
  }

  // Number, a CAPS, lowercaps and special character.
  let regexp = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
  if (regexp.test(pwd)) {
    // Display it
    progresslabel.innerHTML = strength;
    document.getElementById("progress").value = progress;
  } else {
    progresslabel.innerHTML = '1 Cap, 1 digit, 8 digits atleast.'
  }
}
<form>   
  <div> 
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">     
    <progress id="progress" value="0" max="100">70</progress>     
    <span id="progresslabel"></span>   
  </div> 
</form>

I think this is the right way to do it, using querySelector and keyup handler.

Upvotes: 0

Rudra
Rudra

Reputation: 555

  

jQuery.strength = function( element, password ) {
        var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
        var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
        var score = 0;

        if(password.length > 6){
            score++;
        }

        if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))){
            score++;
        }

        if(password.match(/\d+/)){
            score++;
        }

        if(password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){
            score++;
        }

        if (password.length > 10){
            score++;
        }

        element.removeClass( descClass[score-1] ).addClass( descClass[score] ).css( desc[score] );
    };

jQuery(function() {
  jQuery("#pwd").keyup(function() {
                    jQuery.strength(jQuery("#progress-bar"), jQuery(this).val());
                });
});
 

   form {
      max-width: 400px;
      padding: 2em;
      border:1px dashed #ddd
        
    }
    #pwd{
      border-radius:50px;
      padding: 10px 20px;
      border:2px solid #999;
    }
    *:focus {
      outline-style: none;
    }

    input {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 6px;
      border: 1px solid #ddd;
    }

    #progressBar {
      height: 20px;
      width: 100%;
      margin-top: 0.6em;
      border-radius:50px;
      border:2px solid #ddd
    }

    #progress-bar {
      width: 0%;
      height: 100%;
      transition: width 500ms linear;
      border-radius:50px;
      box-shadow:0px 1px 5px #555
    }

    .progress-bar-danger {
      background: #d00;
    }

    .progress-bar-warning {
      background: #f50;
    }

    .progress-bar-success {
      background: #080;
    }
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h3> Password Strength Using JAVASCRIPT.</h3>
 <form name="passwordStrengthBox">
   <div class="passBox">
    <input type="text" id="pwd" autocomplete="off" placeholder="Enter Passwords">
    <div id="progressBar">
      <div id="progress-bar"></div>
    </div> 
  </div>  
 </form>

Upvotes: 2

ic3b3rg
ic3b3rg

Reputation: 14927

A few issues:

  1. You should listen to the keyup method instead of the change event so that the strength is re-evaluated whenever the password changes (change only fires on blur)
  2. password refers to pwd element but your code is treating it as the input value - I added a pwd variable in the function which is the password element's value
  3. The character tests can be simplified - the reduce I used is functionally equivalent to your code

var password = document.getElementById("pwd");
password.addEventListener('keyup', function() {

  var pwd = password.value

  // Reset if password length is zero
  if (pwd.length === 0) {
    document.getElementById("progresslabel").innerHTML = "";
    document.getElementById("progress").value = "0";
    return;
  }

  // Check progress
  var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/]
    .reduce((memo, test) => memo + test.test(pwd), 0);

  // Length must be at least 8 chars
  if(prog > 2 && pwd.length > 7){
    prog++;
  }

  // Display it
  var progress = "";
  var strength = "";
  switch (prog) {
    case 0:
    case 1:
    case 2:
      strength = "25%";
      progress = "25";
      break;
    case 3:
      strength = "50%";
      progress = "50";
      break;
    case 4:
      strength = "75%";
      progress = "75";
      break;
    case 5:
      strength = "100% - Password strength is good";
      progress = "100";
      break;
  }
  document.getElementById("progresslabel").innerHTML = strength;
  document.getElementById("progress").value = progress;

});
<form>
  <div>
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">
    <progress id="progress" value="0" max="100">70</progress>
    <span id="progresslabel"></span>
  </div>
</form>

Upvotes: 4

Related Questions