A few months ago, Jakob Nielsen wrote about passwords. Specifically, he wrote about the standard practice of the contents of password fields being masked by default. In his typical black/white, on/off, right/wrong Boolean worldview, Father Jakob called for this practice to be abolished completely.
Meanwhile, back in the real world, Apple take a more empathetic approach, acknowledging that there often very good reasons for masking passwords. But that doesn’t mean you can’t offer the user the option to disable password masking if they choose.
This pattern came up in a conversation at Clearleft recently. We were discussing a sign-up process, trying to avoid the nasty pattern of asking users to input the same value twice. We were all in agreement that Apple’s solution to password masking was pretty elegant.
I’d like to use this pattern on the sign up form for Huffduffer but I can’t see a way of easily integrating it with the Mad Libs approach. But I have implemented this option on the log-in form.
Here’s what’s happening under the hood:
- The “show password” checkbox is generated with JavaScript,
- A text input field is also generated with JavaScript but hidden,
- Toggling the “show password” checkbox toggles the display of the password and text fields,
- Entering a character into either field updates the value of the other field.
It would have been a lot simpler to just use JavaScript to toggle the type attribute of one field between “password” and “text”. But, in a certain browser that shall remain nameless, you can’t do that …for very sound security reasons, no doubt.
So the script isn’t as elegant as I’d wish but it gets the job done. Feel free to view source on the JavaScript.
Update: Jonathan Holst points me to a post by Jeff Atwood on this subject. It’s worth reading just to boggle at the insanity of Lotus Notes’ security features
. From the comments there, I found a bookmarklet to reveal password characters.