loggin fix

psicoadmin/src/Auth/AuthProvider.js

@@ -9,10 +9,16 @@ export function AuthProvider ({ children }){
 
     const context = {
         user,
-        login: () => {
-            let body = JSON.stringify( { name : 'edgar' , id : 1} )
-            Cookies.set('user', body, { expires : 7 })
-            setUser(Cookies.get('user'))
+        login: (user) => {
+
+            try{
+                let body = JSON.stringify( user )
+                Cookies.set('user', body, { expires : 7 })
+                setUser(Cookies.get('user'))
+            }catch(e){
+                console.log('Error >> ', e)
+                Cookies.set('user', undefined)
+            }
 
         },
         logout : () => {
@@ -21,7 +27,7 @@ export function AuthProvider ({ children }){
         },
         isLogged : () => {
             let CookiesUser = Cookies.get('user')
-            // console.log('existe usuario -> ', CookiesUser)
+            console.log('existe usuario -> ', CookiesUser)
             if(!CookiesUser || CookiesUser === 'undefined'){
                 return false
             }

psicoadmin/src/Pages/Login.jsx

@@ -1,25 +1,169 @@
+// import { useNavigate } from 'react-router-dom'
+// import useAuth from '../Auth/useAuth';
+// import {Button} from 'react-bootstrap'
+//
+// export function Login () {
+//     
+//     let auth = useAuth();
+//     let navigate = useNavigate()
+//
+//
+//     function In () {
+//         auth.login({ name : 'edgar', id : 1 })
+//         console.log('is logged ? ',auth.isLogged())
+//         return navigate('/dashboard/home')
+//     }
+//
+//     return(
+//         <>
+//             <h1>Bienvenido</h1>
+//             <Button onClick={In}>
+//                 Iniciar Session
+//             </Button>
+//         </>
+//     )
+// }
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+
+import PersonIcon from '@mui/icons-material/Person';
+import Typography from '@mui/material/Typography';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import {Paper, Box, Grid,Link, Checkbox, FormControlLabel } from '@mui/material'
+
 import { useNavigate } from 'react-router-dom'
 import useAuth from '../Auth/useAuth';
-import {Button} from 'react-bootstrap'
 
-export function Login () {
-    
+function Copyright(props){
+    return (
+        <Typography variant="body2" color="text.secondary" align="center" {...props}>
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+                GrupoDIT
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}
+
+const theme = createTheme();
+
+export function Login() {
+
     let auth = useAuth();
     let navigate = useNavigate()
 
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+
+        let user = {
+            email: data.get('email'),
+            password: data.get('password'),
+        }
+
+        console.log(user);
+        auth.login(user)
+        console.log(auth.isLogged());
 
-    function In () {
-        auth.login({ name : 'edgar', id : 1 })
-        console.log('is logged ? ',auth.isLogged())
         return navigate('/dashboard/home')
-    }
-
-    return(
-        <>
-            <h1>Bienvenido</h1>
-            <Button onClick={In}>
-                Iniciar Session
-            </Button>
-        </>
-    )
+
+    };
+
+    return (
+        <ThemeProvider theme={theme}>
+            <Grid container component="main" sx={{ height: '100vh' }}>
+                <CssBaseline />
+                <Grid
+                    item
+                    xs={false}
+                    sm={4}
+                    md={7}
+                    sx={{
+                        backgroundImage: 'url(https://source.unsplash.com/random)',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundColor: (t) =>
+                        t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }}
+                />
+                <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+                    <Box
+                        sx={{
+                            my: 8,
+                            mx: 4,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
+                            <PersonIcon />
+                        </Avatar>
+                        <Typography component="h1" variant="h5">
+                            Ingresar
+                        </Typography>
+                        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
+                            <TextField
+                                margin="normal"
+                                required
+                                fullWidth
+                                id="email"
+                                label="Email Address"
+                                name="email"
+                                autoComplete="email"
+                                autoFocus
+                            />
+                            <TextField
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="password"
+                                label="Password"
+                                type="password"
+                                id="password"
+                                autoComplete="current-password"
+                            />
+                            <FormControlLabel
+                                control={<Checkbox value="remember" sx={{ 
+                                    color: '#fd4b4b',
+                                    '&.Mui-checked': {
+                                        color: '#fd4b4b'
+                                    },
+                                }}/>}
+                                label="Recordarme"
+                            />
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                sx={{ mt: 3, mb: 2, bgcolor :'#fd4b4b'  }}
+                            >
+                                Ingresar
+                            </Button>
+                            <Grid container>
+                                <Grid item xs>
+                                    <Link href="#" variant="body2">
+                                        ¿Olvidaste tu contraseña?
+                                    </Link>
+                                </Grid>
+                                <Grid item>
+                                    <Link href="#" variant="body2">
+                                        {"¿No tienes cuenta? Regístrate"}
+                                    </Link>
+                                </Grid>
+                            </Grid>
+                            <Copyright sx={{ mt: 5 }} />
+                        </Box>
+                    </Box>
+                </Grid>
+            </Grid>
+        </ThemeProvider>
+    );
 }