use redux as auth handler method

src/Components/Dashboard.js

@@ -22,8 +22,9 @@ import Footer from "../Components/Footer";
 
 import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
 import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
-import useAuth from '../Auth/useAuth.js'
 import ProfilePicture from '../Images/man.png';
+import { useDispatch } from 'react-redux';
+import { removeToken } from '../Slices/tokenSlice';
 
 const drawerWidth = 240;
 const mdTheme = createTheme();
@@ -77,140 +78,140 @@ const Drawer = styled(MuiDrawer,
 
 function DashboardContent() {
 
-    const [open, setOpen] = React.useState(false);
-
-    const isMovil = Size('(max-width:770px)');
-    const auth = useAuth();
-    const navigate = useNavigate()
-
-    const CerrarSession = () => {
-        auth.logout();
-        navigate('/')
-    }
-
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const open_profile = Boolean(anchorEl);
-    const handleClick = (event) =>  setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null)
-    const toggleDrawer = () => {
-        if(isMovil){
-            setAnchorElMov(!anchorElMovil)
-        }else{
-            setOpen(!open);
-        }
+  const [open, setOpen] = React.useState(false);
+
+  const isMovil = Size('(max-width:770px)');
+  const dispatch = useDispatch();
+  const navigate = useNavigate()
+
+  const CerrarSession = () => {
+    dispatch(removeToken())
+    navigate('/')
+  }
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open_profile = Boolean(anchorEl);
+  const handleClick = (event) =>  setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null)
+  const toggleDrawer = () => {
+    if(isMovil){
+      setAnchorElMov(!anchorElMovil)
+    }else{
+      setOpen(!open);
     }
-    const [anchorElMovil, setAnchorElMov] = React.useState(false);
-
-    return (
-        <ThemeProvider theme={mdTheme}>
-            <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
-            <Box sx={{ display: 'flex' }}>
-                <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
-                    <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
-                        <IconButton
-                            name="navigation_icon_button"
-                            edge="start"
-                            color="inherit"
-                            aria-label="open drawer"
-                            // onClick={isMovil ? MenuResponsive : toggleDrawer}
-                            onClick={toggleDrawer}
-                            sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
-                            <MenuIcon style={{
-                                background: '#ec5e69',
-                                fontSize: "40",
-                                color: "#fff"
-                            }} />
-                        </IconButton>
-                        <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
-                            {
-                                open ? (
-                                    <React.Fragment>
-
-                                        <IconButton onClick={toggleDrawer}>
-                                            <LeftKey/>
-                                        </IconButton>
-
-                                        <IconButton onClick={(event) => event.target.requestFullscreen()}>
-                                            <FullscreenIcon style={{ paddinLeft: 15 }} />
-                                        </IconButton>
-                                    </React.Fragment>
-                                ) : undefined
-                            }
-                        </Typography>
-
-                        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                            <IconButton size="large" aria-label="show 4 new mails" color="inherit">
-                                <Badge badgeContent={4} color="error">
-                                    <MailIcon style={{ color : '#212529' }} />
-                                </Badge>
-                            </IconButton>
-                            <IconButton
-                                size="large"
-                                aria-label="show 17 new notifications"
-                                color="inherit">
-                                <Badge badgeContent={17} color="error">
-                                    <NotificationsIcon style={{ color : '#212529' }}/>
-                                </Badge>
-                            </IconButton>
-
-
-                            <IconButton
-                                size="small"
-                                edge="end"
-                                aria-label="account of current user"
-                                aria-haspopup="true"
-                                aria-expanded={open_profile ? 'true' : undefined}
-                                onClick={handleClick}
-                                color="inherit"
-                            >
-                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
-
-                            </IconButton>
-                            <Menu
-                                id="basic-menu"
-                                anchorEl={anchorEl}
-                                open={open_profile}
-                                onClose={handleClose}
-                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Profile</MenuItem>
-                                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
-                                <MenuItem onClick={CerrarSession}>Logout</MenuItem>
-                            </Menu>
-                        </Box>
-
-
-                    </Toolbar>
-                </AppBar>
-                <Drawer variant="permanent" open={open} >
-                    <Toolbar
-                        sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-start',
-                            px: [1]
-                        }} >
-                        <div style={{ flat: 'righ' }} className="sidebar-header">
-                            <div className="width_img">
-                                <img src={Logo} alt="pruebas psicometricas" />
-                            </div>
-                        </div>
-                    </Toolbar>
-                    <Divider />
-                    <List>
-                        <MainListItems AppBarVisible={open} setAppBarVisible={setOpen} />
-                    </List>
-                    <Divider />
-                    <List>
-                        {SecondaryListItems}
-                    </List>
-                </Drawer>
-                <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
-                    <Outlet />
-                    <Footer />
-                </Container>
+  }
+  const [anchorElMovil, setAnchorElMov] = React.useState(false);
+
+  return (
+    <ThemeProvider theme={mdTheme}>
+      <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
+      <Box sx={{ display: 'flex' }}>
+        <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
+            <IconButton
+              name="navigation_icon_button"
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              // onClick={isMovil ? MenuResponsive : toggleDrawer}
+              onClick={toggleDrawer}
+              sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
+              <MenuIcon style={{
+                background: '#ec5e69',
+                fontSize: "40",
+                color: "#fff"
+              }} />
+            </IconButton>
+            <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
+              {
+              open ? (
+                <React.Fragment>
+
+                  <IconButton onClick={toggleDrawer}>
+                    <LeftKey/>
+                  </IconButton>
+
+                  <IconButton onClick={(event) => event.target.requestFullscreen()}>
+                    <FullscreenIcon style={{ paddinLeft: 15 }} />
+                  </IconButton>
+                </React.Fragment>
+              ) : undefined
+            }
+            </Typography>
+
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+              <IconButton size="large" aria-label="show 4 new mails" color="inherit">
+                <Badge badgeContent={4} color="error">
+                  <MailIcon style={{ color : '#212529' }} />
+                </Badge>
+              </IconButton>
+              <IconButton
+                size="large"
+                aria-label="show 17 new notifications"
+                color="inherit">
+                <Badge badgeContent={17} color="error">
+                  <NotificationsIcon style={{ color : '#212529' }}/>
+                </Badge>
+              </IconButton>
+
+
+              <IconButton
+                size="small"
+                edge="end"
+                aria-label="account of current user"
+                aria-haspopup="true"
+                aria-expanded={open_profile ? 'true' : undefined}
+                onClick={handleClick}
+                color="inherit"
+              >
+                <Avatar alt="Cindy Baker" src={ProfilePicture} />
+
+              </IconButton>
+              <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open_profile}
+                onClose={handleClose}
+                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
+                <MenuItem onClick={() => navigate('dashboard/perfil') }>Profile</MenuItem>
+                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
+                <MenuItem onClick={CerrarSession}>Logout</MenuItem>
+              </Menu>
             </Box>
-        </ThemeProvider>
-    );
+
+
+          </Toolbar>
+        </AppBar>
+        <Drawer variant="permanent" open={open} >
+          <Toolbar
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              px: [1]
+            }} >
+            <div style={{ flat: 'righ' }} className="sidebar-header">
+              <div className="width_img">
+                <img src={Logo} alt="pruebas psicometricas" />
+              </div>
+            </div>
+          </Toolbar>
+          <Divider />
+          <List>
+            <MainListItems AppBarVisible={open} setAppBarVisible={setOpen} />
+          </List>
+          <Divider />
+          <List>
+            {SecondaryListItems}
+          </List>
+        </Drawer>
+        <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
+          <Outlet />
+          <Footer />
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
 }
 
 export function Dashboard() {

src/Components/PrivateRoute.js

@@ -4,35 +4,33 @@ import { useSelector } from 'react-redux';
 
 export default function RequireAuth({ children }) {
 
-    let auth = useAuth();
-    let location = useLocation();
-    let { authorities } = auth.getRole();
-    authorities = authorities ? authorities.map( e => e.toUpperCase()) : [] ;
-
-    if (!auth.isLogged()) {
-        if( authorities.includes("CANDIDATO")){
-            console.log("redirigir candidato")
-            return <Navigate to="/logincd" state={{ from: location }} replace />;
-        }else{
-            console.log("redirigir recluter")
-            return <Navigate to="/login" state={{ from: location }} replace />;
-        }
+  let auth = useAuth();
+  let location = useLocation();
+  let { authorities } = auth.getRole();
+  authorities = authorities ? authorities.map(e => e.toUpperCase()) : [];
+
+  if (!auth.isLogged()) {
+    if (authorities.includes("CANDIDATO")) {
+      console.log("redirigir candidato")
+      return <Navigate to="/logincd" state={{ from: location }} replace />;
+    } else {
+      console.log("redirigir recluter")
+      return <Navigate to="/login" state={{ from: location }} replace />;
     }
+  }
 
-    return children;
+  return children;
 }
 
 export function RequireToken({ children }) {
 
-    let token = useSelector((state) => state.token.token)
-    let location = useLocation();
-    // let { authorities } = auth.getRole();
-    // authorities = authorities ? authorities.map( e => e.toUpperCase()) : [] ;
+  let token = useSelector((state) => state.token.token)
+  let location = useLocation();
 
-    if (!token) {
-      console.log('falta authorizacion user')
-      return <Navigate to="/logincd" state={{ from: location }} replace />;
-    }
+  if (!token) {
+    console.log('falta authorizacion user')
+    return <Navigate to="/logincd" state={{ from: location }} replace />;
+  }
 
-    return children;
+  return children;
 }

src/Components/Routes.js

@@ -52,9 +52,9 @@ export default function MyRoutes() {
       <Route
         path="dashboard"
         element={
-          <RequireAuth>
+          <RequireToken>
             <Dashboard />
-          </RequireAuth>
+          </RequireToken>
         }
       >
         <Route path="home" element={<Home />} />

src/Pages/Home.jsx

@@ -1,60 +1,55 @@
-import { Col, Row } from 'react-bootstrap'
-import React, { useEffect, useState } from 'react'
-
-import { PersonOutline, VerifiedUser, ListAlt  } from '@mui/icons-material/'
+import React from 'react'
 
+import { Col, Row } from 'react-bootstrap'
+import { PersonOutline, VerifiedUser, ListAlt } from '@mui/icons-material/'
 import Actividades from '../Components/Home/Actividades'
 import Candidatos from '../Components/Home/Candidatos'
 import { Card } from '../Components/Card';
+import { useSelector } from 'react-redux';
 
-import useAuth from '../Auth/useAuth';
 
 export function Home() {
 
-    const auth = useAuth();
-    const [nombre, setNombre] = useState(null);
-
-    useEffect(() => {
-        let { nombre: empresa } = auth.getProfile();
-        setNombre(empresa)
-    }, [auth])
-
-
-    return (
-        <section >
-            <div className="content-section">
-                <div className="main">
-
-                    <div id="start_title">
-                        <h1>Bienvenido de nuevo {nombre}</h1>
-                    </div>
-
-                    <div className="panel_options">
-                        <Row>
-                            <Col md="4">
-                                <Card quantity={120} to='/dashboard/contrasenas'  title='CONTRASEÑAS' icon={VerifiedUser}/>
-                            </Col>
-                            <Col md="4">
-                                <Card quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline}/>
-                            </Col>
-                            <Col md="4">
-                                <Card quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt}/>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div className="historial_candidatos">
-                        <Row>
-                            <Col md="8">
-                                <Candidatos/>
-                            </Col>
-                            <Col md="4">
-                                <Actividades/>
-                            </Col>
-                        </Row>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
+  const profile = useSelector((state) => state.user.profile)
+
+  return (
+    <section >
+      <div className="content-section">
+        <div className="main">
+
+          <div id="start_title">
+            <h1>Bienvenido de nuevo {profile.nombre}</h1>
+          </div>
+
+          <div className="panel_options">
+            <Row>
+              <Col md="4">
+                <Card
+                  quantity={120} to='/dashboard/contrasenas' title='CONTRASEÑAS' icon={VerifiedUser} />
+              </Col>
+              <Col md="4">
+                <Card
+                  quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline} />
+              </Col>
+              <Col md="4">
+                <Card
+                  quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt} />
+              </Col>
+            </Row>
+          </div>
+          <div className="historial_candidatos">
+            <Row>
+              <Col md="8">
+                <Candidatos />
+              </Col>
+              <Col md="4">
+                <Actividades />
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
 
 }

src/Pages/Login.jsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import jwt_decode from "jwt-decode";
-
-import { 
-    Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
-    TextField, CssBaseline, Button, Avatar,
-    Backdrop, CircularProgress,
+import { useDispatch, useSelector } from 'react-redux';
+import { setToken } from '../Slices/tokenSlice'
+import { setRole, setProfile } from '../Slices/userSlice'
+
+import {
+  Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
+  TextField, CssBaseline, Button, Avatar,
+  Backdrop, CircularProgress,
 } from '@mui/material'
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -14,7 +17,6 @@ import PersonIcon from '@mui/icons-material/Person';
 import { useNavigate } from 'react-router-dom'
 import { Copyright } from '../Components/Footer.js'
 import { Link } from 'react-router-dom'
-import useAuth from '../Auth/useAuth';
 
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -22,11 +24,11 @@ import * as Yup from 'yup';
 import { Service } from '../Utils/HTTP.js'
 
 const LoginSchema = Yup.object().shape({
-    email : Yup
+  email: Yup
     .string()
     .email('El correo debe ser válido')
     .required('El correo o usuario es requerido'),
-    password : Yup
+  password: Yup
     .string()
     .required('El campo contraseña es requerido')
     .min(5, 'La contraseña debe contener mínimo 5 caracteres')
@@ -36,177 +38,173 @@ const theme = createTheme();
 
 export function Login() {
 
-    let auth = useAuth();
-    let navigate = useNavigate()
-
-    const [open, setOpen] = React.useState(false);
-    const handleClose = () => false
-
-    const formik = useFormik({
-        initialValues: {
-            email: '',
-            password: '',
-        },
-        validationSchema: LoginSchema,
-        onSubmit: async (values) => {
-
-            let { email, password } = values
-            setOpen(true)
-            let request = new Service(`/user?user=${email}&password=${password}&typeusr=isreclutador`)
-            request
-            .post({})
-            .then( response => {
-
-                console.log("Service Response :: ", response)
-                let { token, nombre, apelidos, empresa } = response;
-                toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
-                token = token.replace("Bearer ", "")
-                console.log(token);
-
-                let body_token = jwt_decode(token);
-                console.log('',body_token)
-                // let timestamp = body_token.exp * 1000;
-                // let restante = timestamp - Date.now();
-
-                // setTimeout(() => alert("Token Expirado") , restante )
-                auth.setProfile(empresa)
-                auth.setRole(body_token)
-
-                setTimeout( () => {
-                    setOpen(false)
-                    auth.login(token)
-                }, 2000)
-
-            }) 
-            .catch( err => {
-                setOpen(false)
-                toast.error("Ups! usuario o contraseña incorrectos")
-                console.log("ERROR ", err)
-            })
-
-        },
-    });
-
-
-    React.useEffect(() => {
-        if(auth.isLogged()){
-            return navigate('/dashboard/home')
-        }
-    }, [auth,navigate])
-
-
-    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',
-                            marginTop : '25%'
-                        }}>
-                        <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
-                            <PersonIcon />
-                        </Avatar>
-                        <Typography component="h1" variant="h5">
-                            Ingresar
-                        </Typography>
-
-                        <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
-                            <TextField
-                                value={formik.values.email}
-                                onChange={formik.handleChange}
-                                error={formik.touched.email && Boolean(formik.errors.email)}
-                                helperText={formik.touched.email && formik.errors.email}
-                                margin="normal"
-                                required
-                                fullWidth
-                                id="email"
-                                name="email"
-                                label="Correo Electrónico"
-                                autoComplete="email"
-                                autoFocus
-                            />
-                            <TextField
-                                value={formik.values.password}
-                                onChange={formik.handleChange}
-                                error={formik.touched.password && Boolean(formik.errors.password)}
-                                helperText={formik.touched.password && formik.errors.password}
-                                margin="normal"
-                                required
-                                fullWidth
-                                label="Contraseña"
-                                name="password"
-                                type="password"
-                                id="password"
-                                autoComplete="current-password"
-                            />
-                            <FormControlLabel
-                                control={<Checkbox value="remember" sx={{ 
-                                    color: '#fd4b4b',
-                                    '&.Mui-checked': {
-                                        color: '#fd4b4b'
-                                    },
-                                }}/>}
-                                label="Recordarme"
-                            />
-                            <Button
-                                id="login_btn_fn"
-                                type="submit"
-                                fullWidth
-                                variant="contained"
-                                sx={{ mt: 3, mb: 2, bgcolor :'var(--main)'  }}
-                            >
-                                Ingresar
-                            </Button>
-                            <Grid container>
-                                <Grid item xs>
-                                    <Link className="login_link" to='/password/recuperar'>
-                                        ¿Olvidaste tu contraseña?
-                                    </Link>
-                                </Grid>
-                                <Grid item>
-                                    <Link className="login_link" to='/register'>
-                                        {"¿No tienes cuenta? Regístrate"}
-                                    </Link>
-                                </Grid>
-                            </Grid>
-                            <Copyright sx={{ mt: 5 }} />
-                        </Box>
-                    </Box>
+  const navigate = useNavigate()
+  const auth = useSelector((state) => state.token)
+  const dispatch = useDispatch();
+
+
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => false
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: LoginSchema,
+    onSubmit: async (values) => {
+
+      let { email, password } = values
+      setOpen(true)
+      let request = new Service(`/user?user=${email}&password=${password}&typeusr=isreclutador`)
+      request
+        .post({})
+        .then(response => {
+
+          let { token, nombre, apelidos, empresa } = response;
+          toast.success(`Bienvenido ${nombre} ${apelidos} !!`)
+          token = token.replace("Bearer ", "")
+          let body_token = jwt_decode(token);
+          let timestamp = body_token.exp * 1000;
+          let restante = timestamp - Date.now();
+
+          setTimeout(() => alert("Token Expirado") , restante )
+          dispatch(setProfile(empresa))
+          dispatch(setRole(body_token))
+
+          setTimeout(() => {
+            setOpen(false)
+            dispatch(setToken(token))
+            // auth.login(token)
+          }, 2000)
+
+        })
+        .catch(err => {
+          setOpen(false)
+          toast.error("Ups! usuario o contraseña incorrectos")
+        })
+
+    },
+  });
+  
+  React.useEffect(() => {
+    if(auth.token){
+      navigate('/dashboard/home')
+    }
+  }, [auth, navigate])
+
+  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',
+              marginTop: '25%'
+            }}>
+            <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
+              <PersonIcon />
+            </Avatar>
+            <Typography component="h1" variant="h5">
+              Ingresar
+            </Typography>
+
+            <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
+              <TextField
+                value={formik.values.email}
+                onChange={formik.handleChange}
+                error={formik.touched.email && Boolean(formik.errors.email)}
+                helperText={formik.touched.email && formik.errors.email}
+                margin="normal"
+                required
+                fullWidth
+                id="email"
+                name="email"
+                label="Correo Electrónico"
+                autoComplete="email"
+                autoFocus
+              />
+              <TextField
+                value={formik.values.password}
+                onChange={formik.handleChange}
+                error={formik.touched.password && Boolean(formik.errors.password)}
+                helperText={formik.touched.password && formik.errors.password}
+                margin="normal"
+                required
+                fullWidth
+                label="Contraseña"
+                name="password"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+              />
+              <FormControlLabel
+                control={<Checkbox value="remember" sx={{
+                  color: '#fd4b4b',
+                  '&.Mui-checked': {
+                    color: '#fd4b4b'
+                  },
+                }} />}
+                label="Recordarme"
+              />
+              <Button
+                id="login_btn_fn"
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2, bgcolor: 'var(--main)' }}
+              >
+                Ingresar
+              </Button>
+              <Grid container>
+                <Grid item xs>
+                  <Link className="login_link" to='/password/recuperar'>
+                    ¿Olvidaste tu contraseña?
+                  </Link>
+                </Grid>
+                <Grid item>
+                  <Link className="login_link" to='/register'>
+                    {"¿No tienes cuenta? Regístrate"}
+                  </Link>
                 </Grid>
-            </Grid>
-            <Toaster
-                position="top-left"
-                reverseOrder={false}
-            />
-            <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={open}
-                onClick={handleClose}
-            >
-                <CircularProgress color="inherit" />
-            </Backdrop>
-
-        </ThemeProvider>
-
-    );
+              </Grid>
+              <Copyright sx={{ mt: 5 }} />
+            </Box>
+          </Box>
+        </Grid>
+      </Grid>
+      <Toaster
+        position="top-left"
+        reverseOrder={false}
+      />
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={handleClose}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+
+    </ThemeProvider>
+
+  );
 }