diff --git a/src/components/login-form.js b/src/components/login-form.js
index 62840d4..7e09091 100644
--- a/src/components/login-form.js
+++ b/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 {
+ {this.props.loginMessage &&
+
+
+ Error: {this.props.loginMessage}
+
+
+ }
+
-
+
diff --git a/src/containers/login.js b/src/containers/login.js
index cb23359..2a812cf 100644
--- a/src/containers/login.js
+++ b/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 {
diff --git a/src/stores/user-store.js b/src/stores/user-store.js
index cbe2791..e8722c8 100644
--- a/src/stores/user-store.js
+++ b/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;
diff --git a/src/styles/app.css b/src/styles/app.css
index 73e5f2c..d5b0e95 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -137,7 +137,7 @@ body {
* Login form
*/
.login-container {
- width: 500px;
+ max-width: 500px;
margin: 30px auto;
padding: 15px 20px;