Created the reset passowrd component. Linked every page for the lifecycle of the user forgetting his password.

src/components/ForgotPassword.tsx

@@ -1,18 +1,26 @@
 import React, { useState, ChangeEvent, MouseEvent } from "react";
 import { Card, Button, TextField } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import "@scss/forgot_password.scss";
 
 export default function ForgotPassword() {
     const [email, setEmail] = useState("");
+    const navigate = useNavigate();
 
     function handleEmail(e: ChangeEvent<HTMLInputElement>) {
         setEmail(e.target.value);
         console.log(email);
     }
 
+    function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        navigate("/")
+    }
+
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
         console.log(`Sumbitting email "${email}" to which send a link.`);
+        navigate("/reset")
     }
 
     return (
@@ -34,7 +42,7 @@ export default function ForgotPassword() {
                     <Button
                         id="cancel"
                         variant="outlined"
-                        onClick={buttonSubmit}
+                        onClick={buttonCancel}
                     >
                         Cancel
                     </Button>

src/components/Login.tsx

@@ -1,10 +1,12 @@
 import React, { useState, ChangeEvent, MouseEvent } from "react";
 import { Card, Button, TextField } from "@mui/material"
 import "@scss/login.scss"
+import { Link, Navigate, useNavigate } from "react-router-dom";
 
 export default function Login() {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
+    const navigate = useNavigate();
 
     function hash(s: string) {
         return s;
@@ -23,6 +25,7 @@ export default function Login() {
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
         console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
+        navigate("/main")
     }
 
     return (
@@ -32,7 +35,7 @@ export default function Login() {
                 <TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} />
                 <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} />
                 <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
-                <p>Forgot your <a href="/">password</a>?</p>
+                <p>Forgot your <Link to="/forgot">password</Link>?</p>
             </Card>
         </main>
     )

src/components/Reset.tsx

@@ -0,0 +1,46 @@
+import React, { useState, ChangeEvent, MouseEvent } from "react";
+import { Card, Button, TextField } from "@mui/material"
+import { useNavigate } from "react-router-dom";
+import "@scss/reset.scss"
+
+export default function Reset() {
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const navigate = useNavigate();
+
+    function hash(s: string) {
+        return s;
+    }
+
+    function handlePassword(e: ChangeEvent<HTMLInputElement>) {
+        setPassword(e.target.value);
+        console.log(hash(password));
+    }
+    
+    function handleConfirmPassword(e: ChangeEvent<HTMLInputElement>) {
+        setConfirmPassword(e.target.value);
+        console.log(confirmPassword);
+    }
+
+    function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        if (password == confirmPassword && password.length != 0){
+            console.log(`Sumbitting password "${hash(password)}"`)
+            navigate("/")
+        }
+        else{
+            console.warn("Passwords are not matching or are empty");
+        }
+    }
+
+    return (
+        <main id="root">
+            <Card className="card">
+                <h3>Reset Password</h3>
+                <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} />
+                <TextField className="textfield" id="configrmPassword" label="Confirm Password" type="password" value={confirmPassword} onChange={handleConfirmPassword} />
+                <Button id="submit" variant="contained" onClick={buttonSubmit}>Reset Password</Button>
+            </Card>
+        </main>
+    )
+}

src/components/index.tsx

@@ -0,0 +1,7 @@
+import App from "@components/App";
+import Login from "@components/Login";
+import ForgotPassword from "@components/ForgotPassword";
+import Reset from "@components/Reset";
+import ErrorPage from "@components/ErrorPage";
+
+export { App, Login, ForgotPassword, Reset, ErrorPage };

src/index.tsx

@@ -1,15 +1,27 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
-import App from "@components/App";
+import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
-import ErrorPage from "@components/ErrorPage";
+import { ErrorPage, Login, ForgotPassword, Reset } from "@components";
-import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
+
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <Navigate to="/login" />,
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/forgot",
+    element: <ForgotPassword />,
+  },
+  {
+    path: "/reset",
+    element: <Reset />,
+  },
 ]);
 
 createRoot(document.querySelector("#root")).render(

src/scss/reset.scss

@@ -0,0 +1,2 @@
+@use "style.scss";
+@use "cards.scss";

src/scss/variables.module.scss

@@ -1,4 +1,2 @@
 $bg1: #333;
 $fg1: #c5c8c6;
-
-// :export {}

tsconfig.json

@@ -10,6 +10,7 @@
         "moduleResolution": "node",
         "baseUrl": "./src",
         "paths" : {
+            "@components": ["components"],
             "@components/*": ["components/*"],
             "@scss/*": ["scss/*"],
         }