Add textual button to show/hide credentials in credentials dialog

Author: ericcornelissen

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: .2em;
+      bottom: 0;
+      border: none;
+      color: #000;
+      cursor: pointer;
+
+      &:hover {
+        color: #888;
+      }
+    }
   }
 
   &Buttons {