From 9a31a206553dbb86d372fbfb7e6ed9e8cddc03f9 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Mon, 2 Aug 2021 16:34:37 +0200
Subject: [PATCH] Add private routes + login

---
 src/components/Layout/layout.module.scss |  1 +
 src/components/Login/Login.tsx           | 24 ++++++++++++++++++------
 src/components/Login/login.scss          |  9 +++++++++
 src/components/Routes/PrivateRoute.tsx   | 23 +++++++++++++++++++++++
 src/components/Routes/Routes.tsx         | 17 +++++------------
 src/styles/config/_typography.scss       |  8 ++++++++
 6 files changed, 64 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Login/login.scss
 create mode 100644 src/components/Routes/PrivateRoute.tsx

diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index 9b8b6b8e..e6bd32e6 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -38,5 +38,6 @@
   }
   main {
     width: 100%;
+    height: inherit;
   }
 }
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 6bc50137..57d35c31 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,14 +1,26 @@
-import React, { useContext } from 'react'
-import { useAuth } from '../../hooks/useAuth'
+import React, { useContext, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
-// import { userProfile } from '../../App'
-// import { UserContext } from '../../hooks/userContext'
+import './login.scss'
+
 const Login: React.FC = () => {
-  const { user, setUser, loginUser } = useContext(UserContext)
+  const { user, loginUser } = useContext(UserContext)
+  const history = useHistory()
+
+  useEffect(() => {
+    if (user) {
+      history.push('/edition')
+    }
+  }, [user])
 
   return (
     <div className="login">
-      <button onClick={loginUser}>Login</button>
+      <div className="container">
+        <h1>Bienvenue sur le Backoffice d'Ecolyo !</h1>
+        <button className="btnValid" onClick={loginUser}>
+          Login
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/src/components/Login/login.scss b/src/components/Login/login.scss
new file mode 100644
index 00000000..8ce4f8b0
--- /dev/null
+++ b/src/components/Login/login.scss
@@ -0,0 +1,9 @@
+.login {
+  display: flex;
+  width: 100%;
+  height: inherit;
+  min-height: 95vh;
+  .container {
+    margin: auto;
+  }
+}
diff --git a/src/components/Routes/PrivateRoute.tsx b/src/components/Routes/PrivateRoute.tsx
new file mode 100644
index 00000000..0d97b0e9
--- /dev/null
+++ b/src/components/Routes/PrivateRoute.tsx
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import { UserContext } from '../../hooks/userContext'
+
+interface PrivateRouteProps {
+  component: React.FC
+  path: string
+  exact: boolean
+}
+
+const PrivateRoute: React.FC<PrivateRouteProps> = ({
+  component,
+  path,
+  exact,
+}: PrivateRouteProps) => {
+  const { isLogged } = useContext(UserContext)
+  return isLogged ? (
+    <Route path={path} exact={exact} component={component} />
+  ) : (
+    <Redirect to="/login" />
+  )
+}
+export default PrivateRoute
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 9cf3a083..35a75918 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,24 +1,17 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import { UserContext } from '../../hooks/userContext'
 import Editing from '../Editing/Editing'
 import Login from '../Login/Login'
 import Settings from '../Settings/Settings'
+import PrivateRoute from './PrivateRoute'
 
 const Routes: React.FC = () => {
-  const { isLogged } = useContext(UserContext)
   return (
     <Switch>
       <Route path="/login" component={Login} />
-      {isLogged ? (
-        <>
-          <Route path="/editing" component={Editing} />
-          <Route path="/settings" component={Settings} />
-          <Redirect path="*" to="/editing" />
-        </>
-      ) : (
-        <Redirect path="*" to="/login" />
-      )}
+      <PrivateRoute path="/editing" component={Editing} exact />
+      <PrivateRoute path="/settings" component={Settings} exact />
+      <Redirect path="*" to="/editing" />
     </Switch>
   )
 }
diff --git a/src/styles/config/_typography.scss b/src/styles/config/_typography.scss
index 54f65d94..147bb9b5 100644
--- a/src/styles/config/_typography.scss
+++ b/src/styles/config/_typography.scss
@@ -59,3 +59,11 @@ $main-spacing: 4px;
     background: darken($text-grey, 20%);
   }
 }
+.input-dark {
+  display: inline-block;
+  margin-left: 0.5rem;
+  background: transparent;
+  border: solid 1px $gold;
+  border-radius: 5px;
+  padding: 0.3rem;
+}
-- 
GitLab