Fix router logic to account for logged out users; closes #4085
Middleware was removed from the `/` route to redirect users without authentication, so now we need to handle this on the front-end properly.
This commit is contained in:
parent
b051718afe
commit
3fceb588fb
5 changed files with 99 additions and 61 deletions
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import { NavLink, Route, Switch } from 'react-router-dom';
|
||||
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import DashboardContainer from '@/components/dashboard/DashboardContainer';
|
||||
|
@ -8,37 +8,42 @@ import { NotFound } from '@/components/elements/ScreenBlock';
|
|||
import TransitionRouter from '@/TransitionRouter';
|
||||
import SubNavigation from '@/components/elements/SubNavigation';
|
||||
import AccountSSHContainer from '@/components/dashboard/ssh/AccountSSHContainer';
|
||||
import { useLocation } from 'react-router';
|
||||
|
||||
export default ({ location }: RouteComponentProps) => (
|
||||
<>
|
||||
<NavigationBar/>
|
||||
{location.pathname.startsWith('/account') &&
|
||||
<SubNavigation>
|
||||
<div>
|
||||
<NavLink to={'/account'} exact>Settings</NavLink>
|
||||
<NavLink to={'/account/api'}>API Credentials</NavLink>
|
||||
<NavLink to={'/account/ssh'}>SSH Keys</NavLink>
|
||||
</div>
|
||||
</SubNavigation>
|
||||
}
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
<Route path={'/'} exact>
|
||||
<DashboardContainer/>
|
||||
</Route>
|
||||
<Route path={'/account'} exact>
|
||||
<AccountOverviewContainer/>
|
||||
</Route>
|
||||
<Route path={'/account/api'} exact>
|
||||
<AccountApiContainer/>
|
||||
</Route>
|
||||
<Route path={'/account/ssh'} exact>
|
||||
<AccountSSHContainer/>
|
||||
</Route>
|
||||
<Route path={'*'}>
|
||||
<NotFound/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
</>
|
||||
);
|
||||
export default () => {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavigationBar/>
|
||||
{location.pathname.startsWith('/account') &&
|
||||
<SubNavigation>
|
||||
<div>
|
||||
<NavLink to={'/account'} exact>Settings</NavLink>
|
||||
<NavLink to={'/account/api'}>API Credentials</NavLink>
|
||||
<NavLink to={'/account/ssh'}>SSH Keys</NavLink>
|
||||
</div>
|
||||
</SubNavigation>
|
||||
}
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
<Route path={'/'} exact>
|
||||
<DashboardContainer/>
|
||||
</Route>
|
||||
<Route path={'/account'} exact>
|
||||
<AccountOverviewContainer/>
|
||||
</Route>
|
||||
<Route path={'/account/api'} exact>
|
||||
<AccountApiContainer/>
|
||||
</Route>
|
||||
<Route path={'/account/ssh'} exact>
|
||||
<AccountSSHContainer/>
|
||||
</Route>
|
||||
<Route path={'*'}>
|
||||
<NotFound/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Reference in a new issue