signup & login functioning, authChecker implemented around main game

src/components/AuthChecker.jsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AuthChecker = (props) => {
+  const currentUser = localStorage.getItem("currentUser");
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!currentUser) navigate("/auth");
+  }, [currentUser, navigate]);
+  return <div>{props.children}</div>;
+};
+
+export default AuthChecker;

src/components/Login.jsx

@@ -1,19 +1,52 @@
-import React from "react";
+import { useState } from "react";
 
 const Login = () => {
-  const handleLogin = (event) => {
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+
+  const handleInputChange = (event) => {
+    setFormData((currentFormData) => {
+      return {
+        ...currentFormData,
+        [event.target.name]: event.target.value,
+      };
+    });
+  };
+
+  const handleLogin = async (event) => {
     event.preventDefault();
     console.log("Login");
+
+    const response = await fetch("http://localhost:3600/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
+
+    // console.log(response);
+
+    if (response.ok) {
+      console.log("Login successful!");
+      const data = await response.json();
+
+      if (data.username) {
+        localStorage.setItem("currentUser", data);
+      }
+    }
   };
 
   return (
     <div>
       <h1>Login</h1>
       <form onSubmit={handleLogin}>
         <label htmlFor="username">Username: </label>
-        <input type="text" name="username" />
+        <input type="text" name="username" onChange={handleInputChange} />
         <label htmlFor="password">Password: </label>
-        <input type="password" name="password" />
+        <input type="password" name="password" onChange={handleInputChange} />
         <button type="submit">Login</button>
       </form>
     </div>

src/components/Signup.jsx

@@ -1,23 +1,75 @@
-import React from "react";
+import React, { useState } from "react";
 
 const Signup = () => {
-  const handleSignup = (event) => {
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const [signupStatus, setSignupStatus] = useState(null);
+
+  const handleSignup = async (event) => {
     event.preventDefault();
-    console.log("Signup");
+
+    console.log(formData);
+
+    if (formData.username === "") {
+      setSignupStatus("Please enter a username!");
+      return;
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      setSignupStatus("Passwords do not match!");
+      return;
+    }
+
+    const response = await fetch("http://localhost:3600/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: formData.username,
+        password: formData.password,
+      }),
+    });
+
+    console.log(response);
+
+    if (response.ok) {
+      setSignupStatus("You can now login!");
+    } else {
+      setSignupStatus("Something went wrong...");
+    }
+  };
+
+  const handleInputChange = (event) => {
+    setFormData((currentFormData) => {
+      return {
+        ...currentFormData,
+        [event.target.name]: event.target.value,
+      };
+    });
   };
 
   return (
     <div>
       <h1>Signup</h1>
       <form onSubmit={handleSignup}>
         <label htmlFor="username">Username: </label>
-        <input type="text" name="username" />
+        <input type="text" name="username" onChange={handleInputChange} />
         <label htmlFor="password">Password: </label>
-        <input type="password" name="password" />
-        <label htmlFor="password">Confirm Password: </label>
-        <input type="password" name="password" />
+        <input type="password" name="password" onChange={handleInputChange} />
+        <label htmlFor="confirmPassword">Confirm Password: </label>
+        <input
+          type="password"
+          name="confirmPassword"
+          onChange={handleInputChange}
+        />
         <button type="submit">Signup</button>
       </form>
+      <p>{signupStatus}</p>
     </div>
   );
 };

src/router.js

@@ -6,12 +6,20 @@ import {
 import App from "./App";
 import Auth from "./pages/Auth";
 import Client from "./pages/Client";
+import AuthChecker from "./components/AuthChecker";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />}>
       <Route path="/auth" element={<Auth />} />
-      <Route path="/game" element={<Client />} />
+      <Route
+        path="/game"
+        element={
+          <AuthChecker>
+            <Client />
+          </AuthChecker>
+        }
+      />
     </Route>
   )
 );