Merge #226

226: Fix login error display r=peterbe a=rehandalal

Fixes #225.

r?

Co-authored-by: Rehan Dalal <rehandalal@gmail.com>

Author: bors[bot]

src/components/App.js

@@ -1,28 +1,39 @@
-import { Layout } from 'antd';
+import { Layout, notification } from 'antd';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { BrowserRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import Error from './Error';
-import { getError } from 'console/state/auth/selectors';
-
 import AuthButton from 'console/components/auth/AuthButton';
 import NavBar from 'console/components/navigation/NavBar';
 import QueryActions from 'console/components/data/QueryActions';
 import QueryAuth0 from 'console/components/data/QueryAuth0';
 import AppRouter from 'console/components/AppRouter';
 import CircleLogo from 'console/components/svg/CircleLogo';
+import { getError } from 'console/state/auth/selectors';
+
 const { Header } = Layout;
 
 @connect((state, props) => ({
-  error: getError(state),
+  authError: getError(state),
 }))
 export default class App extends React.Component {
   static propTypes = {
-    error: PropTypes.object,
+    authError: PropTypes.object,
   };
 
+  componentDidUpdate() {
+    const { authError } = this.props;
+
+    if (authError) {
+      notification['error']({
+        message: 'Authentication Error',
+        description: `${authError.get('error')}: ${authError.get('errorDescription')}`,
+        duration: 0,
+      });
+    }
+  }
+
   render() {
     return (
       <BrowserRouter>
@@ -48,8 +59,6 @@ export default class App extends React.Component {
 
           <NavBar />
 
-          <Error error={this.props.error} />
-
           <AppRouter />
         </Layout>
       </BrowserRouter>

src/components/Error.js

@@ -6,6 +6,13 @@ export function getAccessToken(state, defaultsTo = null) {
   return state.auth.session.get('accessToken', defaultsTo);
 }
 
+/**
+ * Gets the authentication error from the state
+ *
+ * @param state  The current state
+ * @param defaultsTo  A fallback value
+ * @returns {Immutable.Map({error: String, errorDescription: String})}
+ */
 export function getError(state, defaultsTo = null) {
   return state.auth.session.get('error', defaultsTo);
 }