From 86d0fca62154caae0f5f0000a31ce987b22733d8 Mon Sep 17 00:00:00 2001
From: Jessica Lord & Kevin Sawicki <jlord+kevin@github.com>
Date: Mon, 12 Aug 2013 14:56:47 -0700
Subject: [PATCH] Switch GitHub Sign in to mini-editors

Previously bootstrap <input> fields didn't work with keybindings.
Switched to mini-editors to enable expected keybindings. Edited tabs for
focusing and password text to disc style.
---
 .../github-sign-in/keymaps/github-sign-in.cson |  2 ++
 .../github-sign-in/lib/sign-in-view.coffee     | 18 +++++++++++++-----
 .../stylesheets/github-sign-in.less            |  5 +++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/packages/github-sign-in/keymaps/github-sign-in.cson b/src/packages/github-sign-in/keymaps/github-sign-in.cson
index 2f09562fa..ef724fc2a 100644
--- a/src/packages/github-sign-in/keymaps/github-sign-in.cson
+++ b/src/packages/github-sign-in/keymaps/github-sign-in.cson
@@ -2,6 +2,8 @@
   'esc': 'core:cancel'
 '.sign-in-view input':
   'meta-enter': 'core:confirm'
+  'tab': 'core:focus-next'
+  'shift-tab': 'core:focus-previous'
 '.sign-in-view button':
   'enter': 'core:confirm'
   'meta-enter': 'core:confirm'
diff --git a/src/packages/github-sign-in/lib/sign-in-view.coffee b/src/packages/github-sign-in/lib/sign-in-view.coffee
index 726ce3e17..6228c06f0 100644
--- a/src/packages/github-sign-in/lib/sign-in-view.coffee
+++ b/src/packages/github-sign-in/lib/sign-in-view.coffee
@@ -1,5 +1,6 @@
 $ = require 'jquery'
 _ = require 'underscore'
+Editor = require 'editor'
 ScrollView = require 'scroll-view'
 keytar = require 'keytar'
 
@@ -9,8 +10,10 @@ class SignInView extends ScrollView
       @h4 'Sign in to GitHub'
       @p 'Your password will only be used to generate a token that will be stored in your keychain.'
       @div class: 'form-inline', =>
-        @input outlet: 'username', type: 'text', placeholder: 'Username or Email', tabindex: 1
-        @input outlet: 'password', type: 'password', placeholder: 'Password', tabindex: 2
+        @span 'Username or Email'
+        @subview 'username', new Editor(mini: true)
+        @span 'Password'
+        @subview 'password', new Editor(mini: true)
         @button outlet: 'signIn', class: 'btn', disabled: 'disabled', tabindex: 3, 'Sign in'
         @button outlet: 'cancel', class: 'btn', tabindex: 4, 'Cancel'
       @div outlet: 'alert', class: 'alert alert-error'
@@ -18,11 +21,15 @@ class SignInView extends ScrollView
   initialize: ({@signedInUser}={})->
     rootView.command 'github:sign-in', => @attach()
 
+    @username.hiddenInput.attr('tabindex', 1)
     @username.on 'core:confirm', => @generateOAuth2Token()
-    @username.on 'input', => @validate()
+    @username.on 'keypress', => @validate()
 
+    @password.hiddenInput.attr('tabindex', 2)
+    @password.hmtl ''
+    @password.attr('class', 'password')
     @password.on 'core:confirm', => @generateOAuth2Token()
-    @password.on 'input', => @validate()
+    @password.on 'keypress', => @validate()
 
     @signIn.on 'core:confirm', => @generateOAuth2Token()
     @signIn.on 'click', => @generateOAuth2Token()
@@ -38,7 +45,8 @@ class SignInView extends ScrollView
   serialize: -> {@signedInUser}
 
   validate: ->
-    if $.trim(@username.val()).length > 0 and @password.val().length > 0
+    console.log('I am validating')
+    if $.trim(@username.getText()).length > 0 and @password.getText().length > 0
       @signIn.enable()
     else
       @signIn.disable()
diff --git a/src/packages/github-sign-in/stylesheets/github-sign-in.less b/src/packages/github-sign-in/stylesheets/github-sign-in.less
index 762b7a1b7..661c7c6d6 100644
--- a/src/packages/github-sign-in/stylesheets/github-sign-in.less
+++ b/src/packages/github-sign-in/stylesheets/github-sign-in.less
@@ -1,4 +1,6 @@
 .sign-in-view {
+  width: 350px;
+  margin-left: -175px;
   input, button, .alert {
     margin-bottom: 10px;
   }
@@ -11,4 +13,7 @@
     content: 'Sign in failed. ';
     font-weight: bold;
   }
+  .password {
+    -webkit-text-security: disc;
+  }
 }