Add wrong crentials message to login form

Make login button only clickable if username and password entered.

src/components/login-form.js

@@ -30,7 +30,8 @@ class LoginForm extends Component {
 
     this.state = {
       username: '',
-      password: ''
+      password: '',
+      disableLogin: true
     }
   }
 
@@ -47,7 +48,15 @@ class LoginForm extends Component {
   }
 
   handleChange(event) {
-    this.setState({ [event.target.id]: event.target.value });
+    let disableLogin = this.state.disableLogin;
+
+    if (event.target.id === 'username') {
+      disableLogin = this.state.password.length === 0 || event.target.value.length === 0;
+    } else if (event.target.id === 'password') {
+      disableLogin = this.state.username.length === 0 || event.target.value.length === 0;
+    }
+
+    this.setState({ [event.target.id]: event.target.value, disableLogin });
   }
 
   render() {
@@ -71,9 +80,17 @@ class LoginForm extends Component {
           </Col>
         </FormGroup>
 
+        {this.props.loginMessage &&
+          <div style={{ marginBottom: '50px', color: 'red' }}>
+            <Col smOffset={2} sm={10} style={{ paddingLeft: '5px' }}>
+              <i>Error: </i>{this.props.loginMessage}
+            </Col>
+          </div>
+        }
+
         <FormGroup>
           <Col smOffset={2} sm={10}>
-            <Button type="submit" onClick={(e) => this.login(e)}>Login</Button>
+            <Button type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
           </Col>
         </FormGroup>
       </Form>

src/containers/login.js

@@ -41,7 +41,8 @@ class Login extends Component {
   static calculateState() {
     return {
       currentUser: UserStore.getState().currentUser,
-      token: UserStore.getState().token
+      token: UserStore.getState().token,
+      loginMessage: UserStore.getState().loginMessage
     };
   }
 
@@ -83,7 +84,7 @@ class Login extends Component {
         <div className="login-container">
           <PageHeader>Login</PageHeader>
 
-          <LoginForm />
+          <LoginForm loginMessage={this.state.loginMessage} />
         </div>
 
         <Footer />

src/stores/user-store.js

@@ -23,7 +23,6 @@ import { ReduceStore } from 'flux/utils';
 
 import AppDispatcher from '../app-dispatcher';
 import UsersDataManager from '../data-managers/users-data-manager';
-import NotificationsDataManager from '../data-managers/notifications-data-manager';
 import SimulatorDataDataManager from '../data-managers/simulator-data-data-manager';
 
 class UserStore extends ReduceStore {
@@ -35,7 +34,8 @@ class UserStore extends ReduceStore {
     return {
       users: [],
       currentUser: null,
-      token: null
+      token: null,
+      loginMessage: null
     };
   }
 
@@ -43,7 +43,7 @@ class UserStore extends ReduceStore {
     switch (action.type) {
       case 'users/login':
         UsersDataManager.login(action.username, action.password);
-        return state;
+        return Object.assign({}, state, { loginMessage: null });
 
       case 'users/logout':
         // disconnect from all simulators
@@ -69,13 +69,7 @@ class UserStore extends ReduceStore {
       case 'users/login-error':
         if (action.error && !action.error.handled) {
           // If it was an error and hasn't been handled, the credentials must have been wrong.
-          const WRONG_CREDENTIALS_NOTIFICATION = {
-            title: 'Incorrect credentials',
-            message: 'Please modify and try again.',
-            level: 'error'
-          };
-
-          NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION);
+          state = Object.assign({}, state, { loginMessage: 'Wrong credentials! Please try again.' });
         }
 
         return state;    

src/styles/app.css

@@ -137,7 +137,7 @@ body {
  * Login form
  */
 .login-container {
-  width: 500px;
+  max-width: 500px;
 
   margin: 30px auto;
   padding: 15px 20px;