Propose new features
Designing Decidim together
Add show password option on sign in, sign up and forgot password forms
Is your feature request related to a problem? Please describe.
Problem
We’ve had a lot of support tickets from users who had a really hard time typing a 10 character long password twice without making any error.
As there isn’t instant input validation on the password field many ran into the error “passwords do not match” several times when sending the form.
For existing users who tried to sign in, not being able to see what they were typing leads to think they forgot their password.
During user testing we’ve seen users type their password in the email field first (sometimes on an external text editor) and then copy paste it in the password field to make sure they weren’t making any mistakes. On mobile this can be particularly painful for the user.
Describe the solution you'd like
As a user who needs to type a password on a Decidim form I should have a show password option so I can proofread what I’m typing.
On most website this option is offered directly on the field using an eye icon. For accessibility reasons we think it might be better to add a checkbox bellow the password fields (like twitter is doing).
Describe alternatives you've considered
Get rid of password using magic links (External link)
Additional context
This proposal is part of a larger scope to improve authentication flow in Decidim. Working document here (External link).
Does this issue could impact on users private data?
No
Funded by
Angers and OSP
This proposal has been accepted and is under development
This proposal is affected by the redesign process and will be used as feedback for the design team.
List of Endorsements
Report inappropriate content
Is this content inappropriate?
Comment details
You are seeing a single comment
View all comments
Conversation with Carol Romero
Sounds great! We can have a meeting with Ivan and Álvaro to fine tune design aspects if needed, but avanti.
Thanks ! We are working on a figma, I'll post it here and ping them to get feeback.
Good! Oh also about the accessibility issue with the show password option, it seems that both options are valid (eye icon/checkbox) if the appropriate labels are implemented:
* https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/
* https://stackoverflow.com/questions/61270823/accessibility-show-hide-password-button-in-a-password-input
Hey ! Here is figma prototype for this https://www.figma.com/proto/xpUjY6urnlyn1yVW300208/Improve-Sign-up%2Fin?page-id=0%3A1&node-id=2%3A624&viewport=2020%2C542%2C0.26&scaling=min-zoom
We went for the checkbox + text approach as recommended in this article : https://www.mishacreatrix.com/improve-usability-of-password-fields
If @microstudi and @furilo want to provide feedback. Comments are open.
Thanks for sharing the mockup @virgile_deville! Is this the latest version though? Because the nickname field is still visible. Regarding the password, we'd really go with the accessibility compliant eye icon option 👁️
Loading comments ...