fixed login bug

Author: rise-erpelding

src/routes/LoginPage/LoginPage.css

@@ -10,6 +10,11 @@
   font-family: 'Lato', sans-serif;
 }
 
+.login-page__login-error {
+  color: red;
+  padding-bottom: 10px;
+}
+
 .login-page__username,
 .login-page__password {
   text-align: right;

src/routes/LoginPage/LoginPage.js

@@ -32,12 +32,13 @@ class LoginPage extends Component {
         user_name.value = ''
         password.value = ''
         TokenService.saveAuthToken(res.authToken)
+        this.handleLoginSuccess()
       })
       .catch(res => {
-        this.setState({ error: res.error })
+        user_name.value = ''
+        password.value = ''
+        this.setState({ error: true })
       })
-    
-    this.handleLoginSuccess()
   }
 
   handleLoginSuccess = () => {
@@ -50,10 +51,14 @@ class LoginPage extends Component {
   }
 
   render () {
+    const loginFailed = this.state.error
+      ? <div className='login-page__login-error'>Incorrect username or password</div>
+      : null
 
     return (
       <div className='login-page'>
         <h2>Login</h2>
+        {loginFailed}
         <form 
           className='login-page__form'
           onSubmit={this.handleSubmitJwtAuth}>

src/services/auth-api-service.js

@@ -9,11 +9,15 @@ const AuthApiService = {
       },
       body: JSON.stringify(credentials),
     })
-      .then(res =>
-        (!res.ok)
-          ? res.json().then(e => Promise.reject(e))
-          : res.json()
-      )
+    .then(res => {
+      if (!res.ok) {
+        return res.json()
+          .then(error => {
+          throw error
+        })
+      }
+      return res.json()
+    })
   },
 }