Dynamically check password strength & confirmation

Tweaked CSS..

margin/padding: 0px; is equal to margin/padding: 0;

0 is zero, no matter id it's ems, px, pt, or whatever...

Line 31 of user.js is: var newClass = cssClass[result.strength]; Now, when user clears the whole password, result has no value, hence, result.strength returns nothing and undefined class is set. It could be changed to var newClass = cssClass[result.strength] || '';.

Why is there 15px margin on left side? It looks better when it's vertically just below the starting point of the password field, i.e. margin-left: 0;.

For the strength, it never sets it to "High" unless you have a symbol is the password, even if the password is say: s1a2t3n4a5m6.

When a short password is entered, it says "Your password should be at least six characters in length for a minimum level of security.". This may even make impression that they need to provide a password of at least 6 characters length to proceed; or maybe it's just fine?

More that could be included is, let the user type the full password and then evaluate it's strength. In other words, wrap the evaluation code in setTimeout() with a timeout delay of around 400ms. Something like:

    this.timer    = undefined;

    // Monitor keyup event.
    $(this).keyup(function() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = undefined
      }

      this.timer = setTimeout(function() {
        // ... evaluation code ...
      }, 400);
    }

Also, the user may even paste the password using mouse. Keyup event won't detect that.

#2 Haven't tested it anywhere else, but installation configuration. Ubuntu/FF2.
#3 Maybe let such a password be considered as secure(highly)? Of course if alphabets and numbers both are at least 4 in number, totaling 8..?

It's still down. (1024x768 resolution).

+1 on a password strength indicator.
But I think the 'Your password is complex enough ...' message should be removed. Why bother the user with an additional message if everthing is OK? A simple 'strength: high' on the right should be fine in that case.

Maybe you could further have friendly messages.. and "Your password..." could be changed to "The password...". Just an opinion :)

• Passwords are recommended to be at least six characters in length for a minimum level of security.

  Passwords are..., it's only 1 password, with a confirmation repetition. And this, at first recommends six characters, user does put a six char. pass, and then discovers I need to put numbers, punctuation too(through messages shown on next strength level), that might be bit unexpected. Perhaps, how about something like this:

  It is recommended to choose a password that contains at least six characters and includes a number and punctuation.
  (Maybe it's a long message, but to the point imo.)

• The password currently only contains letters. Please add a number and punctuation to strengthen it.
  How about:
  It is recommended to include numbers and punctuation in the password.
• To increase the password's strength please add punctuation characters.
  Suggestion:
  It is recommended to include punctuation in the password.
• The password should not be the same as the username.
  Suggestion:
  It is recommended to choose a password different from the username.

So each message's suggestion seems to be stepping down as the user keeps including each suggestion from the first message. If the strength is low, it says It is recommended to choose(a different pass or increase length)..., if medium, it would say It is recommended to include....

More:

• Confirmation matches password.
  The password and confirmation password match. Maybe?
• Password and confirmation do not match.
  Confirmation password mismatches. Or The password and confirmation password do not match.

2 english pennies :)

subscribing. I'll test this out in the next few days. I really like this functionality.

div.ok, tr.ok {
  background: #EDFFED none repeat scroll 0% 50%;
  padding: 2px;
}
div.ok {
  border: 1px solid #00AA00;
}
.ok {
  color: #008000;
}

This combination makes green/ok text readable on low resolution screens. But the same .ok class' color is used else where too, like on "Status report" page, there these colors look a lot fancy and bright no?

Still some suggestions:
"The confirmation is correct." -> "Password confirmed correctly."
"The password and confirmation do not match." -> "Confirmation password mismatched!" or mismatches?

Also at the very first time of installation, "Password strength:" string appeared(without any css) on right to the password field; no field wasn't touched yet. Couldn't reproduce on refresh, but I remember the same happening last time as well.

Worked like a champ in firefox. Got nothing in safari. Though, safari is terrible with javascript.

Here's something interesting. I tested it in webtoolkit (safari backend) with Drosera (debugging tool) and it didn't show user.js being pulled into the page load. Wonder if there is something in there safari doesn't like to load.

I've tested this and it works as advertised.

The only minor gripe is that the placement of the status messages are not consistent. The "do not match" message is displayed on the side, the "too short" message is displayed below the textfield. Some errors below, some errors on the side.

It's minor and I don't have a suggestion for improvement so I decided not to mention it in first place. But maybe there are more creative people that do know how to fix this. Either way, it should not hold up this patch IMO.

Another thought that occurred to me, was that at some point, we might want to make a form type for passwords. Not sure if that's feasible with two fields but it might be worth exploring. This isn't a showstopper either.

Excellent eye for detail, thanks. Still, it can be improved:

• The "medium" color should be a bit darker, to improve readability on the white background.
• When clearing the password field, the old tips should go away immediately, not after the delay, since the user is trying a new password.
• The delay is for dealing with typing, and should not be used when the field is blurred. This means that when you tab away from the field, the password should be checked immediately.
• Moving the show() to after setting the CSS class and filling in the messages. In theory, there could be flicker in the old patch on really fast machines.

These are all relatively simple to fix, so I did.

I also think it is better to move the tips box to below the confirm field, since it is much tidier, means the fields don't jump around and brings it closer to the normal description.

Before: http://acko.net/dumpx/pwd1.png
After: http://acko.net/dumpx/pwd2.png

I also noticed this change:

-  background: #dfd;
+  background: #dfd none repeat scroll 0% 50%;<

Because of the way shorthand properties like background work, and because there is no image, these two rules should be entirely equivalent. Why was this added?

Finally, the CSS needed to be updated for RTL. New patch attached.

To others wondering why this is so important to get 'right': this is part of the installer, and thus part of our first impression to the user. The previous incarnations were much too "in your face" and would e.g. annoy users by giving unnecessary hints while they were still typing. This needs to be useful and clean.

FInal fixes:

• A password that is long enough, but only has one 'feature' (letters, numbers or punctuation) should count as low, not medium strength.
• Originally, the description div is visible, but empty. This causes it to take up some space. Tabbing through the fields without typing anything causes it to become invisible, and shifts everything up a bit. Hiding it from the start fixes this.

The 'Correct' string after the 'Confirm password' textfield is a little confusing. What does that mean? I guess it means that the entered strings are identical, but you cant read this from the layout or description. Otherwise looks good from a visual inspection.

'Correct' might be interpreted as (1) passwords match or (2) the strength is good enough. It might be better to write 'Passwords match correctly' or just 'Passwords match: yes/no' (consistent with the other message). We're nitpicking now. ;)

Subscribing.

Subscribing

Nice patch! I personally think it's requiring too strong of a password in order to qualify as 'strong'... "n38f@k2d" is a very strong password, but it's only scored a 'medium'. Just my $0.02.

Rerolled tracking HEAD.

"n38f@k2d" has not uppercase letters. could be stronger ;-)

Tested and committed. Thanks Chris and Steven.

This addition is just great! Is there any chance to see it implemented into Drupal 5 ???

Extraordinarily unlikely. Once a Drupal version is released, it doesn't get any new features. If it did, it would be a new version. :-)

There seems to be reduced side paddings. It can be observed on the first warning about status (the cron one). It's seems to be due to this patch, as it was observed the same day this was committed.

Doesn't seem intentional to me, so, marking the issue back as active.

Please don't. :-) If there's a bug, please file it as a new bug. Tacking it on here only makes the thread longer and harder to read, and keeps the issue from being auto-closed.

subscribing

(posted in error. please ignore.)

md5(pass);

mayur pimple