Autofocus on text field after login failure

3 files changed, 12 insertions, 6 deletions

diff --git a/app/components/Login.js b/app/components/Login.js
index a9aaec81c5..0bc1093dc9 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -84,14 +84,20 @@ export default class Login extends Component {
   }
 
   render() {
-    console.log(this.props.user);
     const { account, status, error } = this.props.user;
     const title = this.formTitle(status);
     const subtitle = this.formSubtitle(status, error);
+    const displayAccount = this.formattedAccount(account);
     const isConnecting = status === LoginState.connecting;
     const isFailed = status === LoginState.failed;
     const inputClass = ["login-form__input-field", isFailed ? "login-form__input-field--error" : ""].join(' ');
     const footerClass = ["login-footer", isConnecting ? "login-footer--invisible" : ""].join(' ');
+    
+    const autoFocusRef = input => {
+      if(isFailed && input) {
+        input.focus();
+      }
+    };
 
     return (
       <Layout>
@@ -125,14 +131,16 @@ export default class Login extends Component {
                        placeholder="0000 0000 0000" 
                        onChange={ ::this.handleInputChange }
                        onKeyUp={ ::this.handleInputKeyUp }
-                       value={ this.formattedAccount(account) }
-                       disabled={ isConnecting } />
+                       value={ displayAccount }
+                       disabled={ isConnecting }
+                       autoFocus={ true } 
+                       ref={ autoFocusRef } />
               </div>
             </div>
           </div>
           <div className={footerClass}>
             <div className="login-footer__prompt">Don't have an account number?</div>
-            <button className="login-footer__button" onClick={::this.handleCreateAccount}>Create account</button>
+            <button className="login-footer__button" onClick={ ::this.handleCreateAccount }>Create account</button>
           </div>
         </div>
       </Layout>
diff --git a/app/containers/LoginPage.js b/app/containers/LoginPage.js
index 5d40b21340..6db5d3656c 100644
--- a/app/containers/LoginPage.js
+++ b/app/containers/LoginPage.js
@@ -18,7 +18,6 @@ const mapDispatchToProps = (dispatch, props) => {
       return user.loginChange({ account });
     },
     onFirstChangeAfterFailure: () => {
-      console.log('onFirstChangeAfterFailure');
       return user.loginChange({ status: LoginState.none, error: null })
     }
   };
diff --git a/app/reducers/user.js b/app/reducers/user.js
index 553155c7b8..76a5423333 100644
--- a/app/reducers/user.js
+++ b/app/reducers/user.js
@@ -4,7 +4,6 @@ import actions from '../actions/user';
 
 export default handleActions({
   [actions.loginChange]: (state, action) => {
-    console.log(action.payload);
     return { ...state, ...action.payload };
   }
 }, {});