0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-08 06:30:05 +00:00

Improve password quality meter for very weak passwords

Previously, if the user enters a weak password like "qwerty",
the score is 0, the password strength bar is empty (all gray).
It is easy to not notice the password strength bar at all.

Now, the lowest score for a non-empty password is 1, meaning
the user will see one red bar. This will hopefully draw more
attention to the password strength bar.

Users are still allowed to choose weak passwords.
This commit is contained in:
Pēteris Caune 2024-08-15 11:10:14 +03:00
parent 81515e3ed2
commit 5d63057e78
No known key found for this signature in database
GPG key ID: E28D7679E9A9EDE2
2 changed files with 12 additions and 3 deletions
static/js
templates/accounts

View file

@ -2,7 +2,15 @@ $(function () {
var $pw = $("#password");
var $meter = $("#meter");
$pw.on("input", function() {
var result = zxcvbn($pw.val());
$meter.attr("class", "score-" + result.score);
var candidate = $pw.val();
if (!candidate) {
$meter.attr("class", "score-0");
return;
}
var result = zxcvbn(candidate);
// If user has entered anything at all cap score at 1
var score = Math.max(result.score, 1);
$meter.attr("class", "score-" + score);
});
});

View file

@ -22,7 +22,8 @@
minlength="8"
class="form-control input-lg"
name="password"
placeholder="pick a password (at least 8 characters)">
placeholder="pick a password (at least 8 characters)"
required>
<div id="meter">
<div class="s1 s2 s3 s4"></div>
<div class="s2 s3 s4"></div>