diff --git a/src/App.tsx b/src/App.tsx index 0a7b221e86417816a42e8a0da01c47456ad858d1..191f80b79fef10bf4c99a1777437ca665d487626 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,14 +5,19 @@ import { AuthUser } from 'components/AuthUser/AuthUser'; import { LandingPage } from 'components/LandingPage/LandingPage'; import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute'; import { AuthRoutes, NonAuthRoutes } from 'components/api/routes'; +import { Roles } from 'components/api/userRoles'; export const App: FC = () => ( <Router> <div data-testid="App"> <Switch> - <Route path={NonAuthRoutes.login} component={AuthUser} /> + <Route path={NonAuthRoutes.signIn} component={AuthUser} /> <Route exact path={NonAuthRoutes.home} component={LandingPage} /> - <PrivateRoute path={AuthRoutes.dashboard} Component={HomePage} /> + <PrivateRoute + path={AuthRoutes.dashboard} + Component={HomePage} + requiredRoles={[Roles.admin, Roles.operator, Roles.senior]} + /> </Switch> </div> </Router> diff --git a/src/components/api/PrivateRoute/PrivateRoute.tsx b/src/components/api/PrivateRoute/PrivateRoute.tsx index 89c5962bfc29c5d79a961e6b47f555fae77c7aa3..e313633e1f1acf9ee7864f2ecd4ef5ca15d07092 100644 --- a/src/components/api/PrivateRoute/PrivateRoute.tsx +++ b/src/components/api/PrivateRoute/PrivateRoute.tsx @@ -9,12 +9,21 @@ import { NonAuthRoutes } from 'components/api/routes'; type Props = { Component: React.FC<RouteProps>; path: string; + requiredRoles: string[]; }; /* eslint-disable react/jsx-props-no-spreading */ -export const PrivateRoute = ({ Component, path }: Props): JSX.Element => { +export const PrivateRoute = ({ + Component, + path, + requiredRoles, +}: Props): JSX.Element => { const isAuthed = false; - const message = 'Please log in to view this page'; + const userHasRequiredRole = requiredRoles.includes('admin'); + + const message = userHasRequiredRole + ? 'Please log in to view this page' + : 'Your role is not allowed'; return ( <Route exact={false} @@ -25,7 +34,9 @@ export const PrivateRoute = ({ Component, path }: Props): JSX.Element => { ) : ( <Redirect to={{ - pathname: NonAuthRoutes.login, + pathname: userHasRequiredRole + ? NonAuthRoutes.signIn + : NonAuthRoutes.unauthorized, state: { message, requestedPath: path, diff --git a/src/components/api/routes.ts b/src/components/api/routes.ts index 52ee5982734df8730522c6ee2199b15419da4e74..e06d35ea5775c78bec55c98ca22574e477730659 100644 --- a/src/components/api/routes.ts +++ b/src/components/api/routes.ts @@ -1,10 +1,18 @@ +/** + * Allowed routes for authenticated users. + * Routes must be defined there and then reused across components + * importing AuthRoutes and NonAuthRoutes + */ export enum AuthRoutes { dashboard = '/dashboard', account = '/account', } +/** + * Allowed routes for non authenticated users + */ export enum NonAuthRoutes { home = '/', - login = '/login', + signIn = '/signIn', unauthorized = '/unauthorized', }