Merge branch 'private' into 'master'

Implement mock Private route basing on user role

See merge request !24

src/App.tsx

@@ -5,14 +5,23 @@ 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 { NotFound } from 'components/NotFound/NotFound';
+import { Roles } from 'components/api/userRoles';
+import { Unauthorized } from 'components/Unauthorized/Unauthorized';
 
 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]}
+        />
+        <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
+        <Route component={NotFound} />
       </Switch>
     </div>
   </Router>

src/components/LandingPage/LandingPage.tsx

@@ -6,7 +6,7 @@ import { NonAuthRoutes } from 'components/api/routes';
 export const LandingPage: FC = () => (
   <>
     <Button variant="contained">
-      <Link to={NonAuthRoutes.login}>Login</Link>
+      <Link to={NonAuthRoutes.signIn}>Login</Link>
     </Button>
     <section>
       <h2>What is MoveAid?</h2>

src/components/NotFound/NotFound.tsx

+import React, { FC } from 'react';
+
+export const NotFound: FC = () => <h1>Page not found</h1>;

src/components/Unauthorized/Unauthorized.tsx

+import React, { FC } from 'react';
+
+export const Unauthorized: FC = () => <h1>You cannot access this page</h1>;

src/components/api/PrivateRoute/PrivateRoute.tsx

@@ -9,23 +9,33 @@ 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 => {
-  const isAuthed = false;
-  const message = 'Please log in to view this page';
+export const PrivateRoute = ({
+  Component,
+  path,
+  requiredRoles,
+}: Props): JSX.Element => {
+  const isAuthed = true;
+  const userHasRequiredRole = requiredRoles.includes('admin');
+  const message = userHasRequiredRole
+    ? 'Please log in to view this page'
+    : 'Your role is not allowed';
   return (
     <Route
       exact={false}
       path={path}
       render={(props: RouteProps) =>
-        isAuthed ? (
+        isAuthed && userHasRequiredRole ? (
           <Component {...props} />
         ) : (
           <Redirect
             to={{
-              pathname: NonAuthRoutes.login,
+              pathname: userHasRequiredRole
+                ? NonAuthRoutes.signIn
+                : NonAuthRoutes.unauthorized,
               state: {
                 message,
                 requestedPath: path,

src/components/api/routes.ts

+/**
+ * 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',
 }

src/components/api/userRoles.ts

+export enum Roles {
+  senior = 'senior',
+  admin = 'admin',
+  operator = 'operator',
+}