Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button to show/hide password in credentials dialog #1808

merged 3 commits into from Nov 28, 2018

Add button to show/hide password in credentials dialog #1808

merged 3 commits into from Nov 28, 2018


Copy link

@ericcornelissen ericcornelissen commented Nov 25, 2018

Description of the Change

Added a button to the credentials dialog to toggle the input type of the password between "password" and "text" so the user can see which credentials they entered, you can find a preview below.

I did this by adding a state variable named showPassword to the CredentialDialog component that keeps track of the current state (showing or hiding the password), and a button that manipulates this value.

  • If true the <input> type is set to "text" and the <button> text to "Hide".
  • If false the <input> type is set to "password" and the <button> text to "Show"

The button has an onClick listener which is the new method toggleShowPassword, which simply sets the value of the state variable showPassword to !showPassword.

As far as I can tell this is the only place in Atom (core) where a <button> is overlayed on an <input>, hence I added a new class named .github-DialogLabelButton which positions the <button> over the <input> and uses theme-based colors.


Alternate Designs

The implementation of the <button> in HTML (JSX) and CSS is somewhat arbitrary and I'm open to changing it. Note however that I placed it inside the <label> so it can be positioned relative to that.

Currently the button is text-based, alternatively it could be icon-based. However, I did not implement this as the relevant icons are not present/incorrect, see:



Better user experience for users that make typos when entering their credentials, i.e. everyone 馃槢

Possible Drawbacks

No real drawbacks, arguably Shoulder Surfing but as the default still hides the credentials I don't consider this a problem.

Applicable Issues





I tested the feature using two tests:

  1. Verify the input type is "text" when the toggle button is pressed once.
  2. Verify the input type is "password" when the toggle button is pressed twice.

Arguably another test verifying the input type when the button was not pressed can be added, I omitted this as the combination of the two tests above imply that assertion.



Release Notes

The GitHub package now provides a button to show/hide the input values of passwords.

User Experience Research (Optional)

No field research was done for this feature, however there is research supporting the addition of this feature. For example NIST specifies that "... [verifiers] SHOULD offer an option to display the secret..." [1] (where secret refers to the password in this situation).

If desired I can try to find more supporting research.

@ericcornelissen ericcornelissen changed the title Papercut/show credentials Add button to show/hide password in credentials dialog Nov 25, 2018
Copy link

@coveralls coveralls commented Nov 25, 2018

Coverage Status

Coverage decreased (-0.05%) to 85.52% when pulling dfccca2 on ericcornelissen:papercut/show-credentials into 6e07816 on atom:master.

Copy link

@smashwilson smashwilson left a comment

馃憤 Looks good to me. Thanks!

Copy link

@annthurium annthurium left a comment

thank you!

@annthurium annthurium merged commit a70b713 into atom:master Nov 28, 2018
3 checks passed
3 checks passed
atom.github Build #20181125.1 succeeded
continuous-integration/travis-ci/pr The Travis CI build passed
coverage/coveralls Coverage decreased (-0.05%) to 85.52%
@ericcornelissen ericcornelissen deleted the ericcornelissen:papercut/show-credentials branch Nov 29, 2018
This was referenced Jan 2, 2019
@smashwilson smashwilson moved this from In Progress 馃敡 to Merged 鈽戯笍 in Stability Sprint : 20 November 2018 - 8 January 2019 : v0.24.0 Jan 3, 2019
@smashwilson smashwilson mentioned this pull request Jan 3, 2019
16 of 16 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants