Formatted the code of components

src/components/ForgotPassword.tsx

@@ -2,28 +2,36 @@ import React, { MouseEvent } from "react";
 import { Card, Button, TextField } from "@mui/material";
 import "@scss/forgot_password.scss";
 import { useNavigate } from "react-router-dom";
-import { yupResolver } from '@hookform/resolvers/yup';
+import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import { useForm } from "react-hook-form"
+import { useForm } from "react-hook-form";
 
 type Inputs = {
     email: string;
     password: string;
 };
 
-const schema = yup.object().shape({
+const schema = yup
-    email: yup.string().email("Please provide a valid email").required("No email was provided")
+    .object()
-}).required();
+    .shape({
-
+        email: yup
+            .string()
+            .email("Please provide a valid email")
+            .required("No email was provided"),
+    })
+    .required();
 
 export default function ForgotPassword() {
     const navigate = useNavigate();
-    const { register, formState: { errors },  handleSubmit } = useForm<Inputs>({
+    const {
-        resolver: yupResolver(schema), // yup, joi and even your own.
+        register,
+        formState: { errors },
+        handleSubmit,
+    } = useForm<Inputs>({
+        resolver: yupResolver(schema),
     });
 
-
+    const { ref: emailRef, ...emailRegisterProps } = register("email");
-    const {ref: emailRef, ...emailRegisterProps} = register("email");
     const emailProps = {
         ...emailRegisterProps,
         inputRef: emailRef,
@@ -32,17 +40,19 @@ export default function ForgotPassword() {
         label: "Email",
         error: !!errors.email,
         helperText: errors?.email?.message,
-    }
+    };
 
     function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
-        navigate("/login")
+        navigate("/login");
     }
 
     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")
+        console.log(
+            "You can now go to http://localhost:8080/reset to acces the reset form"
+        );
     }
 
     return (
@@ -51,8 +61,8 @@ export default function ForgotPassword() {
                 <Card className="card">
                     <h3>Forgot Passowrd</h3>
                     <p>
-                        If you have forgot your password, we can send you an email
+                        If you have forgot your password, we can send you an
-                        with a link to reset it.
+                        email with a link to reset it.
                     </p>
                     <TextField {...emailProps} />
                     <div className="buttons">
@@ -63,11 +73,7 @@ export default function ForgotPassword() {
                         >
                             Cancel
                         </Button>
-                        <Button
+                        <Button type="submit" id="submit" variant="contained">
-                            type="submit"
-                            id="submit"
-                            variant="contained"
-                        >
                             Submit
                         </Button>
                     </div>

src/components/Login.tsx

@@ -1,32 +1,42 @@
 import React from "react";
-import { Card, Button, TextField } from "@mui/material"
+import { Card, Button, TextField } from "@mui/material";
-import "@scss/login.scss"
+import "@scss/login.scss";
 import { Link, useNavigate } from "react-router-dom";
-import { yupResolver } from '@hookform/resolvers/yup';
+import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import { useForm } from "react-hook-form"
+import { useForm } from "react-hook-form";
 
 type Inputs = {
     email: string;
     password: string;
 };
 
-const schema = yup.object().shape({
+const schema = yup
-    email: yup.string().email("Please provide a valid email").required("No email was provided"),
+    .object()
-    password: yup.string().required("No password was provided"),
+    .shape({
-}).required();
+        email: yup
+            .string()
+            .email("Please provide a valid email")
+            .required("No email was provided"),
+        password: yup.string().required("No password was provided"),
+    })
+    .required();
 
 export default function Login() {
     const navigate = useNavigate();
-    const { register, formState: { errors },  handleSubmit } = useForm<Inputs>({
+    const {
-        resolver: yupResolver(schema), // yup, joi and even your own.
+        register,
+        formState: { errors },
+        handleSubmit,
+    } = useForm<Inputs>({
+        resolver: yupResolver(schema),
     });
 
     function hash(s: string) {
         return `hash of '${s}' to be definied`;
     }
 
-    const {ref: emailRef, ...emailRegisterProps} = register("email");
+    const { ref: emailRef, ...emailRegisterProps } = register("email");
 
     const emailProps = {
         ...emailRegisterProps,
@@ -37,9 +47,9 @@ export default function Login() {
         label: "Email",
         error: !!errors.email,
         helperText: errors?.email?.message,
-    }
+    };
 
-    const {ref: passRef, ...passRegisterProps} = register("password");
+    const { ref: passRef, ...passRegisterProps } = register("password");
 
     const passProps = {
         ...passRegisterProps,
@@ -50,27 +60,30 @@ export default function Login() {
         label: "Password",
         error: !!errors.password,
         helperText: errors?.password?.message,
-    }
+    };
 
     function onSubmit(data: Inputs) {
         console.log("There will be an API call now with the following data");
-        data = { ...data, password: hash(data.password) }
+        data = { ...data, password: hash(data.password) };
         console.table(data);
-        setTimeout(() => navigate("/?logged"), 3000)
+        setTimeout(() => navigate("/?logged"), 3000);
     }
 
-
     return (
         <main className="cardContainer">
             <form onSubmit={handleSubmit(onSubmit)}>
                 <Card className="card">
                     <h3>Login</h3>
                     <TextField {...emailProps} />
-                    <TextField {...passProps}/>
+                    <TextField {...passProps} />
-                    <Button type="submit" id="submit" variant="contained">Login</Button>
+                    <Button type="submit" id="submit" variant="contained">
-                    <p>Forgot your <Link to="/forgot">password</Link>?</p>
+                        Login
+                    </Button>
+                    <p>
+                        Forgot your <Link to="/forgot">password</Link>?
+                    </p>
                 </Card>
             </form>
         </main>
-    )
+    );
 }

src/components/Reset.tsx

@@ -1,33 +1,42 @@
 import React, { ChangeEvent, MouseEvent } from "react";
-import { Card, Button, TextField } from "@mui/material"
+import { Card, Button, TextField } from "@mui/material";
-import "@scss/reset.scss"
+import "@scss/reset.scss";
 import { useNavigate } from "react-router-dom";
-import { yupResolver } from '@hookform/resolvers/yup';
+import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import { useForm } from "react-hook-form"
+import { useForm } from "react-hook-form";
 
 type Inputs = {
     password: string;
     confirm_password: string;
 };
 
-const schema = yup.object().shape({
+const schema = yup
-    password: yup.string().required("No password was provided"),
+    .object()
-    confirm_password: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match')
+    .shape({
-}).required();
+        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 navigate = useNavigate();
 
-    const { register, formState: { errors },  handleSubmit } = useForm<Inputs>({
+    const {
-        resolver: yupResolver(schema), // yup, joi and even your own.
+        register,
+        formState: { errors },
+        handleSubmit,
+    } = useForm<Inputs>({
+        resolver: yupResolver(schema),
     });
 
     function hash(s: string) {
         return `hash of '${s}' to be definied`;
     }
 
-    const {ref: passRef, ...passRegisterProps} = register("password");
+    const { ref: passRef, ...passRegisterProps } = register("password");
 
     const passProps = {
         ...passRegisterProps,
@@ -38,9 +47,10 @@ export default function Reset() {
         label: "Password",
         error: !!errors.password,
         helperText: errors?.password?.message,
-    }
+    };
 
-    const {ref: confirmPassRef, ...confirmPassRegisterProps} = register("confirm_password");
+    const { ref: confirmPassRef, ...confirmPassRegisterProps } =
+        register("confirm_password");
 
     const confirmPassProps = {
         ...confirmPassRegisterProps,
@@ -51,13 +61,15 @@ export default function Reset() {
         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)}
+        data = {
+            password: hash(data.password),
+            confirm_password: hash(data.confirm_password),
+        };
         console.table(data);
-        // setTimeout(() => navigate("/?logged"), 3000)
     }
 
     return (
@@ -65,12 +77,13 @@ export default function Reset() {
             <form onSubmit={handleSubmit(onSubmit)}>
                 <Card className="card">
                     <h3>Reset Password</h3>
-                    <TextField {...passProps}/>
+                    <TextField {...passProps} />
-                    <TextField {...confirmPassProps}/>
+                    <TextField {...confirmPassProps} />
-                    <Button type="submit" id="submit" variant="contained">Reset Password</Button>
+                    <Button type="submit" id="submit" variant="contained">
+                        Reset Password
+                    </Button>
                 </Card>
             </form>
         </main>
-
+    );
-    )
 }