External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-26 13:25:02 -02:30
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
nav login fixup
This commit is contained in:
Jake McDermott
2018-10-16 00:31:52 -04:00
committed by GitHub
parent 9f2b2b3456 05af4c7c53
commit 311346b77b
3 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/App.jsx
View File

@@ -1,5 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { render } from 'react-dom';
import { import {
HashRouter as Router, HashRouter as Router,
Route, Route,
@@ -87,7 +86,7 @@ class App extends React.Component {
super(props); super(props);
this.state = { this.state = {
activeItem: 'dashboard', activeItem: window.location.hash.split("#/").pop().split("/").shift(),
isNavOpen: (typeof window !== 'undefined' && isNavOpen: (typeof window !== 'undefined' &&
window.innerWidth >= parseInt(breakpointMd.value, 10)), window.innerWidth >= parseInt(breakpointMd.value, 10)),
}; };
@@ -97,7 +96,7 @@ class App extends React.Component {
const { isNavOpen } = this.state; const { isNavOpen } = this.state;
this.setState({ isNavOpen: !isNavOpen }); this.setState({ isNavOpen: !isNavOpen });
}; }
onNavSelect = ({ itemId }) => { onNavSelect = ({ itemId }) => {
this.setState({ activeItem: itemId }); this.setState({ activeItem: itemId });
@@ -135,72 +134,70 @@ class App extends React.Component {
<Switch> <Switch>
<UnauthenticatedRoute path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} /> <UnauthenticatedRoute path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
<AuthenticatedRoute component={() => ( <AuthenticatedRoute component={() => (
<Page <Page
header={( header={(
<PageHeader <PageHeader
logo={<TowerLogo onClick={this.onLogoClick} />} logo={<TowerLogo onClick={this.onLogoClick} />}
avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>} avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>}
showNavToggle showNavToggle
onNavToggle={this.onNavToggle} onNavToggle={this.onNavToggle}
/> />
)} )}
sidebar={( sidebar={(
<PageSidebar <PageSidebar
isNavOpen={isNavOpen} isNavOpen={isNavOpen}
nav={( nav={(
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation"> <Nav aria-label="Primary Navigation">
<NavGroup title="Views"> <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="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
<NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem> <NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
<NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem> <NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
</NavGroup> </NavGroup>
<NavGroup title="Resources"> <NavGroup title="Resources">
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem> <NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem> <NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem> <NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
<NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem> <NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
<NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem> <NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
</NavGroup> </NavGroup>
<NavGroup title="Access"> <NavGroup title="Access">
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem> <NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem> <NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem> <NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
</NavGroup> </NavGroup>
<NavGroup title="Administration"> <NavGroup title="Administration">
<NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem> <NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem>
<NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem> <NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem>
<NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem> <NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem>
<NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem> <NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem>
<NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem> <NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
<NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem> <NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
</NavGroup> </NavGroup>
</Nav> </Nav>
)} )}
/> />
)}> )}>
<Switch> <Route exact path="/" component={() => (<Redirect to="/home" />)} />
<Route exact path="/" component={() => (<Redirect to="/home" />)} /> <Route path="/home" component={Dashboard} />
<Route path="/home" component={Dashboard} /> <Route path="/jobs" component={Jobs} />
<Route path="/jobs" component={Jobs} /> <Route path="/schedules" component={Schedules} />
<Route path="/schedules" component={Schedules} /> <Route path="/portal" component={Portal} />
<Route path="/portal" component={Portal} /> <Route path="/templates" component={Templates} />
<Route path="/templates" component={Templates} /> <Route path="/credentials" component={Credentials} />
<Route path="/credentials" component={Credentials} /> <Route path="/projects" component={Projects} />
<Route path="/projects" component={Projects} /> <Route path="/inventories" component={Inventories} />
<Route path="/inventories" component={Inventories} /> <Route path="/inventory_scripts" component={InventoryScripts} />
<Route path="/inventory_scripts" component={InventoryScripts} /> <Route path="/organizations" component={Organizations} />
<Route path="/organizations" component={Organizations} /> <Route path="/users" component={Users} />
<Route path="/users" component={Users} /> <Route path="/teams" component={Teams} />
<Route path="/teams" component={Teams} /> <Route path="/credential_types" component={CredentialTypes} />
<Route path="/credential_types" component={CredentialTypes} /> <Route path="/notification_templates" component={NotificationTemplates} />
<Route path="/notification_templates" component={NotificationTemplates} /> <Route path="/management_jobs" component={ManagementJobs} />
<Route path="/management_jobs" component={ManagementJobs} /> <Route path="/instance_groups" component={InstanceGroups} />
<Route path="/instance_groups" component={InstanceGroups} /> <Route path="/applications" component={Applications} />
<Route path="/applications" component={Applications} /> <Route path="/settings" component={Settings} />
<Route path="/settings" component={Settings} /> </Page>
</Switch>
</Page>
)} /> )} />
</Switch> </Switch>
</Fragment> </Fragment>
@@ -209,11 +206,4 @@ class App extends React.Component {
} }
} }
const el = document.getElementById('app'); export default App;
api.getRoot()
.then(({ data }) => {
const { custom_logo, custom_login_info } = data;
render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
});

13
src/index.js
View File

@@ -1,8 +1,19 @@
import React from 'react';
import { render } from 'react-dom';
import App from './App'; import App from './App';
import api from './api';
import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly-next/patternfly.css'; import '@patternfly/patternfly-next/patternfly.css';
import './app.scss'; 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);
});

7
src/pages/Login.jsx
View File

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