diff -r 6f3078f7fd47 -r be36eed5e6e0 client/src/components/Login.js
--- a/client/src/components/Login.js	Thu Aug 03 09:44:37 2017 +0200
+++ b/client/src/components/Login.js	Thu Aug 03 17:33:00 2017 +0200
@@ -8,9 +8,24 @@
 
 class Login extends Component {
 
+  state = {
+    username: '',
+    password: ''
+  }
+
+  handleInputChange = (e) => {
+    const target = e.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+
   login = () => {
-    const username = this.username.value;
-    const password = this.password.value;
+    const { username, password } = this.state;
 
     this.props.authActions.loginSubmit(username, password);
   }
@@ -65,12 +80,12 @@
                 <form onSubmit={this.submit}>
                   <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
                     <ControlLabel>Username</ControlLabel>
-                    <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />
+                    <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="username" />
                     { this.renderErrorMessage(errorMessages, 'username') }
                   </FormGroup>
                   <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
                     <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password = ref; }} />
+                    <FormControl componentClass="input" type="password" onChange={this.handleInputChange} name="password" />
                     { this.renderErrorMessage(errorMessages, 'password') }
                   </FormGroup>
                   { this.renderNonFieldErrors(errorMessages) }