Using Dropbox's zxcvbn password strength estimator

Question

I'm trying to get zxcvbn, Dropbox's password strength estimator, to work right... but I'm having some issues!

I've included the asynchronous loader.

My next problem is that I don't know enough JS to figure out how to actually use this thing....

<input id="password" name="password" size="35" class="textInput required" type="password">

is it used as some kind of monitor on that field?

Thanks for the help, I'm still learning JS/jQuery...

Answer 1

<input id="password" name="password" size="35" class="textInput required" type="password"/>
<div id="result">
Laaa laa laa...
</div>

---

$('#password').keyup(function() {
  var textValue = $(this).val();
  var result = zxcvbn(textValue);
  $('#result').html("cracktime : " + result.crack_time);
  //use this result as you like
    /*
    result.entropy            # bits

result.crack_time         # estimation of actual crack time, in seconds.

result.crack_time_display # same crack time, as a friendlier string:
                          # "instant", "6 minutes", "centuries", etc.

result.score              # [0,1,2,3,4] if crack time is less than
                          # [10**2, 10**4, 10**6, 10**8, Infinity].
                          # (useful for implementing a strength bar.)

result.match_sequence     # the list of patterns that zxcvbn based the
                          # entropy calculation on.

result.calculation_time   # how long it took to calculate an answer,
                          # in milliseconds. usually only a few ms.
    */
});

Fiddle for you, http://jsfiddle.net/MhZ4p/

replace the traverse function for just crack time

traverse(result);

to:

$('#result').html("cracktime : " + result.crack_time);