From 098f44576530e3722e9cd4999bb754b33474b9ac Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Sun, 25 Nov 2018 15:32:58 +0200
Subject: [PATCH 1/3] Add textual button to show/hide credentials in
 credentials dialog

---
 lib/views/credential-dialog.js | 13 +++++++++++--
 styles/dialog.less             | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/lib/views/credential-dialog.js b/lib/views/credential-dialog.js
index 0694857b79..f363021991 100644
--- a/lib/views/credential-dialog.js
+++ b/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});
+  }
 }
diff --git a/styles/dialog.less b/styles/dialog.less
index 161d8d3293..e5e0e784c9 100644
--- a/styles/dialog.less
+++ b/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: .2em;
+      bottom: 0;
+      border: none;
+      color: #000;
+      cursor: pointer;
+
+      &:hover {
+        color: #888;
+      }
+    }
   }
 
   &Buttons {

From 0870a3545a4074d77cf91f70b86f389e697a8e2d Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Sun, 25 Nov 2018 15:51:01 +0200
Subject: [PATCH 2/3] Style show/hide credentials button using the active theme

---
 styles/dialog.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/dialog.less b/styles/dialog.less
index e5e0e784c9..ef9df6efbe 100644
--- a/styles/dialog.less
+++ b/styles/dialog.less
@@ -25,14 +25,14 @@
     &Button {
       position: absolute;
       background: transparent;
-      right: .2em;
+      right: .3em;
       bottom: 0;
       border: none;
-      color: #000;
+      color: @text-color-subtle;
       cursor: pointer;
 
       &:hover {
-        color: #888;
+        color: @text-color-highlight;
       }
     }
   }

From dfccca2e5308d8da065fac0308cdee6b24e34c12 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Sun, 25 Nov 2018 16:59:17 +0200
Subject: [PATCH 3/3] Test show/hide credentials button

---
 test/views/credential-dialog.test.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/test/views/credential-dialog.test.js b/test/views/credential-dialog.test.js
index a98e71613b..86bd080494 100644
--- a/test/views/credential-dialog.test.js
+++ b/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');
+    });
+  });
 });