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.

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() {
-    const error: any = useRouteError();
+type ErrorProps = {
+    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>) {
-        setEmail(e.target.value);
-        console.log(email);
+    const {ref: emailRef, ...emailRegisterProps} = register("email", {
+        required: "error txt lol"
+    });
+
+    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>) {
-        setPassword(e.target.value);
-        console.log(hash(password));
+    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();
-        console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
-        navigate("/")
+    function onSubmit(data: Inputs) {
+        console.log("There will be an API call now with the following data");
+        console.table(data);
+        setTimeout(() => navigate("/?logged"), 3000)
     }
 
+
     return (
         <main className="cardContainer">
-            <Card className="card">
-                <h3>Login</h3>
-                <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 <Link to="/forgot">password</Link>?</p>
-            </Card>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Card className="card">
+                    <h3>Login</h3>
+                    <TextField {...emailProps} />
+                    <TextField {...passProps}/>
+                    <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 isLogged = true;
+    const searchParams = useSearchParams()[0];
+    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.")}/>;
 }