From 981fb2d46469a4b7993e3a0d31307b5259348fae Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 3 Mar 2022 09:15:19 -0800
Subject: [PATCH] feat: add redirect to authRoute

---
 src/modules/admin/index.tsx    |  2 +-
 src/pages/common/AuthRoute.tsx | 22 ++++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/modules/admin/index.tsx b/src/modules/admin/index.tsx
index e3c040f278..bf45942d20 100644
--- a/src/modules/admin/index.tsx
+++ b/src/modules/admin/index.tsx
@@ -23,7 +23,7 @@ function AdminModuleContainer() {
   return (
     <AdminStoreContext.Provider value={new AdminStore()}>
       <AdminSubheader />
-      <AuthRoute component={adminRoutes} roleRequired="admin" />
+      <AuthRoute component={adminRoutes} roleRequired="admin" redirect="/" />
       <div>Coming Soon...</div>
     </AdminStoreContext.Provider>
   )
diff --git a/src/pages/common/AuthRoute.tsx b/src/pages/common/AuthRoute.tsx
index b9ffb8a2d6..a4a4b4bf5e 100644
--- a/src/pages/common/AuthRoute.tsx
+++ b/src/pages/common/AuthRoute.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Route, RouteProps } from 'react-router'
+import { Redirect, Route, RouteProps } from 'react-router'
 import { observer } from 'mobx-react'
 import { UserRole } from 'src/models/user.models'
 import Text from 'src/components/Text'
@@ -14,6 +14,8 @@ import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
 interface IProps extends RouteProps {
   component: React.ComponentType<any>
   roleRequired?: UserRole
+  /** Page to redirect if role not satisfied (default shows message) */
+  redirect?: string
 }
 interface IState {}
 @observer
@@ -26,13 +28,17 @@ export class AuthRoute extends React.Component<IProps, IState> {
       <AuthWrapper
         roleRequired={roleRequired}
         fallback={
-          <Flex justifyContent="center" mt="40px" data-cy="auth-route-deny">
-            <Text regular>
-              {roleRequired
-                ? `${roleRequired} role required to access this page`
-                : 'Please login to access this page'}
-            </Text>
-          </Flex>
+          this.props.redirect ? (
+            <Redirect to={this.props.redirect} />
+          ) : (
+            <Flex justifyContent="center" mt="40px" data-cy="auth-route-deny">
+              <Text regular>
+                {roleRequired
+                  ? `${roleRequired} role required to access this page`
+                  : 'Please login to access this page'}
+              </Text>
+            </Flex>
+          )
         }
       >
         <Route {...rest} render={props => <Component {...props} />} />