If you’ve logged into Facebook recently you may or may not have noticed that the password field says Password and the email field says Email, which is nice because it means you don’t need to waste space with labels next to your textboxes. I’ve replicated the feature here, and you can download the source here.
However password boxes don’t show text, when you type into them they hash the text to protect you from prying eyes… so how do Facebook do it?
Well they do it with a little CSS and a little JavaScript, but sadly it’s not a simple effect to achieve you can’t just change the input type of the text box on focus, like you might imagine. To get a closer look It’s best if we switch CSS off in the browser and visit facebook, what you’ll see it this:
You’ll notice we have three boxes, now the new middle box is a password input box that is hidden using CSS, If you enter text into it then it’ll be hashed:
If you click on the third text box it disappears and your focus is sent to the second textbox.
So to recap we have to write the following features:
Feature: Password should be displayed then got rid of
Given the password reads “Password”
and the user clicks password
then the “Password” text should be cleared
Feature: Password should be displayed the got rid of when the user tabs
Given the password reads “Password”
and the user is in the Email textbox
and the user hits tab
then the “Password” text should be cleared
Feature: User types a password
Given a user clicks on the password
and starts typing
when the the password is displayed
Then it should be hashed
Feature: User pastes a password
Given a user clicks on the password
and pastes the password
when the the password is displayed
Then it should be hashed
Feature: User tabs then types a password
Given a user has typed their email
and hits tab
and starts typing
when the the password is displayed
Then it should be hashed
Feature: User tabs then pastes a password
Given a user has typed their email
and hits tab
and pastes a password
when the the password is displayed
Then it should be hashed
I managed to replicate the feature and have put the source below, tomorrow I’ll walk through the code and explain how it was achieved.
You can view a demo here: http://www.thewayithink.co.uk/code/prettypassword/prettypassword.html
And can download the source here: http://www.thewayithink.co.uk/code/prettypassword/jquery.prettypassword.zip