From e63b45f38a13884f541629bb2137e98bf54155a4 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Wed, 20 Mar 2024 23:49:09 +0100
Subject: [PATCH] Changes so that it shows relevant info depending on if
 managing project member or a system user

---
 frontend/src/Components/UserInfoModal.tsx | 29 +++++++++++++++++------
 frontend/src/Components/UserListAdmin.tsx |  3 +++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Components/UserInfoModal.tsx b/frontend/src/Components/UserInfoModal.tsx
index a22ef01..2334388 100644
--- a/frontend/src/Components/UserInfoModal.tsx
+++ b/frontend/src/Components/UserInfoModal.tsx
@@ -5,23 +5,38 @@ import UserProjectListAdmin from "./UserProjectListAdmin";
 
 function UserInfoModal(props: {
   isVisible: boolean;
+  manageMember: boolean;
   username: string;
   onClose: () => void;
+  onDelete: (username: string) => void;
 }): JSX.Element {
   if (!props.isVisible) return <></>;
-
+  const ManageUserOrMember = (check: boolean): JSX.Element => {
+    if (check) {
+      return (
+        <Link to="/AdminChangeRole">
+          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+            (Change Role)
+          </p>
+        </Link>
+      );
+    }
+    return (
+      <Link to="/AdminChangeUserName">
+        <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+          (Change Username)
+        </p>
+      </Link>
+    );
+  };
   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">
+      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
         <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>
+        {ManageUserOrMember(props.manageMember)}
         <div>
           <h2 className="font-bold text-[22px] mb-[20px]">
             Member of these projects:
diff --git a/frontend/src/Components/UserListAdmin.tsx b/frontend/src/Components/UserListAdmin.tsx
index 76cae9f..c08b05c 100644
--- a/frontend/src/Components/UserListAdmin.tsx
+++ b/frontend/src/Components/UserListAdmin.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import UserInfoModal from "./UserInfoModal";
+import DeleteUser from "./DeleteUser";
 
 /**
  * A list of users for admin manage users page, that sets an onClick
@@ -29,7 +30,9 @@ export function UserListAdmin(props: { users: string[] }): JSX.Element {
   return (
     <>
       <UserInfoModal
+        manageMember={false}
         onClose={handleClose}
+        onDelete={() => DeleteUser}
         isVisible={modalVisible}
         username={username}
       />