JSFiddle - React, Tailwind, and code Playground

by Larry Adams

HTML

<H1>Geek's Password Strength Meter </h1>


    This is the strength meter that every site should show when you're creating an account with them. It tells you how many possible passwords there are based on the length and character classes used.


<p>
The password "1p" has 2 characters, one  a lowercase letter and one a number.  To brute force this password, there are 26 possible letters and 10 possible numbers which is (10 + 26) * (10 + 26) = 1,296 possibilities
    . Less than a second to crack!
</p>

<p >These numbers only for demonstration purposes.  Please do your own research on password security!  The numbers are derived from <a href="http://hashcat.net/oclhashcat-plus/">hashcat's site</a>.</p>

<p>
<label class=""  for="fmPass">
<span>Password</span>    
    
<input id="fmPass" type="password" value="" name="Pass" maxlength="100">
</label>
</p>
    <div id="passwordIndicator" >
        <p>
            <span  id="possibilities" class="reset"></span>
        </p>
        <p>
        Time to crack using <input type="text" id="nodes" value="1" size="5" /> core(s):
        </p>
        <p>
        <span  id="rates" class="reset"></span>
        </p>
    </div>

CSS

h1{
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  text-rendering: optimizelegibility;
  font-size: 36px;
  line-height: 40px;
}
p { padding-top:20px}

JavaScript

function strengthMeter(passwordFieldId, nodes) {

    // init undefined 
    if ('undefined' === typeof(nodes)) {
        var nodes = 1;
    }   
    
    // init character classes
    var password = $("#" + passwordFieldId).attr('value');
    var numEx = /\d/;
    var lcEx = /[a-z]/;
    var ucEx = /[A-Z]/;
    var syEx = /\W/;
    var meterMult = 1;
    var character_set_size = 0;
    
    // loop over each char of the password and check it per regexes above.
    // weight numbers, upper case and lowercase at .75, 1 and .25 respectively.
    if (numEx.test(password)) {
        character_set_size += 10;
    }
    if (ucEx.test(password)) {
        character_set_size += 26;
    }
    if (lcEx.test(password)) {
        character_set_size += 26;
    }
    if (syEx.test(password)) {
        character_set_size += 32;
    }

    // assume that 100% is a meterMult of maxMulti
    var strength = Math.pow(character_set_size, password.length);

    // init crackers at hashes/second
    // all numbers from slowest computer here http://hashcat.net/oclhashcat-plus/
    var rateMd5 = 1333000000; 
    var rateSHA1 = 433000000;
    var rateMd5crypt = 855000;
    var rateBcrypt = 604;
        
    // calculate a human readable time based on seconds and nodes
    var secMd5 = secondsToStr(toFixed(strength/(rateMd5*nodes))); 
    var secSHA1 = secondsToStr(toFixed(strength/(rateSHA1*nodes)));
    var secMd5crypt = secondsToStr(toFixed(strength/(rateMd5crypt*nodes)));
    var secBcrypt = secondsToStr(toFixed(strength/(rateBcrypt*nodes)));
    
    var rates = "MD5: " + secMd5 + " <br/>" +
        "SHA1: " + secSHA1 +  "<br/>" +
        "MD5Crypt: " + secMd5crypt + "<br/>" +
        "Bcrypt: " + secBcrypt + "<br/>" +
       " ";
    
    // if null, don't show anything
    if (password.length > 0) {
        $("#passwordIndicator").show();
        $("#possibilities").html(numberWithCommas(strength) + " Possibilities");
        $("#nodes").val(nodes);
        $("#rates").html(rates);
...