account management stuff

SkylineSpartabots · Aug 8, 2023 · d7e85c0 · d7e85c0
1 parent f03e421
commit d7e85c0
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 25 deletions.
diff --git a/client/src/components/AccountListing.js b/client/src/components/AccountListing.js
@@ -1,17 +1,44 @@
 import { useState } from "react";
+import { GoTriangleDown, GoTriangleUp } from "react-icons/go";
 const AccountListing = ({ user }) => {
   const [open, setOpen] = useState(false);
 
+  async function deleteUser() {
+    const res = await fetch("/api/user/deleteUser", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username: user.username }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      console.log("error");
+    }
+  }
+
   return (
     <div className="flex flex-col">
       <div className="bg-white flex flex-row justify-between p-4 w-full  h-16">
         <h1 className="font-productsans text-xl my-auto">
           {user.lastName + ", " + user.firstName}
         </h1>
-        <div
-          className="h-full aspect-square bg-gray-300 cursor-pointer"
-          onClick={() => setOpen((prev) => !prev)}
-        ></div>
+        <div className="flex  justify-between gap-4">
+          <button
+            className="h-full w-12 bg-red-500 cursor-pointer text-white font-productsans text-sm hover:scale-110 rounded"
+            onClick={deleteUser}
+          >
+            Delete
+          </button>
+          <div
+            className="h-full aspect-square bg-gray-300 cursor-pointer flex items-center justify-center"
+            onClick={() => setOpen((prev) => !prev)}
+          >
+            {open ? (
+              <GoTriangleUp className="w-8 h-8" />
+            ) : (
+              <GoTriangleDown className="w-8 h-8" />
+            )}
+          </div>
+        </div>
       </div>
       {open && (
         <div className="bg-gray-200 w-full h-fit p-4">
@@ -21,16 +48,18 @@ const AccountListing = ({ user }) => {
               {user.grade}
             </h1>
           )}
-          <h1 className="font-productsans">
-            <span className="font-semibold">Title: </span>
-            {user.isBoard && user.title
-              ? user.title
-              : user.isBoard
-              ? "Board title not specified"
-              : user.isAdvisor
-              ? "Advisor"
-              : user.department + " Member"}
-          </h1>
+          {(user.isBoard || user.isAdvisor) && (
+            <h1 className="font-productsans">
+              <span className="font-semibold">Title: </span>
+              {user.isBoard ? user.title : "Advisor"}
+            </h1>
+          )}
+          {!user.isAdvisor && (
+            <h1 className="font-productsans">
+              <span className="font-semibold">Department: </span>
+              {user.department}
+            </h1>
+          )}
         </div>
       )}
     </div>

diff --git a/client/src/hooks/useAuth.js b/client/src/hooks/useAuth.js
@@ -9,14 +9,14 @@ export function useAuth(type) {
 
   const navigate = useNavigate();
 
-  async function auth(username, password) {
+  async function auth(user) {
     setIsLoading(true);
     setError(null);
 
     const response = await fetch("/api/user/authenticate", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ username, password, type }),
+      body: JSON.stringify({ ...user, type }),
     });
     const data = await response.json();
     if (!response.ok) {

diff --git a/client/src/pages/AddAccount.js b/client/src/pages/AddAccount.js
@@ -1,14 +1,31 @@
-import HeaderBlock from "../components/HeaderBlock";
+import Button from "../components/Button";
+import useAuth from "../hooks/useAuth";
 import { useState } from "react";
 const AddAccount = () => {
   const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const [first, setFirst] = useState("");
   const [last, setLast] = useState("");
   const [grade, setGrade] = useState();
   const [department, setDepartment] = useState("");
+  const [isBoard, setIsBoard] = useState(false);
+  const [isAdvisor, setIsAdvisor] = useState(false);
+  const [boardTitle, setBoardTitle] = useState("");
+  const { auth, error, isLoading } = useAuth("signup");
 
   async function handleSubmit(e) {
     e.preventDefault();
+    await auth({
+      username,
+      password,
+      firstName: first,
+      lastName: last,
+      grade,
+      department,
+      isBoard,
+      isAdvisor,
+      title: boardTitle,
+    });
   }
 
   return (
@@ -29,6 +46,15 @@ const AddAccount = () => {
             value={username}
           />
         </div>
+        <div className=" w-full">
+          <label className="text-lg font-productsans ">Password</label>
+          <input
+            className="px-2 w-full bg-slate-300 rounded h-8 text-black font-productsans"
+            type="password"
+            onChange={(e) => setPassword(e.target.value)}
+            value={password}
+          />
+        </div>
         <div className="w-full flex flex-row gap-4 ">
           <div className="w-full flex flex-col">
             <label className="text-lg font-productsans ">First Name</label>
@@ -69,6 +95,51 @@ const AddAccount = () => {
             />
           </div>
         </div>
+        <div className=" w-full flex flex-row gap-4 ">
+          <div className="flex flex-row gap-2 w-full">
+            <label className="text-lg font-productsans ">Board</label>
+            <input
+              className="bg-slate-300 h-8 text-black font-productsans"
+              type="checkbox"
+              onChange={(e) => {
+                let prev = isBoard;
+                setIsBoard((prev) => !prev);
+                if (!prev) {
+                  setIsAdvisor(false);
+                }
+              }}
+              checked={isBoard}
+            />
+          </div>
+          <div className="flex flex-row gap-2 w-full">
+            <label className="text-lg font-productsans ">Advisor</label>
+            <input
+              className="px-2  bg-slate-300 rounded h-8 text-black font-productsans"
+              type="checkbox"
+              onChange={(e) => {
+                let prev = isAdvisor;
+                setIsAdvisor((prev) => !prev);
+                if (!prev) {
+                  setIsBoard(false);
+                  setBoardTitle("");
+                }
+              }}
+              checked={isAdvisor}
+            />
+          </div>
+        </div>
+        {isBoard && (
+          <div className="flex flex-col w-full">
+            <label className="text-lg font-productsans ">Board Position</label>
+            <input
+              className="px-2 bg-slate-300 rounded h-8 text-black font-productsans"
+              type="text"
+              onChange={(e) => setBoardTitle(e.target.value)}
+              value={boardTitle}
+            />
+          </div>
+        )}
+        <Button text="Submit" color="bg-blue-400" disabled={isLoading} />
       </form>
     </div>
   );

diff --git a/client/src/pages/Login.js b/client/src/pages/Login.js
@@ -9,7 +9,7 @@ const Login = () => {
 
   async function handleSubmit(e) {
     e.preventDefault();
-    await auth(username, password);
+    await auth({ username, password });
   }
   return (
     <div className="bg-gray-100 min-h-screen flex flex-col justify-center">

diff --git a/server/controllers/userController.js b/server/controllers/userController.js
@@ -11,16 +11,17 @@ const authenticateUser = async (req, res) => {
     let u;
     if (user.type == "login") {
       u = await User.login(user.username, user.password);
+      const token = createToken(u._id);
+      res.status(200).json({
+        username: user.username,
+        token,
+        isBoard: u.isBoard,
+        isAdvisor: u.isAdvisor,
+      });
     } else {
       u = await User.signup(user);
+      res.status(200);
     }
-    const token = createToken(u._id);
-    res.status(200).json({
-      username: user.username,
-      token,
-      isBoard: u.isBoard,
-      isAdvisor: u.isAdvisor,
-    });
   } catch (error) {
     res.status(400).json({ error: error.message });
   }