add error handling for login page

benawad · Aug 17, 2017 · c8cab6d · c8cab6d
1 parent 0b0fa60
commit c8cab6d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/src/modules/user/sagas.js b/src/modules/user/sagas.js
@@ -11,11 +11,17 @@ import {
   REQUEST_AUTH,
 } from './actions';
 
-
-function* callLogin({ payload: { data, redirect } }) {
-  yield call(login, data);
-  yield put(requestAuth());
-  redirect();
+function* callLogin({ payload: { data, redirect, errorCallback } }) {
+  const response = yield call(login, data);
+  // check for error
+  // if the object is empty there is an error
+  if (!Object.keys(response).length) {
+    errorCallback('Invalid login');
+  } else {
+    // no error, so requestAuth and redirect user
+    yield put(requestAuth());
+    redirect();
+  }
 }
 
 export function* loginSaga() {
@@ -51,4 +57,3 @@ function* callAuth({ payload }) {
 export function* authSaga() {
   yield takeEvery(REQUEST_AUTH, callAuth);
 }
-
diff --git a/src/routes/LoginPage/View.js b/src/routes/LoginPage/View.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
-import { Button, Form } from 'semantic-ui-react';
+import { Message, Button, Form } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 export default class LoginPage extends Component {
-
   constructor(props) {
     super(props);
-    this.state = { username: '', password: '' };
+    this.state = { username: '', password: '', errorMessage: '' };
   }
 
   handleSubmit = (e) => {
@@ -19,26 +18,44 @@ export default class LoginPage extends Component {
         } else {
           this.props.history.push('/');
         }
+        this.setState({ username: '', password: '' });
       },
       data: {
         email: this.state.username,
         password: this.state.password,
       },
+      errorCallback: errorMessage => this.setState({ errorMessage }),
     });
     e.preventDefault();
-    this.setState({ username: '', password: '' });
-  }
+  };
 
   render() {
     return (
-      <Form onSubmit={this.handleSubmit} >
+      <Form onSubmit={this.handleSubmit}>
+        {this.state.errorMessage &&
+          <Message negative>
+            <Message.Header>
+              {this.state.errorMessage}
+            </Message.Header>
+          </Message>}
         <Form.Field>
           <label>Email</label>
-          <input name="username" onChange={e => this.setState({ username: e.target.value })} value={this.state.username} placeholder="Email" />
+          <input
+            name="username"
+            onChange={e => this.setState({ username: e.target.value })}
+            value={this.state.username}
+            placeholder="Email"
+          />
         </Form.Field>
         <Form.Field>
           <label>Password</label>
-          <input name="password" onChange={e => this.setState({ password: e.target.value })} value={this.state.password} placeholder="Password" type="password" />
+          <input
+            name="password"
+            onChange={e => this.setState({ password: e.target.value })}
+            value={this.state.password}
+            placeholder="Password"
+            type="password"
+          />
         </Form.Field>
         <Button type="submit">Login</Button>
       </Form>