dwyl / dwyl/auth

Show Password in Password Creation Form

Open
#65 0 comments 0 reactions 0 assignees View on GitHub
discuss enhancement priority-3 technical
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:

![image](https://user-images.githubusercontent.com/194400/81140568-b1742500-8f61-11ea-8ae4-8307831a18a6.png)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.