Untitled

<!DOCTYPE html>
<meta charset="utf-8">
<title>klg.passwordEntropy demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/ecmascript" src="passwordModel.js"></script>
<script type="text/ecmascript" src="passwordEntropy.js"></script>
<script type="text/ecmascript">
  jQuery(function($){
    "use strict";

    var d2f = function(x) {
      var f = Math.round(100*x)%100;
      return Math.floor(x) + (f<10?".0":".") + f;
    };

    var rg = function(x) {
      if (x < 0) x = 0; else if (x > 1) x = 1;
      var a,b,c,d;
      // rat. fun. approx. of red-green geodesic
      a = 18.8686; b = 2.21763;
      c = 401.943; d = 650.562;
      a *= x; b *= x; c *= x; d *= x;
      a += 20.3168; b += 30.2787;
      c += 19.1898; d -= 675.851;
      a *= x; b *= x; c *= x; d *= x;
      a += 1.45626; b += 8.00815;
      c -= 447.809; d -= 304.904;
      a *= x; b *= x; c *= x; d *= x;
      b += 0.13718; c -= 251.399;
      d -= 94.2593; c *= x; d *= x;
      c -= 441.895; d -= 285.105;
      c *= x; d *= x;
      c += 719.97; d += 719.97;
      a /= b; a *= 255; a |= 0;
      c /= d; c *= 255; c |= 0;
      return "rgb("+c+","+a+",0)";
    };

    // get a model string and create a strength checker function
    var entropy = klg.passwordEntropy(klg.passwordModel);

    // create GUI
    var ent, bpc, bar, input;
    var update;

    $("#demo")
    .empty()
    .append($("<div>Password:</div>"))
    .append(input = $(document.createElement("input"))
      .css({width:"200px",borderWidth:"1px",padding:0,margin:0})
      .prop({type:"password"})
      .keyup(update = function() {
        var p = $(this).val();
        var s = entropy(p);
        ent.text(d2f(s));
        bpc.text(p ? d2f(s / p.length) : "-");
        bar.css({
          "width": Math.round(Math.atan(s/96)*400/Math.PI)+"px",
          "border-color": rg(s/256)
        });
      })
      .click(update))
    .append($(document.createElement("label"))
      .append($(document.createElement("input"))
        .prop({type:"checkbox",checked:true})
        .change(function() {
          input.prop("type", this.checked ? "password" : "text")
        }))
      .append($(document.createTextNode(" hide"))))
    .append(bar = $(document.createElement("div"))
      .css({width:0,border:"2px solid red",padding:0,margin:0}))
    .append($(document.createElement("div"))
      .append(ent = $(document.createElement("span"))
        .css({display:"inline-block",minWidth:"7ex",textAlign:"right"}))
      .append(document.createTextNode(" bits")))
    .append($(document.createElement("div"))
      .append(bpc = $(document.createElement("span"))
        .css({display:"inline-block",minWidth:"7ex",textAlign:"right"}))
      .append(document.createTextNode(" bpc")));
    ent.text(d2f(0));
    bpc.text("-");
    bar.css({"border-width":"2px 0"});
  });
</script>
<div id="demo">Javascript required</div>