Click here to Skip to main content
14,640,505 members
Articles » Web Development » ASP.NET » Howto
Tip/Trick
Posted 16 Aug 2015

Stats

8.4K views
2 bookmarked

Making Passwords Visible with jQuery

Rate this:
4.78 (4 votes)
Please Sign up or sign in to vote.
4.78 (4 votes)
16 Aug 2015CPOL
How to add a "Show Password" checkbox to ASP.NET MVC projects.

Background

I very recently coded up some views for new members on a site to register, to change their passwords, and in one user story, for administrative members to sign up other members, and be able to set temporary passwords for them. I’ve always prefered a UI that allows an option for passwords to be visible, and I thought I’d offer my users that option. It also helps a bit having it myself when I do some manual testing.

Using the Code

Here is the somewhat hackish solution I came up with. I am no jQuery wizard, but this code seems to work just fine.

    function copyDataAttributes(source, destination) {
    for (var i = 0; i < source.attributes.length; i++) {
        var a = source.attributes[i];
        if (a.name.indexOf("data-") == 0) {
            destination.attr(a.name, a.value);
        }
    }
}
function setPasswordVisibility() {
    if ($("#PasswordsVisible").is(':checked')) {
        $('form').find('input:password').each(function() {
            var newText = $("");
            copyDataAttributes(this, newText);
            newText.attr({ id: $(this).attr("id"), 
		name: $(this).attr("name"), value: $(this).attr("value") })
                .addClass("password").bind('copy', function() { return false; })
                .insertBefore(this);
        }).remove();
    } else {
        $('form').find('input:text.password').each(function() {
            var newPassword = $("");
            copyDataAttributes(this, newPassword);
            newPassword.attr({ id: $(this).attr("id"), 
		name: $(this).attr("name"), value: $(this).attr("value") })
                .insertBefore(this);
        }).remove();
    }
}
jQuery(function () {
    setPasswordVisibility();
    $("#PasswordsVisible").click(function () {
        setPasswordVisibility();
    });
});

Points of Interest

My main function, setPasswordVisibility, checks if passwords should be visible or not, and if so, sets about making them visible. Initially, I though this would be as easy as changing the type of an input from ‘password’ to ‘text’, but changing the type attribute is simply not allowed. Some research found an acceptable workaround in replacing a ‘password’ type input with an almost identical ‘text’ type input. This is of course reversed and a ‘text’ input replaced with a ‘password’ one to hide a password again.

What complicates matters here is having two inputs for the password, with one for confirmation, so I brutishly applied this to all passwords on a form. Feel free to add some finesse and narrow down the target. Further complications are provided by the ‘data-‘ validation attributes that MVC scaffolding adds to elements based on model metadata; in this case stuff used to compare the two password fields using jQuery validation. I didn’t want to copy all attributes, but I felt safe copying all ‘data-‘ attributes, as they are for all intents and purposes my domain, and not that of the DOM.

Notice that when I turn a ‘password’ input into a ‘text’ input, I add a ‘password’ class to it, so when I hide passwords again, I don’t just hide all text inputs.

What happens here is when the page loads, I grab the click event of a checkbox that you would use check to make passwords visible. I also run the main function independently of the click event, because the checkbox might already be checked.

History

An old article moved from a blog I am retiring.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Brady Kelly
Founder Erisia Web Development
South Africa South Africa
I am a software developer in Johannesburg, South Africa. I specialise in C# and ASP.NET MVC, with SQL Server, with special fondness for MVC and jQuery. I have been in this business for about eighteen years, and am currently trying to master Angular 4 and .NET Core, and somehow find a way to strengthen my creative faculties.
- Follow me on Twitter at @bradykelly

Comments and Discussions

 
GeneralNice Pin
Abhishek Kumar Goswami18-Aug-15 3:15
professionalAbhishek Kumar Goswami18-Aug-15 3:15 
good idea actually, we usually get this option in mobile app but it is nice idea to give that option to user if they wanna see the password however since web screen usually is bigger so we usually not propose to give this option but in case that case we are mark user a warning message/prompt like to make sure you really wanna see your password or mistakenly clicked on show password button.
Abhishek Goswami

SuggestionOne suggestion Pin
Tridip Bhattacharjee17-Aug-15 20:25
professionalTridip Bhattacharjee17-Aug-15 20:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.