- Filter account input

- Improve CSS

2 files changed, 29 insertions, 8 deletions

diff --git a/app/components/Login.css b/app/components/Login.css
index 8034c57a90..70d638d182 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -43,9 +43,6 @@
   margin-bottom: 65px;
 }
 
-.login-form__alignbox {
-}
-
 .login-form__title {
   font-family: DINPro;
   font-size: 32px;
@@ -71,6 +68,10 @@
   margin-right: -4px;
 }
 
+.login-form__input-field::-webkit-input-placeholder {
+  color: rgba(41,77,115,0.2);
+}
+
 .login-form__input-field {
   width: 100%;
   border-radius: 8px;
@@ -81,6 +82,6 @@
   font-weight: bold;
   line-height: 40px;
   letter-spacing: 1px;
-  color: rgba(41,77,115,0.2);
+  color: #294D73;
   background-color: #FFFFFF;
 }
\ No newline at end of file
diff --git a/app/components/Login.js b/app/components/Login.js
index adf8e2cedb..bbc8e29989 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -8,29 +8,49 @@ export default class Login extends Component {
     onLogin: PropTypes.func.isRequired
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = { account: '' };
+  }
+
   handleLogin() {
     const { onLogin } = this.props;
     const username = this.refs.username.value;
 
     onLogin({ username, loggedIn: true });
-
-    this.props.router.push('/loggedin');
   }
 
   handleCreateAccount() {
     shell.openExternal(constants.createAccountURL);
   }
 
+  handleInputChange(e) {
+    let val = e.target.value.replace(/[^0-9]/g, '');
+    this.setState({ account: val });
+  }
+
+  handleInputKeyUp(e) {
+    if(e.which === 13) {
+      // enter pressed
+    }
+  }
+
   render() {
     return (
       <Layout>
         <div className="login">
           <div className="login-form">
-            <div className="login-form__alignbox">
+            <div>
               <div className="login-form__title">Login</div>
               <div className="login-form__subtitle">Enter your account number</div>
               <div className="login-form__input-wrap">
-                <input className="login-form__input-field" type="text" placeholder="0000 0000 0000" />
+                <input className="login-form__input-field" 
+                       type="text" 
+                       placeholder="0000 0000 0000" 
+                       onChange={::this.handleInputChange}
+                       onKeyUp={::this.handleInputKeyUp}
+                       value={this.state.account} />
               </div>
             </div>
           </div>