mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
nav login fixup
This commit is contained in:
Jake McDermott
parent
9f2b2b3456
commit
05af4c7c53
144
src/App.jsx
144
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 });
|
||||
@ -135,72 +134,70 @@ class App extends React.Component {
|
||||
<Switch>
|
||||
<UnauthenticatedRoute path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
|
||||
<AuthenticatedRoute component={() => (
|
||||
<Page
|
||||
header={(
|
||||
<PageHeader
|
||||
logo={<TowerLogo onClick={this.onLogoClick} />}
|
||||
avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>}
|
||||
showNavToggle
|
||||
onNavToggle={this.onNavToggle}
|
||||
/>
|
||||
)}
|
||||
sidebar={(
|
||||
<PageSidebar
|
||||
isNavOpen={isNavOpen}
|
||||
nav={(
|
||||
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
|
||||
<NavGroup title="Views">
|
||||
<NavItem to="#/home" itemId="dashboard" isActive={activeItem === 'dashboard'}>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>
|
||||
</NavGroup>
|
||||
<NavGroup title="Resources">
|
||||
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
|
||||
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
|
||||
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</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>
|
||||
</NavGroup>
|
||||
<NavGroup title="Access">
|
||||
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
|
||||
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
|
||||
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
|
||||
</NavGroup>
|
||||
<NavGroup title="Administration">
|
||||
<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="#/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="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
|
||||
<NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
|
||||
</NavGroup>
|
||||
</Nav>
|
||||
)}
|
||||
/>
|
||||
)}>
|
||||
<Switch>
|
||||
<Route exact path="/" component={() => (<Redirect to="/home" />)} />
|
||||
<Route path="/home" component={Dashboard} />
|
||||
<Route path="/jobs" component={Jobs} />
|
||||
<Route path="/schedules" component={Schedules} />
|
||||
<Route path="/portal" component={Portal} />
|
||||
<Route path="/templates" component={Templates} />
|
||||
<Route path="/credentials" component={Credentials} />
|
||||
<Route path="/projects" component={Projects} />
|
||||
<Route path="/inventories" component={Inventories} />
|
||||
<Route path="/inventory_scripts" component={InventoryScripts} />
|
||||
<Route path="/organizations" component={Organizations} />
|
||||
<Route path="/users" component={Users} />
|
||||
<Route path="/teams" component={Teams} />
|
||||
<Route path="/credential_types" component={CredentialTypes} />
|
||||
<Route path="/notification_templates" component={NotificationTemplates} />
|
||||
<Route path="/management_jobs" component={ManagementJobs} />
|
||||
<Route path="/instance_groups" component={InstanceGroups} />
|
||||
<Route path="/applications" component={Applications} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
</Switch>
|
||||
</Page>
|
||||
<Page
|
||||
header={(
|
||||
<PageHeader
|
||||
logo={<TowerLogo onClick={this.onLogoClick} />}
|
||||
avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>}
|
||||
showNavToggle
|
||||
onNavToggle={this.onNavToggle}
|
||||
/>
|
||||
)}
|
||||
sidebar={(
|
||||
<PageSidebar
|
||||
isNavOpen={isNavOpen}
|
||||
nav={(
|
||||
<Nav aria-label="Primary Navigation">
|
||||
<NavGroup title="Views">
|
||||
<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>
|
||||
</NavGroup>
|
||||
<NavGroup title="Resources">
|
||||
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
|
||||
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
|
||||
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</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>
|
||||
</NavGroup>
|
||||
<NavGroup title="Access">
|
||||
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
|
||||
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
|
||||
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
|
||||
</NavGroup>
|
||||
<NavGroup title="Administration">
|
||||
<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="#/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="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
|
||||
<NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
|
||||
</NavGroup>
|
||||
</Nav>
|
||||
)}
|
||||
/>
|
||||
)}>
|
||||
<Route exact path="/" component={() => (<Redirect to="/home" />)} />
|
||||
<Route path="/home" component={Dashboard} />
|
||||
<Route path="/jobs" component={Jobs} />
|
||||
<Route path="/schedules" component={Schedules} />
|
||||
<Route path="/portal" component={Portal} />
|
||||
<Route path="/templates" component={Templates} />
|
||||
<Route path="/credentials" component={Credentials} />
|
||||
<Route path="/projects" component={Projects} />
|
||||
<Route path="/inventories" component={Inventories} />
|
||||
<Route path="/inventory_scripts" component={InventoryScripts} />
|
||||
<Route path="/organizations" component={Organizations} />
|
||||
<Route path="/users" component={Users} />
|
||||
<Route path="/teams" component={Teams} />
|
||||
<Route path="/credential_types" component={CredentialTypes} />
|
||||
<Route path="/notification_templates" component={NotificationTemplates} />
|
||||
<Route path="/management_jobs" component={ManagementJobs} />
|
||||
<Route path="/instance_groups" component={InstanceGroups} />
|
||||
<Route path="/applications" component={Applications} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
</Page>
|
||||
)} />
|
||||
</Switch>
|
||||
</Fragment>
|
||||
@ -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;
|
||||
|
||||
13
src/index.js
13
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);
|
||||
});
|
||||
|
||||
@ -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="/" />);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user