show authorize form when auth error

embark-ui/src/actions/index.js

@@ -15,7 +15,7 @@ function action(type, payload = {}) {
 
 export const AUTHENTICATE = createRequestTypes('AUTHENTICATE');
 export const authenticate = {
-  request: (token) => action(AUTHENTICATE[REQUEST], {token}),
+  request: (token, callback) => action(AUTHENTICATE[REQUEST], {token, callback}),
   success: () => action(AUTHENTICATE[SUCCESS]),
   failure: (error) => action(AUTHENTICATE[FAILURE], {error})
 };

embark-ui/src/containers/AppContainer.js

@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import {connect} from 'react-redux';
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
+import {Alert, Page, Form, Button} from "tabler-react";
 
 import routes from '../routes';
 import queryString from 'query-string';
@@ -16,6 +17,12 @@ import {
 } from '../actions';
 
 class AppContainer extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      authenticateError: null
+    };
+  }
   componentDidMount() {
     let token;
     if (this.props.location.search) {
@@ -24,7 +31,12 @@ class AppContainer extends Component {
     } else {
       token = cacheGet('token');
     }
-    this.props.authenticate(token);
+    this.props.authenticate(token, (err) => {
+      if (err) {
+        return this.setState({authenticateError: err});
+      }
+      this.setState({authenticateError: null});
+    });
     this.props.initBlockHeader();
     this.props.fetchProcesses();
     this.props.fetchVersions();
@@ -32,6 +44,19 @@ class AppContainer extends Component {
   }
 
   render() {
+    if (this.state.authenticateError) {
+      return <Page.Content>
+        <Alert type="danger">
+          {this.state.authenticateError}
+        </Alert>
+        <Form>
+          <Form.Input name="token" label="Token" placeholder="Enter Token"/>
+          <Button type="submit" color="primary">
+            Authorize
+          </Button>
+        </Form>
+      </Page.Content>;
+    }
     return (<React.Fragment>{routes}</React.Fragment>);
   }
 }

embark-ui/src/index.js

@@ -19,7 +19,7 @@ ReactDOM.render(
   <Provider store={store}>
     <ConnectedRouter history={history}>
       <Layout>
-      <AppContainer />
+        <AppContainer/>
       </Layout>
     </ConnectedRouter>
   </Provider>,

embark-ui/src/services/api.js

@@ -11,12 +11,18 @@ function get(path, params, endpoint) {
 }
 
 function post(path, params) {
+  const callback = params.callback || function(){};
+  delete params.callback;
   return axios.post(constants.httpEndpoint + path, params)
     .then((response) => {
-      return {response, error: null};
+      const data = (response.data && response.data.error) ? {error: response.data.error} : {response, error: null};
+      callback(data.error, data.response);
+      return data;
     })
     .catch((error) => {
-      return {response: null, error: error.message || 'Something bad happened'};
+      const data = {response: null, error: error.message || 'Something bad happened'};
+      callback(data.error, data.response);
+      return data;
     });
 }
 

lib/modules/authenticator/index.js

@@ -23,7 +23,7 @@ class Authenticator {
           this.logger.warn(__('Someone tried and failed to authenticate to the backend'));
           this.logger.warn(__('- User-Agent: %s', req.headers['user-agent']));
           this.logger.warn(__('- Referer: %s', req.headers.referer));
-          return res.status(403).send({error: __('Wrong authentication token')});
+          return res.send({error: __('Wrong authentication token. Get your token from the Embark console by typing `token`')});
         }
         res.send();
       }