Add private routes + login

src/components/Layout/layout.module.scss

@@ -38,5 +38,6 @@
   }
   main {
     width: 100%;
+    height: inherit;
   }
 }

src/components/Login/Login.tsx

-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>
   )
 }

src/components/Login/login.scss

+.login {
+  display: flex;
+  width: 100%;
+  height: inherit;
+  min-height: 95vh;
+  .container {
+    margin: auto;
+  }
+}

src/components/Routes/PrivateRoute.tsx

+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

src/components/Routes/Routes.tsx

-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>
   )
 }

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;
+}