added API endpoints and user-auth

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+/client/node_modules
 /.pnp
 .pnp.js
 

client/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-*
+
+# Byebug
+.byebug_history
+
+# Canvas-specific .results.json
+.results.json

client/src/App.js

@@ -1,12 +1,13 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Hero from './components/Hero';
-import Header from './components/Header';
-import Home from './components/Home';
-import SignUp from './components/SignUp';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Hero from "./components/Hero";
+import Header from "./components/Header";
+import Home from "./components/Home";
+import SignUp from "./components/SignUp";
+import LogIn from "./components/LogIn";
 
 function App() {
   return (
-    <SignUp />
+    <LogIn />
     // <BrowserRouter>
     //   <Routes>
     //     <Route exact path="/" element={<Header />}></Route>

client/src/components/LogIn.js

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+
+function LogIn() {
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+  const [success, setSuccess] = useState(false);
+
+  function handleChange(e) {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    console.log(formData);
+    fetch("http://localhost:9292/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => response.json())
+      .then((data) => setSuccess(data.success))
+      .catch((error) => window.alert(error));
+  }
+
+  return (
+    <div>
+      <form>
+        <input
+          className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+          type="text"
+          name="username"
+          onChange={(e) => handleChange(e)}
+          value={formData.username}
+        />
+        <input
+          className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+          type="password"
+          name="password"
+          onChange={handleChange}
+          value={formData.password}
+        />
+        <input type="submit" onClick={handleSubmit} />
+      </form>
+      <div>
+        {success ? (
+          <h3>You successfully logged in!</h3>
+        ) : (
+          <h3>You are not logged in yet.</h3>
+        )}
+      </div>
+    </div>
+    // <div className="flex w-full h-screen">
+    //   {/* this is the ball */}
+    //   <div className="hidden lg:flex h-full w-1/2 items-center justify-center bg-gray-200">
+    //     <div className="w-60 h-60 bg-gradient-to-tr from-violet-500 to-blue-700 rounded-full animate-bounce"></div>
+    //   </div>
+    //   <div className=" w-11/12 max-w-[700px] px-10 py-20 rounded-3xl bg-white border-2 border-gray-100">
+    //     <h1 className="text-5xl font-semibold">Welcome to Prattle!</h1>
+    //     <p className="font-medium text-lg text-gray-500 mt-4">
+    //       Your friends and foes await you!
+    //     </p>
+    //     <div className="mt-8">
+    //       <div className="flex flex-col">
+    //         <label className="text-lg font-medium">Email</label>
+    //         <input
+    //           className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+    //           placeholder="Enter your email..."
+    //         />
+    //       </div>
+    //       <div className="flex flex-col mt-4">
+    //         <label className="text-lg font-medium">Password</label>
+    //         <input
+    //           className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+    //           placeholder="Enter your password..."
+    //           type={"password"}
+    //         />
+    //       </div>
+    //       <div className="flex flex-col mt-4">
+    //         <label className="text-lg font-medium">First and Last Name</label>
+    //         <input
+    //           className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+    //           placeholder="Enter your full name..."
+    //         />
+    //       </div>
+    //       <div className="flex flex-col mt-4">
+    //         <label className="text-lg font-medium">Screen Name</label>
+    //         <input
+    //           className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+    //           placeholder="Enter your screen name..."
+    //         />
+    //       </div>
+    //       <div className="mt-8 flex flex-col gap-y-4">
+    //         <button className="active:scale-[.98] active:duration-75 transition-all hover:scale-[1.01]  ease-in-out transform py-4 bg-violet-500 rounded-xl text-white font-bold text-lg">
+    //           Sign Up
+    //         </button>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
+  );
+}
+
+export default LogIn;