From 62b9125afb29e7f0179a8aa61a004f3184316229 Mon Sep 17 00:00:00 2001
From: Mathias Desloges <freakdev@gmail.com>
Date: Thu, 26 Oct 2017 23:27:24 +0200
Subject: [PATCH] implement forbidden page

---
 src/ForbiddenPage.js |  7 +++++++
 src/PageManager.js   | 10 +++++++++-
 src/index.js         | 32 ++++++++++++++++++++++----------
 3 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 src/ForbiddenPage.js

diff --git a/src/ForbiddenPage.js b/src/ForbiddenPage.js
new file mode 100644
index 0000000..d6877e0
--- /dev/null
+++ b/src/ForbiddenPage.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children, ...props }) => (
+    <div style={ props.style } className="page forbidden">
+        { children }
+    </div>
+)
\ No newline at end of file
diff --git a/src/PageManager.js b/src/PageManager.js
index 6d12d9f..65c1e5c 100644
--- a/src/PageManager.js
+++ b/src/PageManager.js
@@ -7,6 +7,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import Page from './Page'
 import NavigationBar from './NavigationBar'
+import ForbiddenPage from './ForbiddenPage'
 
 import './PageManager.css';
 
@@ -43,10 +44,17 @@ export class PageManager extends Component {
 		const pages = routes.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
 		const navbars = children.filter(child => child.type === NavigationBar)
 
+		const forbiddenPage = children.find( c => c.type === ForbiddenPage )		
+
 		const renderPages = (pages) => pages.map((page, i) => {
 			const { exact, path, ...props } = page.props
 			return (
-				<Route key={i} exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
+				<Route key={i} exact={exact} path={path} render={() => {
+					if (!this.props.authCheck || (!page.props.protected || this.props.authCheck()))
+						return React.cloneElement(page, { ...props })
+					else
+						return forbiddenPage || null
+				} } />
 			)
 		})
 
diff --git a/src/index.js b/src/index.js
index fa8f5bc..44326fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,27 +1,39 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import './index.css';
+import { Redirect } from 'react-router-dom';
+
+import './index.css'
+
+import PageManager from './PageManager'
+import Page from './Page'
+import NavigationBar from './NavigationBar'
+import ForbiddenPage from './ForbiddenPage'
 
-import PageManager from './PageManager';
-import Page from './Page';
-import NavigationBar from './NavigationBar';
 
 ReactDOM.render(
 <div>
-    <PageManager noRouter>
-        <Page style={{ background: 'yellow' }} name="splash" exact path="/splash" noAnim noNavbar >
+    <PageManager 
+        authCheck={() => {
+            // return auth status
+            return true
+        }}
+    >
+        <Page style={{ background: 'yellow' }} name="splash" exact path="/" noAnim >
             <h1>Splash</h1>
         </Page>
-        <Page style={{ background: 'red' }} name="home" exact path="/">
+        <Page style={{ background: 'cyan' }} name="home" exact path="/home">
             <h1>Home</h1>
         </Page>
-        <Page style={{ background: 'green' }} name="page 2" exact path="/two">
+        <Page protected style={{ background: 'green' }} name="page 2" exact path="/two">
             <h1>page 2</h1>
         </Page>
         <Page style={{ background: 'blue' }} name="page 3" exact path="/three">
             <h1>Page 3</h1>
         </Page>
+        <ForbiddenPage style={{ background: 'red' }} name="forbidden" exact path="/forbidden">
+            <Redirect to={{ pathname:"/" }} />
+        </ForbiddenPage>        
         <NavigationBar position="bottom" />
     </PageManager>
 </div>