Merge pull request #6 from ansible/nav-login-fixup

nav login fixup

src/App.jsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { render } from 'react-dom';
 import {
   HashRouter as Router,
   Route,
@@ -87,7 +86,7 @@ class App extends React.Component {
     super(props);
 
     this.state = {
-      activeItem: 'dashboard',
+      activeItem: window.location.hash.split("#/").pop().split("/").shift(),
       isNavOpen: (typeof window !== 'undefined' &&
         window.innerWidth >= parseInt(breakpointMd.value, 10)),
     };
@@ -97,7 +96,7 @@ class App extends React.Component {
     const { isNavOpen } = this.state;
 
     this.setState({ isNavOpen: !isNavOpen });
-  };
+  }
 
   onNavSelect = ({ itemId }) => {
     this.setState({ activeItem: itemId });
@@ -148,9 +147,9 @@ class App extends React.Component {
                   <PageSidebar
                     isNavOpen={isNavOpen}
                     nav={(
-                        <Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
+                      <Nav aria-label="Primary Navigation">
                         <NavGroup title="Views">
-                            <NavItem to="#/home" itemId="dashboard" isActive={activeItem === 'dashboard'}>Dashboard</NavItem>
+                          <NavItem to="#/home" itemId="dashboard" isActive={activeItem ==='home'}>Dashboard</NavItem>
                           <NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
                           <NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
                           <NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
@@ -179,7 +178,6 @@ class App extends React.Component {
                     )}
                   />
                 )}>
-                  <Switch>
                 <Route exact path="/" component={() => (<Redirect to="/home" />)} />
                 <Route path="/home" component={Dashboard} />
                 <Route path="/jobs" component={Jobs} />
@@ -199,7 +197,6 @@ class App extends React.Component {
                 <Route path="/instance_groups" component={InstanceGroups} />
                 <Route path="/applications" component={Applications} />
                 <Route path="/settings" component={Settings} />
-                  </Switch>
               </Page>
             )} />
           </Switch>
@@ -209,11 +206,4 @@ class App extends React.Component {
   }
 }
 
-const el = document.getElementById('app');
-
-api.getRoot()
-  .then(({ data }) => {
-    const { custom_logo, custom_login_info } = data;
-
-    render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
-  });
+export default App;

src/index.js

@@ -1,8 +1,19 @@
+import React from 'react';
+import { render } from 'react-dom';
+
 import App from './App';
+import api from './api';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly-next/patternfly.css';
 
 import './app.scss';
 
-export default App;
+const el = document.getElementById('app');
+
+api.getRoot()
+  .then(({ data }) => {
+    const { custom_logo, custom_login_info } = data;
+
+    render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
+  });

src/pages/Login.jsx

@@ -26,7 +26,7 @@ class LoginPage extends Component {
     this.state = {
       username: '',
       password: '',
-      redirect: false,
+      error: '',
       loading: false,
     };
   }
@@ -49,7 +49,6 @@ class LoginPage extends Component {
     this.safeSetState({ loading: true });
 
     api.login(username, password)
-      .then(() => this.safeSetState({ redirect: true }))
       .catch(error => {
         if (error.response.status === 401) {
           this.safeSetState({ error: LOGIN_ERROR_MESSAGE });
@@ -61,10 +60,10 @@ class LoginPage extends Component {
   }
 
   render () {
-    const { username, password, redirect, loading, error } = this.state;
+    const { username, password, loading, error } = this.state;
     const { logo, loginInfo } = this.props;
 
-    if (redirect) {
+    if (api.isAuthenticated()) {
       return (<Redirect to="/" />);
     }