Merge pull request #1808 from ericcornelissen/papercut/show-credentials

Add button to show/hide password in credentials dialog

Author: Tilde Ann Thurium

lib/views/credential-dialog.js

@@ -23,12 +23,14 @@ export default class CredentialDialog extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    autobind(this, 'confirm', 'cancel', 'onUsernameChange', 'onPasswordChange', 'onRememberChange', 'focusFirstInput');
+    autobind(this, 'confirm', 'cancel', 'onUsernameChange', 'onPasswordChange', 'onRememberChange',
+      'focusFirstInput', 'toggleShowPassword');
 
     this.state = {
       username: '',
       password: '',
       remember: false,
+      showPassword: false,
     };
   }
 
@@ -61,13 +63,16 @@ export default class CredentialDialog extends React.Component {
           <label className="github-DialogLabel">
             Password:
             <input
-              type="password"
+              type={this.state.showPassword ? 'text' : 'password'}
               ref={e => (this.passwordInput = e)}
               className="input-text github-CredentialDialog-Password"
               value={this.state.password}
               onChange={this.onPasswordChange}
               tabIndex="2"
             />
+            <button className="github-DialogLabelButton" onClick={this.toggleShowPassword}>
+              {this.state.showPassword ? 'Hide' : 'Show'}
+            </button>
           </label>
         </main>
         <footer className="github-DialogButtons">
@@ -122,4 +127,8 @@ export default class CredentialDialog extends React.Component {
   focusFirstInput() {
     (this.usernameInput || this.passwordInput).focus();
   }
+
+  toggleShowPassword() {
+    this.setState({showPassword: !this.state.showPassword});
+  }
 }

styles/dialog.less

@@ -19,7 +19,22 @@
   &Label {
     flex: 1;
     margin: @github-dialog-spacing;
+    position: relative;
     line-height: 2;
+
+    &Button {
+      position: absolute;
+      background: transparent;
+      right: .3em;
+      bottom: 0;
+      border: none;
+      color: @text-color-subtle;
+      cursor: pointer;
+
+      &:hover {
+        color: @text-color-highlight;
+      }
+    }
   }
 
   &Buttons {

test/views/credential-dialog.test.js

@@ -85,4 +85,24 @@ describe('CredentialDialog', function() {
       assert.isFalse(wrapper.find('.github-CredentialDialog-remember').exists());
     });
   });
+
+  describe('show password', function() {
+    it('sets the passwords input type to "text" on the first click', function() {
+      wrapper = mount(app);
+
+      wrapper.find('.github-DialogLabelButton').simulate('click');
+
+      const passwordInput = wrapper.find('.github-CredentialDialog-Password');
+      assert.equal(passwordInput.prop('type'), 'text');
+    });
+
+    it('sets the passwords input type back to "password" on the second click', function() {
+      wrapper = mount(app);
+
+      wrapper.find('.github-DialogLabelButton').simulate('click').simulate('click');
+
+      const passwordInput = wrapper.find('.github-CredentialDialog-Password');
+      assert.equal(passwordInput.prop('type'), 'password');
+    });
+  });
 });