Color the password strength bar red or green

(imported from commit 6b3fa7d3565a7e4f61a952fc26e1e9e564d894f9)
This commit is contained in:
Keegan McAllister
2013-04-08 14:31:00 -04:00
parent 966545403b
commit 1211061f6a
3 changed files with 9 additions and 5 deletions

View File

@@ -62,7 +62,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
<label class="control-label">Password strength</label> <label class="control-label">Password strength</label>
<div class="controls"> <div class="controls">
<div class="progress" id="pw_strength"> <div class="progress" id="pw_strength">
<div class="bar" style="width: 10%;"></div> <div class="bar bar-danger" style="width: 10%;"></div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -96,7 +96,7 @@
<label class="control-label">Password strength</label> <label class="control-label">Password strength</label>
<div class="controls"> <div class="controls">
<div class="progress" id="pw_strength"> <div class="progress" id="pw_strength">
<div class="bar" style="width: 10%;"></div> <div class="bar bar-danger" style="width: 10%;"></div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -19,7 +19,9 @@ function password_quality(password, bar) {
if (typeof zxcvbn === 'undefined') if (typeof zxcvbn === 'undefined')
return undefined; return undefined;
var quality, result = zxcvbn(password); var result = zxcvbn(password);
var acceptable = result.crack_time >= 1e5;
var quality;
if (bar !== undefined) { if (bar !== undefined) {
// Compute a quality score in [0,1]. // Compute a quality score in [0,1].
@@ -28,8 +30,10 @@ function password_quality(password, bar) {
// Display the password quality score on a progress bar // Display the password quality score on a progress bar
// which bottoms out at 10% so there's always something // which bottoms out at 10% so there's always something
// for the user to see. // for the user to see.
bar.width(((90 * quality) + 10) + '%'); bar.width(((90 * quality) + 10) + '%')
.removeClass('bar-success bar-danger')
.addClass(acceptable ? 'bar-success' : 'bar-danger');
} }
return result.crack_time >= 1e5; return acceptable;
} }