Merge pull request #3069 from guardicore/2157-display-login-errors

2157 display login errors

Author: VakarisZ

monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Button, Col, Container, Form, Row} from 'react-bootstrap';
 
-import AuthService from '../../services/AuthService';
+import AuthService, {getErrors} from '../../services/AuthService';
 import monkeyGeneral from '../../images/militant-monkey.svg';
 import ParticleBackground from '../ui-components/ParticleBackground';
 
@@ -12,7 +12,7 @@ class LoginPageComponent extends React.Component {
       if (res['result']) {
         this.redirectToHome();
       } else {
-        this.setState({failed: true});
+        this.setState({failed: true, errors: res['errors']});
       }
     });
   };
@@ -73,7 +73,7 @@ class LoginPageComponent extends React.Component {
                     </Button>
                     {
                       this.state.failed ?
-                        <div className="alert alert-danger" role="alert">Login failed. Bad credentials.</div>
+                        <div className="alert alert-danger" role="alert">{getErrors(this.state.errors)}</div>
                         :
                         ''
                     }

monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Row, Col, Container, Form, Button} from 'react-bootstrap';
 
-import AuthService from '../../services/AuthService';
+import AuthService, {getErrors} from '../../services/AuthService';
 import monkeyDetective from '../../images/detective-monkey.svg';
 import ParticleBackground from '../ui-components/ParticleBackground';
 import LoadingIcon from '../ui-components/LoadingIcon';
@@ -37,16 +37,6 @@ class RegisterPageComponent extends React.Component {
     window.location.href = '/landing-page';
   };
 
-  getErrors = (errors) => {
-    const errorArray = [];
-
-    for (let i=0; i<errors.length; i++) {
-      const key = 'registration-error-' + i
-      errorArray.push(<li key={key}>{errors[i]}</li>);
-    }
-    return <ul>{errorArray}</ul>;
-  };
-
   constructor(props) {
     super(props);
     this.username = '';
@@ -92,7 +82,7 @@ class RegisterPageComponent extends React.Component {
                       <Col>
                         {
                           this.state.failed ?
-                            <div className='alert alert-danger' role='alert'>{this.getErrors(this.state.errors)}</div>
+                            <div className='alert alert-danger' role='alert'>{getErrors(this.state.errors)}</div>
                             :
                             ''
                         }

monkey/monkey_island/cc/ui/src/services/AuthService.js

@@ -1,4 +1,15 @@
 import _ from 'lodash';
+import React from 'react';
+
+export function getErrors(errors) {
+  const errorArray = [];
+
+  for (let i=0; i<errors.length; i++) {
+    const key = 'registration-error-' + i
+    errorArray.push(<li key={key}>{errors[i]}</li>);
+  }
+  return <ul>{errorArray}</ul>;
+}
 
 export default class AuthService {
   LOGIN_ENDPOINT = '/api/login?include_auth_token';
@@ -43,7 +54,7 @@ export default class AuthService {
           return {result: true};
         } else {
           this._removeToken();
-          return {result: false};
+          return {result: false, errors: res['response']['errors']};
         }
       })
   };