Made Login.tsx use the useForm hook and expanded the error page so that it can take another error if other shit happens. AuthComponent now doesn't have a hardcoded isLogged var, but looks at the query.

package.json

@@ -14,6 +14,7 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@hookform/resolvers": "^2.9.10",
     "@mui/material": "^5.10.9",
     "@types/jest": "^29.1.1",
     "@types/node": "^18.8.2",
@@ -21,12 +22,14 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
+    "@types/yup": "^0.32.0",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.38.0",
     "react-router-dom": "^6.4.2",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",
@@ -36,6 +39,7 @@
     "typescript": "^4.8.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "yup": "^0.32.11"
   }
 }

src/components/ErrorPage.tsx

@@ -2,8 +2,12 @@ import React from "react";
 import { useRouteError } from "react-router-dom";
 import "@scss/error.scss"
 
-export default function ErrorPage() {
+type ErrorProps = {
-    const error: any = useRouteError();
+    err?: Error
+}
+
+export default function ErrorPage({err} : ErrorProps) {
+    const error: any = err || useRouteError(); 
     console.error(error);
 
     return (

src/components/Login.tsx

@@ -2,41 +2,76 @@ import React, { useState, ChangeEvent, MouseEvent, useEffect } from "react";
 import { Card, Button, TextField } from "@mui/material"
 import "@scss/login.scss"
 import { Link, 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"),
+    password: yup.string().required("No password was provided"),
+}).required();
 
 export default function Login() {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = 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;
     }
 
-    function handleEmail(e: ChangeEvent<HTMLInputElement>) {
+    const {ref: emailRef, ...emailRegisterProps} = register("email", {
-        setEmail(e.target.value);
+        required: "error txt lol"
-        console.log(email);
+    });
+
+    const emailProps = {
+        ...emailRegisterProps,
+        inputRef: emailRef,
+        className: "textField",
+        name: "email",
+        id: "email",
+        label: "Email",
+        error: !!errors.email,
+        helperText: errors?.email?.message,
     }
 
-    function handlePassword(e: ChangeEvent<HTMLInputElement>) {
+    const {ref: passRef, ...passRegisterProps} = register("password");
-        setPassword(e.target.value);
+
-        console.log(hash(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>) {
+    function onSubmit(data: Inputs) {
-        e.preventDefault();
+        console.log("There will be an API call now with the following data");
-        console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
+        console.table(data);
-        navigate("/")
+        setTimeout(() => navigate("/?logged"), 3000)
     }
 
+
     return (
         <main className="cardContainer">
+            <form onSubmit={handleSubmit(onSubmit)}>
                 <Card className="card">
                     <h3>Login</h3>
-                <TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} />
+                    <TextField {...emailProps} />
-                <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} />
+                    <TextField {...passProps}/>
-                <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
+                    <Button type="submit" id="submit" variant="contained">Login</Button>
                     <p>Forgot your <Link to="/forgot">password</Link>?</p>
                 </Card>
+            </form>
         </main>
     )
 }

src/components/lib/AuthComponent.tsx

@@ -1,13 +1,14 @@
+import ErrorPage from "@components/ErrorPage";
 import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 type AuthProps = {
     children: JSX.Element | JSX.Element[],
 }
-export default function AuthComponent({children} : AuthProps){
+export default function AuthComponent({ children }: AuthProps) {
     const navigate = useNavigate();
-
+    const searchParams = useSearchParams()[0];
-    const isLogged = true;
+    const isLogged = searchParams.has("logged");
 
     useEffect(() => {
         // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect
@@ -17,4 +18,6 @@ export default function AuthComponent({children} : AuthProps){
 
     if (isLogged)
         return <>{children}</>;
+    // else
+    // return <ErrorPage err={new Error("You are not logged in and you should have been redirected to the login page. Something went wrong.")}/>;
 }