My web application contains a profile edit page where users can change their email address, password, etc. The password field is the HTML "password" type, so it automatically masks its contents with bullet characters. Passwords are saved in the database as hashes, so I don't load the actual password into the field, I just load the string "********," which displays as eight bullets. Then when the form is submitted, I check the submitted value, saving the new password if it's anything other than "********."
The problem is that users frequently send help tickets saying their password isn't saving correctly, because they entered a 6 or 10 or whatever length password but 8 dots are appearing when they return to the profile edit page. So the website is behaving as intended, but I'm getting tired of explaining this to users and am trying to think of how to show the accurate number of dots in the field.
The only thing I can think of is to save the password length alongside the hashed password whenever I save a password, then use that length to show the right number of dots. But this would be less secure because it would show a hacker how long each password is.
Another option is just to load the password field empty and hopefully users will be less confused by that. Or I could present this option as a "change password" form to indicate that the form is not trying to load the saved password.
But first I'd like to know if there is a trick to showing those dots accurately?
The safe solution is, to handle a password-change on a dedicated page, independent of other user profile settings.
On the password-change form request the old password, the new password and possibly a confirmation of the new password. Don't pre populate this fields, they should not and cannot be shown correctly without compromising security.
The user profile page on the other hand should not contain any password information at all.