Show Password in Password Creation Form
- Dominant language
- Elixir
- Stars
- 141
- Forks
- 8
- PR merge metrics
- No merged PRs in 30d
Description
At present the Password creation form (when registering with Email address_) is quite basic:

The password field uses an [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) which is semantic and good UX.
While hiding/obfuscating the password gives the _appearance_ of security, it does not offer the ability for the person to _check_ that they have typed the password correctly.
Here is a codepen example of the basics of this: https://codepen.io/Sohail05/pen/yOpeBm
**Note**: I prefer to have the word "**Show**" and "**Hide**" rather than an eye icon.
This appears to be the consensus in: https://ux.stackexchange.com/questions/73360/which-is-the-better-ux-for-a-user-to-see-their-password-at-the-login-screen
# Todo
I feel _strongly_ that registration and login should be mostly server-side rendered and _progressively enhanced_ with HTML, CSS and JS where it measurably improves UX.
With that in mind, I feel we should create a minimal amount of CSS+JS to enhance the Password field with a "Show"/"Hide" toggle feature. It should be contained within the `password-prompt.html.eex` template so it's _immediately_ clear where to maintain the code.
+ [ ] Add in-line button on the _right_ of the password input field
+ [ ] Create `` tag in the `password-prompt.html.eex` template file
+ [ ] Define `toggle_show()` function in the `<script>` tag with the necessary functionality.
+ [ ] The Show/Hide button should display the text "Show" when the password is hidden (asterisks)
+ [ ] The Show/Hide button should display the text "Hide" when the password is visible.
+ [ ] Clicking/tapping the toggle button should display the password in plain text or asterisks.
+ [ ] When the button is "Show", clicking it will _show_ the password plain text.
+ [ ] When the button is "Hide", clicking it will _hide_ the password and make it asterisks again.
+ [ ] We can include a test for the _presence_ of the "Show" button in Phoenix but we may need to add a more sophisticated testing for actual JS functionality. `#discuss` #64
# Relevant Reading
+ Stop masking passwords (UX research): [nngroup.com/articles/stop-password-masking](https://www.nngroup.com/articles/stop-password-masking/)
+ Password UX research summary: https://cxl.com/blog/password-ux
+ UX Recommendations for good password form: [designexcellent.com/ux-login-register-password](https://designexcellent.com/ux-login-register-password/)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.