From 77a7672f242469c985a43e241d1bc4edfea15512 Mon Sep 17 00:00:00 2001
From: Jon Brennan <jonbrennan@Jons-MacBook-Pro.local>
Date: Tue, 14 Nov 2023 19:46:26 -0500
Subject: [PATCH] signup & login functioning, authChecker implemented around
 main game

---
 src/components/AuthChecker.jsx | 15 ++++++++
 src/components/Login.jsx       | 41 ++++++++++++++++++---
 src/components/Signup.jsx      | 66 ++++++++++++++++++++++++++++++----
 src/router.js                  | 10 +++++-
 4 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 src/components/AuthChecker.jsx

diff --git a/src/components/AuthChecker.jsx b/src/components/AuthChecker.jsx
new file mode 100644
index 0000000..4a9b1a1
--- /dev/null
+++ b/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;
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
index d336cd2..36cd3d4 100644
--- a/src/components/Login.jsx
+++ b/src/components/Login.jsx
@@ -1,9 +1,42 @@
-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 (
@@ -11,9 +44,9 @@ const Login = () => {
       <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>
diff --git a/src/components/Signup.jsx b/src/components/Signup.jsx
index 665dbf9..9ca30d4 100644
--- a/src/components/Signup.jsx
+++ b/src/components/Signup.jsx
@@ -1,9 +1,56 @@
-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 (
@@ -11,13 +58,18 @@ const Signup = () => {
       <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>
   );
 };
diff --git a/src/router.js b/src/router.js
index 8b4eb2a..2ea8b1d 100644
--- a/src/router.js
+++ b/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>
   )
 );