Merge branch 'gruppPP' into BumBranch

frontend/src/Components/DeleteUser.tsx

@@ -0,0 +1,34 @@
+import { User } from "../Types/goTypes";
+import { api, APIResponse } from "../API/API";
+
+/**
+ * Use to remove a user from the system
+ * @param props - The username of user to remove
+ * @returns {boolean} True if removed, false if not
+ * @example
+ * const exampleUsername = "user";
+ * DeleteUser({ usernameToDelete: exampleUsername });
+ */
+
+function DeleteUser(props: { usernameToDelete: string }): boolean {
+  //console.log(props.usernameToDelete); FOR DEBUG
+  let removed = false;
+  api
+    .removeUser(
+      props.usernameToDelete,
+      localStorage.getItem("accessToken") ?? "",
+    )
+    .then((response: APIResponse<User>) => {
+      if (response.success) {
+        removed = true;
+      } else {
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      console.error("An error occurred during creation:", error);
+    });
+  return removed;
+}
+
+export default DeleteUser;

frontend/src/Components/UserInfoModal.tsx

@@ -0,0 +1,54 @@
+import { Link } from "react-router-dom";
+import Button from "./Button";
+import DeleteUser from "./DeleteUser";
+import UserProjectListAdmin from "./UserProjectListAdmin";
+
+function UserInfoModal(props: {
+  isVisible: boolean;
+  username: string;
+  onClose: () => void;
+}): JSX.Element {
+  if (!props.isVisible) return <></>;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
+      flex justify-center items-center"
+    >
+      <div className="border-4 border-black bg-white p-2 rounded-lg text-center">
+        <p className="font-bold text-[30px]">{props.username}</p>
+        <Link to="/AdminChangeUserName">
+          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+            (Change Username)
+          </p>
+        </Link>
+        <div>
+          <h2 className="font-bold text-[22px] mb-[20px]">
+            Member of these projects:
+          </h2>
+          <div className="pr-6 pl-6">
+            <UserProjectListAdmin />
+          </div>
+        </div>
+        <div className="items-center space-x-6 pr-6 pl-6">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              DeleteUser({ usernameToDelete: props.username });
+            }}
+            type="button"
+          />
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              props.onClose();
+            }}
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UserInfoModal;

frontend/src/Components/UserListAdmin.tsx

@@ -1,5 +1,6 @@
-import { Link } from "react-router-dom";
+import { useState } from "react";
 import { PublicUser } from "../Types/goTypes";
+import UserInfoModal from "./UserInfoModal";
 
 /**
  * The props for the UserProps component
@@ -9,27 +10,52 @@ interface UserProps {
 }
 
 /**
- * A list of users for admin manage users page, that links admin to the right user page
- * thanks to the state property
- * @param props - The users to display
+ * A list of users for admin manage users page, that sets an onClick
+ * function for eact user <li> element, which displays a modul with
+ * user info.
+ * @param props - An array of users users to display
  * @returns {JSX.Element} The user list
  * @example
- * const users = [{ id: 1, userName: "Random name" }];
+ * const users = [{ id: 1, userName: "ExampleName" }];
  * return <UserList users={users} />;
  */
 
 export function UserListAdmin(props: UserProps): JSX.Element {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [username, setUsername] = useState("");
+
+  const handleClick = (username: string): void => {
+    setUsername(username);
+    setModalVisible(true);
+  };
+
+  const handleClose = (): void => {
+    setUsername("");
+    setModalVisible(false);
+  };
+
   return (
-    <div>
-      <ul className="font-bold underline text-[30px] cursor-pointer padding">
-        {props.users.map((user) => (
-          <Link to="/adminUserInfo" key={user.userId} state={user.username}>
-            <li className="pt-5" key={user.userId}>
+    <>
+      <UserInfoModal
+        onClose={handleClose}
+        isVisible={modalVisible}
+        username={username}
+      />
+      <div>
+        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+          {props.users.map((user) => (
+            <li
+              className="pt-5"
+              key={user.userId}
+              onClick={() => {
+                handleClick(user.username);
+              }}
+            >
               {user.username}
             </li>
-          </Link>
-        ))}
-      </ul>
-    </div>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 }

frontend/src/Components/UserProjectListAdmin.tsx

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { api } from "../API/API";
 import { Project } from "../Types/goTypes";
 
-const UserProjectListAdmin: React.FC = () => {
+function UserProjectListAdmin(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
     const fetchProjects = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        const username = "NoUser"; // getUsernameFromContext(); // Assuming you have a function to get the username from your context
+        // const username = props.username;
 
-        const response = await api.getUserProjects(username, token);
+        const response = await api.getUserProjects(token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -26,18 +26,16 @@ const UserProjectListAdmin: React.FC = () => {
   }, []);
 
   return (
-    <div>
-      <h2>User Projects</h2>
+    <div className="border-2 border-black bg-white p-2 rounded-lg text-center">
       <ul>
         {projects.map((project) => (
           <li key={project.id}>
             <span>{project.name}</span>
-            {/* Add any additional project details you want to display */}
           </li>
         ))}
       </ul>
     </div>
   );
-};
+}
 
 export default UserProjectListAdmin;

frontend/src/Pages/AdminPages/AdminChangeUsername.tsx

@@ -1,3 +1,4 @@
+import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 
@@ -13,13 +14,7 @@ function AdminChangeUsername(): JSX.Element {
         }}
         type="button"
       />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );