forgot password

src/App.css

@@ -156,3 +156,12 @@
     border : none !important;
 }
 
+.login_link{
+    color : #2ec5d3;
+}
+
+.login_link:hover{
+    font-weight : bold;
+    color : #3ec5d3;
+}
+

src/Components/Routes.js

@@ -15,6 +15,7 @@ import { PruebaNueva } from '../Pages/PruebaNueva'
 import { PruebaAsignar } from '../Pages/PruebaAsignar'
 import { NotFound } from '../Pages/404'
 import { Profile } from '../Pages/Profile'
+import { RestorePassword } from '../Pages/RestorePassword'
 
 import RequireAuth from '../Components/PrivateRoute'
 
@@ -26,6 +27,7 @@ export default function MyRoutes () {
             <Route path="/" element={<Navigate to='login'/>} />
             <Route path="psicoadmin" element={<Navigate to='/login'/>} />
             <Route path="login" element={<Login/>} />
+            <Route path="password/recuperar" element={<RestorePassword/>} />
             <Route 
                 path="dashboard" 
                 element={

src/Components/listItems.js

@@ -19,8 +19,6 @@ function NavItem (props) {
     let resolved = useResolvedPath(props.route);
     let match = useMatch({ path: resolved.pathname, end: true });
 
-    console.log(match,typeof(match))
-
     return(
         <ListItem
             sx={{ color : '#25344f'}}
@@ -48,8 +46,7 @@ function NavItem (props) {
 export const MainListItems = (props) =>  {
 
     /* TODO
-     *
-     *
+     *   only show submenu when is complete 
      */
 
     const [open, setOpen] = React.useState(false);

src/Pages/Login.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { 
-    Paper, Box, Grid,Link, Checkbox, FormControlLabel, Typography,
+    Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
     TextField, CssBaseline, Button, Avatar
 } from '@mui/material'
 
@@ -10,6 +10,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 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';
@@ -138,12 +139,12 @@ export function Login() {
                             </Button>
                             <Grid container>
                                 <Grid item xs>
-                                    <Link href="#" variant="body2">
+                                    <Link className="login_link" to='/password/recuperar'>
                                         ¿Olvidaste tu contraseña?
                                     </Link>
                                 </Grid>
                                 <Grid item>
-                                    <Link href="#" variant="body2">
+                                    <Link className="login_link" to='/'>
                                         {"¿No tienes cuenta? Regístrate"}
                                     </Link>
                                 </Grid>

src/Pages/RestorePassword.jsx

@@ -0,0 +1,27 @@
+import Logo from '../Images/logo.png'
+
+export function RestorePassword() {
+    return(
+        <section className="error_page">
+            <div className="page_notfound">
+                <div className="row">
+                    <div className="col-md-12">    
+                        <div className="contenedor_restore">            
+                            <div className="logo">
+                                <img src={Logo}/>
+                            </div>
+                            <div className="form_restore">
+                                <h1>¿Olvidaste tu contraseña?</h1>
+                                <p>Ingresa tu correo electrónico a continuación y te estaremos enviando instrucciones para cambiar tu contraseña.</p>
+                                <form>
+                                    <input type="email" name="mail" placeholder="Ingresa tu correo electrónico" required/>
+                                    <button className="restore_btn" type="submit">Enviar</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>    
+        </section>
+    )
+}