Cookie base auth

psicoadmin/package-lock.json

         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "bootstrap": "^5.1.3",
+        "js-cookie": "^3.0.1",
         "react": "^17.0.2",
         "react-bootstrap": "^2.0.2",
         "react-dom": "^17.0.2",
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
         "supports-color": "^7.0.0"
       }
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

psicoadmin/package.json

     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^5.1.3",
+    "js-cookie": "^3.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",

psicoadmin/src/App.css

 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .Mui-selected{
     line-height: 30px !important;
     font-size : 12px !important;
 }
+
+.MuiContainer-root{
+    margin-top : 45px !important;
+    max-width : 1777px !important;
+}

psicoadmin/src/App.js

 import { BrowserRouter as Router } from "react-router-dom";
 import { Container } from 'react-bootstrap'
 import { AuthProvider } from './Auth/AuthProvider'
+import { useEffect } from 'react'
+import  useAuth from './Auth/useAuth'
 
 import Routes from './Components/Routes'
 // import { Header } from './Components/Header';

psicoadmin/src/Auth/AuthProvider.js

 import React from 'react'
+import Cookies from 'js-cookie'
+
 export const AuthContext = React.createContext();
 
 export function AuthProvider ({ children }){
 
-    let [user, setUser] = React.useState( localStorage.getItem("user") )
+    let [user, setUser] = React.useState( Cookies.get('user') )
 
     const context = {
         user,
         login: () => {
-            let user = JSON.stringify({ name : 'edgar' , id : 1})
-            localStorage.setItem('user', user)
-            setUser(user)
+            let body = JSON.stringify( { name : 'edgar' , id : 1} )
+            Cookies.set('user', body, { expires : 7 })
+            setUser(Cookies.get('user'))
+
         },
         logout : () => {
-            setUser(null)
-            localStorage.setItem('user', JSON.stringify({ }) )
+            Cookies.set('user', undefined)
+            setUser(undefined)
         },
         isLogged : () => {
-            if(!user) return false
-            let current = JSON.parse(user)
-            let keys = Object.keys(current)
-            return  keys.length > 0
+            let CookiesUser = Cookies.get('user')
+            console.log('existe usuario -> ', CookiesUser)
+            if(!CookiesUser){
+                return false
+            }
+            return !!CookiesUser
         }
     }
 

psicoadmin/src/Components/Dashboard.js

 import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
-import { Outlet } from "react-router-dom";
+import { Outlet, Navigate } from "react-router-dom";
 
 
 const drawerWidth = 240;
 const mdTheme = createTheme();
 
 function DashboardContent() {
-    const [open, setOpen] = React.useState(true);
-    const toggleDrawer = () => {
-        setOpen(!open);
-    };
-
 
-    let auth = useAuth();
+    const [open, setOpen] = React.useState(true);
+    const toggleDrawer = () => setOpen(!open);
+    const auth = useAuth();
 
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open_profile = Boolean(anchorEl);
-    const handleClick = (event) => {
-        console.log('show? ')
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
+    const handleClick = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null);
     const CerrarSession = () => auth.logout();
 
     return (
                                     'aria-labelledby': 'basic-button',
                                 }}
                             >
-                                <MenuItem onClick={ () => console.log('opcion 1') }>Profile</MenuItem>
+                                <MenuItem onClick={() => console.log('opcion 1') }>Profile</MenuItem>
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                             </Menu>
 
                     <Toolbar />
 
-                    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+                    <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
                         <Outlet/>
                     </Container>
 

psicoadmin/src/Components/Private.js

+import { Routes, Route } from "react-router-dom";
+import useAuth from '../Auth/useAuth';
+import React from 'react'
+
+function Not(){
+    <div>
+        <h1>404</h1>
+    </div>
+}
+
+function Loveisforever(){
+    <div>
+        <h1>404</h1>
+    </div>
+}
+
+export function Private ( props ) {
+
+    let auth = useAuth();
+
+    return(
+        <React.Fragment>
+            {
+                auth.isLogged() ? 
+                    ( <Route path="main" element={<Not/>}/> ) 
+                : ( <Route path="main" element={<Loveisforever/>}/>)        
+            }
+        </React.Fragment>
+    )
+
+}

psicoadmin/src/Components/PrivateRoute.js

 import useAuth from '../Auth/useAuth';
 import React from 'react'
 
-export const PrivateRoute= ({ children}) => {
+export const PrivateRoute= (props) => {
+    console.log(props)
     let auth = useAuth();
     const isAuthenticated = auth.isLogged();
 

psicoadmin/src/Components/Routes.js

-import { Routes, Route } from "react-router-dom";
+import React, {useEffect} from 'react'
+import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
 import { Login } from '../Pages/Login'
 import { Configuracion } from '../Pages/Configuracion'
 import { Historial } from '../Pages/Historial'
 
+import useAuth from '../Auth/useAuth'
 
 export default function MyRoutes () {
 
+    let auth = useAuth();
+    let navigate = useNavigate()
+
+    useEffect(() => {
+        if(!auth.isLogged(0)){
+            return navigate('/')
+        }
+    },[])
+    
+
     return(
         <Routes>
 
             <Route path="/" element={<Login/>}/>
 
-            <Route path="dashboard" element={<Dashboard/>}>
-                <Route path="home" element={<Home/>} />
-                <Route path="puestos" element={<Puestos/>} />
-                <Route path="contrasenas" element={<Contras/>} />
-                <Route path="expedientes" element={<Expedientes/>} />
-                <Route path="resultados" element={<Resultados/>} />
-                <Route path="configuraciones" element={<Configuracion/>} />
-                <Route path="historial" element={<Historial/>} />
-            </Route>
+            {
+                auth.isLogged() ? 
+                    (
+                        <Route path="dashboard" element={<Dashboard/>}>
+                            <Route index path="home" element={<Home/>} />
+                            <Route path="puestos" element={<Puestos/>} />
+                            <Route path="contrasenas" element={<Contras/>} />
+                            <Route path="expedientes" element={<Expedientes/>} />
+                            <Route path="resultados" element={<Resultados/>} />
+                            <Route path="configuraciones" element={<Configuracion/>} />
+                            <Route path="historial" element={<Historial/>} />
+                        </Route>
+                    )
+                : ( <Route path="dashboard" element={<Navigate to='/'/>} />)
+            }
+
 
             <Route path="*" element={<NotFound/>}/>
 

psicoadmin/src/Components/listItems.js

 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { useNavigate } from 'react-router-dom'
+import useAuth from '../Auth/useAuth'
 
 function SubMenuItem (props) {
 
 function Item (props) {
 
     let navigate = useNavigate()
+    let auth = useAuth()
 
     function change (event){
         props.change(event, props.index)
-        console.log('naviate to', props.route )
+        console.log('is logged', auth.isLogged())
+
+        if(!auth.isLogged()){
+            return navigate('/')
+        }
+
         navigate(props.route)
     } 
 

psicoadmin/src/Pages/Home.js

 export function Home() {
     return (
-        <h1>Bienvenido a pruebas psicometricas !!!</h1>
+        <section >
+            <div class="content-section">
+                <div class="main">
+                    <h1>Bienvenido de nuevo Grupo DIT</h1>
+                    <div class="panel_options">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <div class="panel" >
+                                    <a href="#">
+                                        <div class="body_tabs">
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <h1>Contraseñas</h1>
+                                                </div>
+                                                <div class="col-md-6 content_info">
+                                                    <i class="fas fa-shield-alt"></i>
+                                                    <p>432</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="panel" >
+                                    <a href="#">
+                                        <div class="body_tabs">
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <h1>Expedientes</h1>
+                                                </div>
+                                                <div class="col-md-6 content_info">
+                                                    <i class="far fa-user"></i>
+                                                    <p>11982</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="panel" >
+                                    <a href="#">
+                                        <div class="body_tabs">
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <h1>Puestos</h1>
+                                                </div>
+                                                <div class="col-md-6 content_info">
+                                                    <i class="far fa-list-alt"></i>
+                                                    <p>359</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="historial_candidatos">
+                        <div class="row">
+                            <div class="col-md-8">
+                                <div class="body_historial">
+                                    <div class="header_historial">
+                                        <i class="far fa-clock"></i>
+                                        <p>HISTORIAL DE ACCESO DE CANDIDATOS</p>
+                                    </div>
+                                    <div class="content_historial">
+                                        <p>Últimos candidatos que han ingresado al sistema:</p>
+                                        <div class="cabeceras">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>Contraseña</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Puesto</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No. Identificación</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Fecha de aplicación</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Pruebas Pendientes</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="data_candidato">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>repartidorPARMA</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Piloto Repartidor</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p><a href="#">1583266600501</a></p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>27/12/2018</p>
+                                                    <p>12:02 PM</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="data_candidato">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>repartidorPARMA</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Piloto Repartidor</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p><a href="#">1583266600501</a></p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>27/12/2018</p>
+                                                    <p>12:02 PM</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="data_candidato">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>repartidorPARMA</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Piloto Repartidor</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p><a href="#">1583266600501</a></p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>27/12/2018</p>
+                                                    <p>12:02 PM</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="data_candidato">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>repartidorPARMA</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Piloto Repartidor</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p><a href="#">1583266600501</a></p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>27/12/2018</p>
+                                                    <p>12:02 PM</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="data_candidato">
+                                            <div class="row">
+                                                <div class="col20">
+                                                    <p>repartidorPARMA</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>Piloto Repartidor</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p><a href="#">1583266600501</a></p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>27/12/2018</p>
+                                                    <p>12:02 PM</p>
+                                                </div>
+                                                <div class="col20">
+                                                    <p>No</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="actividades_recientes">
+                                    <div class="cabecera_recently">
+                                        <i class="fas fa-plane-departure"></i>
+                                        <p>HISTORIAL DE ACTIVIDADES</p>
+                                    </div>
+                                    <div class="content_historial">
+                                        <p>Últimas actividades registradas</p>
+                                        <div class="data_actividad">
+                                            <div class="filtros_history">
+                                                <div class="row">
+                                                    <div class="col-md-4">
+                                                        <label>Contraseña</label>
+                                                        <input type="text" name="contraseña" placeholder="Contraseña"/>
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <label>Módulo</label>
+                                                        <select>
+                                                            <option>Puestos</option>
+                                                            <option>Contraseñas</option>
+                                                            <option>Expedientes</option>
+                                                            <option>Resultados</option>
+                                                            <option>Pruebas</option>
+                                                            <option>Ajustes</option>
+                                                            <option>Membresías</option>
+                                                            <option>Sesiones</option>
+                                                        </select>
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <label>Acción</label>
+                                                        <select>
+                                                            <option>Crear</option>
+                                                            <option>Editar</option>
+                                                            <option>Eliminar</option>
+                                                            <option>Desbloquear</option>
+                                                        </select>
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <label>Fecha Inicio</label>
+                                                        <input id="custom-input-date" class="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <label>Fecha Inicio</label>
+                                                        <input id="custom-input-date-2" class="calendar" type="text" name="upload-release" placeholder=""/>
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <button class="buscar_filtros_history">Buscar</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="cabeceras_actividad">
+                                                <div class="row">
+                                                    <div class="col25">
+                                                        <p>Contraseña</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Descripción</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Módulo</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Fecha</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="body_history">
+                                                <div class="row">
+                                                    <div class="col25">
+                                                        <p>rcardona2510</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Creó la contraseña: pilotosanti</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Contraseñas</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>21/12/18 8:25:52</p>
+                                                    </div>
+                                                </div> 
+                                            </div>
+                                            <div class="body_history">
+                                                <div class="row">
+                                                    <div class="col25">
+                                                        <p>rcardona2510</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Creó la contraseña: pilotosanti</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Contraseñas</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>21/12/18 8:25:52</p>
+                                                    </div>
+                                                </div> 
+                                            </div>
+                                            <div class="body_history">
+                                                <div class="row">
+                                                    <div class="col25">
+                                                        <p>rcardona2510</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Creó la contraseña: pilotosanti</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>Contraseñas</p>
+                                                    </div>
+                                                    <div class="col25">
+                                                        <p>21/12/18 8:25:52</p>
+                                                    </div>
+                                                </div> 
+                                            </div>
+                                            <div class="footer_history">
+                                                <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     )
+
 }

psicoadmin/src/Pages/Login.js

     function In () {
         auth.login({ name : 'edgar', id : 1 })
         console.log('is logged ? ',auth.isLogged())
-        navigate('/dashboard')
-        //{/* return <Redirect to="/dashboard"/> */}
+        return navigate('/dashboard')
     }
 
     return(

psicoadmin/yarn.lock

     "import-local" "^3.0.2"
     "jest-cli" "^26.6.0"
 
+"js-cookie@^3.0.1":
+  "integrity" "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+  "resolved" "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz"
+  "version" "3.0.1"
+
 "js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0":
   "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
   "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"