Made each form use useForm

src/components/ForgotPassword.tsx

@@ -1,15 +1,37 @@
-import React, { useState, ChangeEvent, MouseEvent } from "react";
+import React, { MouseEvent } from "react";
 import { Card, Button, TextField } from "@mui/material";
-import { useNavigate } from "react-router-dom";
 import "@scss/forgot_password.scss";
+import { useNavigate } from "react-router-dom";
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from "yup";
+import { useForm } from "react-hook-form"
+
+type Inputs = {
+    email: string;
+    password: string;
+};
+
+const schema = yup.object().shape({
+    email: yup.string().email("Please provide a valid email").required("No email was provided")
+}).required();
+
 
 export default function ForgotPassword() {
-    const [email, setEmail] = useState("");
     const navigate = useNavigate();
+    const { register, formState: { errors },  handleSubmit } = useForm<Inputs>({
+        resolver: yupResolver(schema), // yup, joi and even your own.
+    });
 
-    function handleEmail(e: ChangeEvent<HTMLInputElement>) {
-        setEmail(e.target.value);
-        console.log(email);
+
+    const {ref: emailRef, ...emailRegisterProps} = register("email");
+    const emailProps = {
+        ...emailRegisterProps,
+        inputRef: emailRef,
+        className: "textfield",
+        id: "email",
+        label: "Email",
+        error: !!errors.email,
+        helperText: errors?.email?.message,
     }
 
     function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
@@ -17,27 +39,22 @@ export default function ForgotPassword() {
         navigate("/login")
     }
 
-    function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
-        e.preventDefault();
-        console.log(`Sumbitting email "${email}" to which send a link.`);
-        navigate("/reset")
+    function onSubmit(data: Inputs) {
+        console.log("There will be an API call now with the following data");
+        console.table(data);
+        console.log("You can now go to http://localhost:8080/reset to acces the reset form")
     }
 
     return (
         <main className="cardContainer">
-            <Card className="card">
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Card className="card">
                     <h3>Forgot Passowrd</h3>
                     <p>
                         If you have forgot your password, we can send you an email
                         with a link to reset it.
                     </p>
-                    <TextField
-                        className="textfield"
-                        id="email"
-                        label="Email"
-                        value={email}
-                        onChange={handleEmail}
-                    />
+                    <TextField {...emailProps} />
                     <div className="buttons">
                         <Button
                             id="cancel"
@@ -50,12 +67,12 @@ export default function ForgotPassword() {
                             type="submit"
                             id="submit"
                             variant="contained"
-                            onClick={buttonSubmit}
                         >
                             Submit
                         </Button>
                     </div>
-            </Card>
+                </Card>
+            </form>
         </main>
     );
 }

src/components/Login.tsx

@@ -26,9 +26,7 @@ export default function Login() {
         return `hash of '${s}' to be definied`;
     }
 
-    const {ref: emailRef, ...emailRegisterProps} = register("email", {
-        required: "error txt lol"
-    });
+    const {ref: emailRef, ...emailRegisterProps} = register("email");
 
     const emailProps = {
         ...emailRegisterProps,

src/components/Reset.tsx

@@ -1,46 +1,76 @@
-import React, { useState, ChangeEvent, MouseEvent } from "react";
+import React, { ChangeEvent, MouseEvent } from "react";
 import { Card, Button, TextField } from "@mui/material"
-import { useNavigate } from "react-router-dom";
 import "@scss/reset.scss"
+import { useNavigate } from "react-router-dom";
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from "yup";
+import { useForm } from "react-hook-form"
+
+type Inputs = {
+    password: string;
+    confirm_password: string;
+};
+
+const schema = yup.object().shape({
+    password: yup.string().required("No password was provided"),
+    confirm_password: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match')
+}).required();
 
 export default function Reset() {
-    const [password, setPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
     const navigate = useNavigate();
 
+    const { register, formState: { errors },  handleSubmit } = useForm<Inputs>({
+        resolver: yupResolver(schema), // yup, joi and even your own.
+    });
+
     function hash(s: string) {
-        return s;
+        return `hash of '${s}' to be definied`;
     }
 
-    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);
+    const {ref: passRef, ...passRegisterProps} = register("password");
+
+    const passProps = {
+        ...passRegisterProps,
+        inputRef: passRef,
+        className: "textField",
+        name: "password",
+        id: "password",
+        label: "Password",
+        error: !!errors.password,
+        helperText: errors?.password?.message,
     }
 
-    function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
-        e.preventDefault();
-        if (password == confirmPassword && password.length != 0){
-            console.log(`Sumbitting password "${hash(password)}"`)
-            navigate("/login")
-        }
-        else{
-            console.warn("Passwords are not matching or are empty");
-        }
+    const {ref: confirmPassRef, ...confirmPassRegisterProps} = register("confirm_password");
+
+    const confirmPassProps = {
+        ...confirmPassRegisterProps,
+        inputRef: confirmPassRef,
+        className: "textField",
+        name: "confirm_password",
+        id: "confirm_password",
+        label: "Confirm Password",
+        error: !!errors.confirm_password,
+        helperText: errors?.confirm_password?.message,
+    }
+
+    function onSubmit(data: Inputs) {
+        console.log("There will be an API call now with the following data");
+        data = {password: hash(data.password), confirm_password: hash(data.confirm_password)}
+        console.table(data);
+        // setTimeout(() => navigate("/?logged"), 3000)
     }
 
     return (
         <main className="cardContainer">
-            <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>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Card className="card">
+                    <h3>Reset Password</h3>
+                    <TextField {...passProps}/>
+                    <TextField {...confirmPassProps}/>
+                    <Button type="submit" id="submit" variant="contained">Reset Password</Button>
+                </Card>
+            </form>
         </main>
+
     )
 }