Simplified + tiny design changes

backend/internal/database/sample_data/0010_sample_data.sql

@@ -1,58 +1,220 @@
 INSERT OR IGNORE INTO users(username, password)
-VALUES ("admin", "123");
+VALUES  ("admin", "123"),
+        ("user", "123"),
+        ("user2", "123"),
+        ("John", "123"),
+        ("Emma", "123"),
+        ("Michael", "123"),
+        ("Liam", "123"),
+        ("Oliver", "123"),
+        ("Amelia", "123"),
+        ("Benjamin", "123"),
+        ("Mia", "123"),
+        ("Elijah", "123"),
+        ("Charlotte", "123"),
+        ("Henry", "123"),
+        ("Harper", "123"),
+        ("Lucas", "123"),
+        ("Emily", "123"),
+        ("Alexander", "123"),
+        ("Daniel", "123"),
+        ("Ella", "123"),
+        ("Matthew", "123"),
+        ("Madison", "123"),
+        ("Samuel", "123"),
+        ("Avery", "123"),
+        ("Sofia", "123"),
+        ("David", "123"),
+        ("Victoria", "123"),
+        ("Jackson", "123"),
+        ("Abigail", "123"),
+        ("Gabriel", "123"),
+        ("Luna", "123"),
+        ("Wyatt", "123"),
+        ("Chloe", "123"),
+        ("Nora", "123"),
+        ("Joshua", "123"),
+        ("Hazel", "123"),
+        ("Riley", "123"),
+        ("Scarlett", "123"),
+        ("Aria", "123"),
+        ("Carter", "123"),
+        ("Grace", "123"),
+        ("Jayden", "123"),
+        ("Hannah", "123"),
+        ("Zoe", "123"),
+        ("Luke", "123"),
+        ("Sophia", "123"),
+        ("Jack", "123"),
+        ("Isabella", "123"),
+        ("William", "123"),
+        ("Mason", "123"),
+        ("Evelyn", "123"),
+        ("James", "123"),
+        ("Cynthia", "123"),
+        ("Abraham", "123"),
+        ("Ava", "123"),
+        ("Aiden", "123"),
+        ("Natalie", "123"),
+        ("Lily", "123"),
+        ("Olivia", "123"),
+        ("Alexander", "123"),
+        ("Ethan", "123"),
+        ("Mila", "123"),
+        ("Evelyn", "123"),
+        ("Logan", "123"),
+        ("Riley", "123"),
+        ("Grace", "123"),
+        ("Arnold", "123"),
+        ("Connor", "123"),
+        ("Samantha", "123"),
+        ("Emma", "123"),
+        ("Sarah", "123"),
+        ("Nathan", "123"),
+        ("Layla", "123"),
+        ("Ryan", "123"),
+        ("Zoey", "123"),
+        ("Megan", "123"),
+        ("Christian", "123"),
+        ("Eva", "123"),
+        ("Isaac", "123"),
+        ("Michaela", "123"),
+        ("Caroline", "123"),
+        ("Elijah", "123"),
+        ("Elena", "123"),
+        ("Julian", "123"),
+        ("Sophie", "123"),
+        ("Gabriella", "123"),
+        ("Cole", "123"),
+        ("Hannah", "123"),
+        ("Lucy", "123"),
+        ("Katherine", "123"),
+        ("Benjamin", "123"),
+        ("Ella", "123"),
+        ("Evan", "123");
 
-INSERT OR IGNORE INTO users(username, password)
+INSERT OR IGNORE INTO projects(name, description, owner_user_id)
-VALUES ("user", "123");
+VALUES  ("projecttest1", "Description for projecttest1", 1),
+        ("projecttest2", "Description for projecttest2", 1),
+        ("projecttest3", "Description for projecttest3", 1),
+        ("projecttest4", "Description for projecttest4", 1),
+        ("projecttest5", "Description for projecttest5", 1),
+        ("projecttest6", "Description for projecttest6", 1),
+        ("projecttest7", "Description for projecttest7", 1),
+        ("projecttest8", "Description for projecttest8", 1),
+        ("projecttest9", "Description for projecttest9", 1),
+        ("projecttest10", "Description for projecttest10", 1),
+        ("projecttest11", "Description for projecttest11", 1),
+        ("projecttest12", "Description for projecttest12", 1),
+        ("projecttest13", "Description for projecttest13", 1),
+        ("projecttest14", "Description for projecttest14", 1),
+        ("projecttest15", "Description for projecttest15", 1);
 
-INSERT OR IGNORE INTO users(username, password)
+INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES ("user2", "123");
+VALUES  (1,1,"project_manager"),
+        (1,2,"project_manager"),
+        (1,3,"project_manager"),
+        (1,4,"project_manager"),
+        (1,5,"project_manager"),
+        (1,6,"project_manager"),
+        (1,7,"project_manager"),
+        (1,8,"project_manager"),
+        (1,9,"project_manager"),
+        (1,10,"project_manager"),
+        (1,11,"project_manager"),
+        (1,12,"project_manager"),
+        (1,13,"project_manager"),
+        (1,14,"project_manager"),
+        (1,15,"project_manager"),
+        (2,1,"project_manager"),
+        (2,2,"member"),
+        (2,3,"member"),
+        (2,4,"member"),
+        (2,5,"member"),
+        (2,6,"member"),
+        (2,7,"member"),
+        (2,8,"member"),
+        (2,9,"member"),
+        (2,10,"member"),
+        (2,11,"member"),
+        (2,12,"member"),
+        (2,13,"member"),
+        (2,14,"member"),
+        (2,15,"member"),
+        (3,1,"member"),
+        (3,2,"member"),
+        (3,3,"member"),
+        (3,4,"member"),
+        (3,5,"member"),
+        (3,6,"member"),
+        (3,7,"member"),
+        (3,8,"member"),
+        (3,9,"member"),
+        (3,10,"member"),
+        (3,11,"member"),
+        (3,12,"member"),
+        (3,13,"member"),
+        (3,14,"member"),
+        (3,15,"member"),
+        (4,1,"member"),
+        (4,2,"member"),
+        (4,3,"member"),
+        (4,4,"member"),
+        (4,5,"member"),
+        (4,6,"member"),
+        (4,7,"member"),
+        (4,8,"member"),
+        (4,9,"member"),
+        (4,10,"member"),
+        (4,11,"member"),
+        (4,12,"member"),
+        (4,13,"member"),
+        (4,14,"member"),
+        (4,15,"member"),
+        (5,1,"member"),
+        (5,2,"member"),
+        (5,3,"member"),
+        (5,4,"member"),
+        (5,5,"member"),
+        (5,6,"member"),
+        (5,7,"member"),
+        (5,8,"member"),
+        (5,9,"member"),
+        (5,10,"member"),
+        (5,11,"member"),
+        (5,12,"member"),
+        (5,13,"member"),
+        (5,14,"member"),
+        (5,15,"member");
+
+INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
+VALUES  (2, 1, 12, 100, 50, 30, 150, 80, 20, NULL),
+        (3, 1, 12, 200, 80, 20, 200, 100, 30, NULL),
+        (3, 1, 14, 150, 70, 40, 180, 90, 25, NULL),
+        (3, 2, 12, 120, 60, 35, 160, 85, 15, NULL),
+        (3, 3, 12, 180, 90, 25, 190, 110, 40, NULL),
+        (2, 1, 13, 130, 70, 40, 170, 95, 35, NULL),
+        (3, 1, 15, 140, 60, 50, 200, 120, 30, NULL),
+        (2, 2, 11, 110, 50, 45, 140, 70, 25, NULL),
+        (3, 3, 14, 170, 80, 30, 180, 100, 35, NULL),
+        (3, 3, 15, 200, 100, 20, 220, 130, 45, NULL),
+        (2, 4, 12, 120, 60, 40, 160, 80, 30, NULL),
+        (3, 5, 14, 150, 70, 30, 180, 90, 25, NULL),
+        (3, 5, 15, 180, 90, 20, 190, 110, 35, NULL), 
+        (2, 6, 11, 100, 50, 35, 130, 60, 20, NULL),
+        (3, 7, 14, 170, 80, 25, 180, 100, 30, NULL),
+        (2, 8, 12, 130, 70, 30, 170, 90, 25, NULL),
+        (2, 8, 13, 150, 80, 20, 180, 110, 35, NULL),
+        (3, 9, 12, 140, 60, 40, 180, 100, 30, NULL),
+        (3, 10, 11, 120, 50, 45, 150, 70, 25, NULL),
+        (2, 11, 13, 110, 60, 35, 140, 80, 30, NULL),
+        (3, 12, 12, 160, 70, 30, 180, 100, 35, NULL),
+        (3, 12, 13, 180, 90, 25, 190, 110, 40, NULL),
+        (3, 12, 14, 200, 100, 20, 220, 130, 45, NULL),
+        (2, 13, 11, 100, 50, 45, 130, 60, 20, NULL),
+        (2, 13, 12, 120, 60, 40, 160, 80, 30, NULL),
+        (3, 14, 13, 140, 70, 30, 160, 90, 35, NULL),
+        (3, 15, 12, 150, 80, 25, 180, 100, 30, NULL),
+        (3, 15, 13, 170, 90, 20, 190, 110, 35, NULL);
 
 INSERT OR IGNORE INTO site_admin VALUES (1);
-
-INSERT OR IGNORE INTO projects(name,description,owner_user_id)
-VALUES ("projecttest","test project", 1);
-
-INSERT OR IGNORE INTO projects(name,description,owner_user_id)
-VALUES ("projecttest2","test project2", 1);
-
-INSERT OR IGNORE INTO projects(name,description,owner_user_id)
-VALUES ("projecttest3","test project3", 1);
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (1,1,"project_manager");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (1,2,"project_manager");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (1,3,"project_manager");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (2,1,"member");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (3,1,"member");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (3,2,"member");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (3,3,"member");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (2,1,"project_manager");
-
-INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
-VALUES (2, 1, 12, 20, 10, 5, 30, 15, 10, NULL);
-
-INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
-VALUES (3, 1, 12, 20, 10, 5, 30, 15, 10, NULL);
-
-INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
-VALUES (3, 1, 14, 20, 10, 5, 30, 15, 10, NULL);
-
-INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
-VALUES (3, 2, 12, 20, 10, 5, 30, 15, 10, NULL);
-
-INSERT OR IGNORE INTO weekly_reports (user_id, project_id, week, development_time, meeting_time, admin_time, own_work_time, study_time, testing_time, signed_by)
-VALUES (3, 3, 12, 20, 10, 5, 30, 15, 10, NULL);

frontend/src/Components/AddProject.tsx

@@ -67,6 +67,7 @@ function AddProject(): JSX.Element {
                 e.preventDefault();
                 setName(e.target.value);
               }}
+              placeholder={"Name"}
             />
             <InputField
               label="Description"
@@ -76,6 +77,7 @@ function AddProject(): JSX.Element {
                 e.preventDefault();
                 setDescription(e.target.value);
               }}
+              placeholder={"Description"}
             />
           </div>
           <div className="flex items-center justify-between">

frontend/src/Components/AddUserToProject.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import Button from "./Button";
 import AddMember, { AddMemberInfo } from "./AddMember";
-import BackButton from "./BackButton";
 import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import GetAllUsers from "./GetAllUsers";
+import InputField from "./InputField";
 
 /**
  * Provides UI for adding a member to a project.
@@ -13,6 +13,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
   const [names, setNames] = useState<string[]>([]);
   const [users, setUsers] = useState<string[]>([]);
   const [usersProj, setUsersProj] = useState<ProjectMember[]>([]);
+  const [search, setSearch] = useState("");
 
   // Gets all users and project members for filtering
   GetAllUsers({ setUsersProp: setUsers });
@@ -36,8 +37,10 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
 
   // Attempts to add all of the selected users to the project
   const handleAddClick = async (): Promise<void> => {
-    if (names.length === 0)
+    if (names.length === 0) {
       alert("You have to choose at least one user to add");
+      return;
+    }
     for (const name of names) {
       const newMember: AddMemberInfo = {
         userName: name,
@@ -60,32 +63,47 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
   };
 
   return (
-    <div className="border-4 border-black bg-white flex flex-col items-center pt-10 rounded-3xl content-center pl-20 pr-20  h-[63vh] w-[50] overflow-auto">
+    <div className="border-4 border-black bg-white flex flex-col items-center py-10 px-20 rounded-3xl content-center overflow-auto">
       <h1 className="text-center font-bold text-[36px] pb-10">
         {props.projectName}
       </h1>
       <p className="p-1 text-center font-bold text-[26px]">
         Choose users to add:
       </p>
-      <div className="border-2 border-black pl-2 pr-2 pb-2 rounded-xl text-center overflow-auto h-[26vh] w-[26vh]">
+
-        <ul className="text-center font-medium space-y-2">
+      <div>
+        <InputField
+          placeholder={"Search users"}
+          type={"Text"}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
+        <ul className="font-medium space-y-2 border-2 border-black mt-2 px-2 pb-2 rounded-2xl text-center overflow-auto h-[26vh] w-[34vh]">
           <div></div>
-          {users.map((user) => (
+          {users
-            <li
+            .filter((user) => {
-              className={
+              return search.toLowerCase() === ""
-                names.includes(user)
+                ? user
-                  ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
+                : user.toLowerCase().includes(search.toLowerCase());
-                  : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 hover:text-slate-100 hover:cursor-pointer"
+            })
-              }
+            .map((user) => (
-              key={user}
+              <li
-              value={user}
+                className={
-              onClick={() => {
+                  names.includes(user)
-                handleUserClick(user);
+                    ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 transition-all hover:bg-orange-600  text-white hover:cursor-pointer ring-2 ring-black"
-              }}
+                    : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 transition-all hover:text-white hover:cursor-pointer"
-            >
+                }
-              <span>{user}</span>
+                key={user}
-            </li>
+                value={user}
-          ))}
+                onClick={() => {
+                  handleUserClick(user);
+                }}
+              >
+                <span>{user}</span>
+              </li>
+            ))}
         </ul>
       </div>
       <p className="pt-10 pb-5 underline text-center font-bold text-[18px]">
@@ -99,9 +117,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
           }}
           type="button"
         />
-        <BackButton />
       </div>
-      <p className="text-center text-gray-500 text-xs"></p>
     </div>
   );
 }

frontend/src/Components/ChangeUsername.tsx

@@ -9,6 +9,10 @@ function ChangeUsername(props: { nameChange: StrNameChange }): void {
     alert("You have to give a new name\n\nName not changed");
     return;
   }
+  if (props.nameChange.prevName === localStorage.getItem("username")) {
+    alert("You cannot change admin name");
+    return;
+  }
   api
     .changeUserName(props.nameChange, localStorage.getItem("accessToken") ?? "")
     .then((response: APIResponse<void>) => {

frontend/src/Components/InputField.tsx

@@ -4,19 +4,21 @@
  * @returns {JSX.Element} The input field
  * @example
  * <InputField
- *   type="text"
  *   label="Example"
+ *   placeholder="New placeholder"
+ *   type="text"
+ *   value={example}
  *   onChange={(e) => {
  *     setExample(e.target.value);
  *   }}
- *   value={example}
  * />
  */
 function InputField(props: {
-  label: string;
+  label?: string;
-  type: string;
+  placeholder?: string;
-  value: string;
+  type?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }): JSX.Element {
   return (
     <div className="">
@@ -30,7 +32,7 @@ function InputField(props: {
         className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         id={props.label}
         type={props.type}
-        placeholder={props.label}
+        placeholder={props.placeholder}
         value={props.value}
         onChange={props.onChange}
       />

frontend/src/Components/LoginCheck.tsx

@@ -11,6 +11,10 @@ function LoginCheck(props: {
   password: string;
   setAuthority: Dispatch<SetStateAction<number>>;
 }): void {
+  if (props.username === "" || props.password === "") {
+    alert("Please enter username and password to login");
+    return;
+  }
   const user: NewUser = {
     username: props.username,
     password: props.password,
@@ -43,6 +47,7 @@ function LoginCheck(props: {
         }
       } else {
         console.error("Token could not be fetched/No such user");
+        alert("Could not login, wrong username or password");
       }
     })
     .catch((error) => {

frontend/src/Components/LoginField.tsx

@@ -33,6 +33,7 @@ function Login(props: {
             props.setUsername(e.target.value);
           }}
           value={props.username}
+          placeholder={"Username"}
         />
         <InputField
           type="password"
@@ -41,6 +42,7 @@ function Login(props: {
             props.setPassword(e.target.value);
           }}
           value={props.password}
+          placeholder={"Password"}
         />
       </div>
       <Button

frontend/src/Components/MemberInfoModal.tsx

@@ -23,7 +23,7 @@ function MemberInfoModal(props: {
       className="fixed inset-10 bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
+      <div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
         <div className="mx-10">
           <p className="font-bold text-[30px]">{props.username}</p>
           <p

frontend/src/Components/ProjectInfoModal.tsx

@@ -4,19 +4,47 @@ import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import { Link } from "react-router-dom";
 import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
 import DeleteProject from "./DeleteProject";
+import InputField from "./InputField";
 
 function ProjectInfoModal(props: {
   projectname: string;
   onClose: () => void;
   onClick: (username: string) => void;
 }): JSX.Element {
+  const [showInput, setShowInput] = useState(false);
   const [users, setUsers] = useState<ProjectMember[]>([]);
   const [times, setTimes] = useState<projectTimes>();
+  const [search, setSearch] = useState("");
+  const [newProjName, setNewProjName] = useState("");
   const totalTime = useRef(0);
   GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
 
   GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
 
+  const handleChangeNameView = (): void => {
+    if (showInput) {
+      setShowInput(false);
+    } else {
+      setShowInput(true);
+    }
+  };
+
+  const handleClickChangeName = (): void => {
+    if (newProjName === "") return;
+
+    if (
+      confirm(
+        `Are you sure you want to change name of ${props.projectname} to ${newProjName}?`,
+      )
+    ) {
+      //TODO: change and insert change name functionality
+      alert("Not implemented yet");
+      setNewProjName("");
+    } else {
+      alert("Name was not changed!");
+    }
+  };
+
   useEffect(() => {
     if (times?.totalTime !== undefined) {
       totalTime.current = times.totalTime;
@@ -28,44 +56,90 @@ function ProjectInfoModal(props: {
       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-2xl text-center h-[61vh] w-[40] overflow-auto">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[64vh] w-[40] overflow-auto">
         <div className="pl-10 pr-10">
-          <h1 className="font-bold text-[32px] mb-[20px]">
+          <h1 className="font-bold text-[32px]">{props.projectname}</h1>
-            {props.projectname}
+          <p
-          </h1>
+            className="mb-4 hover:font-bold hover:cursor-pointer hover:underline"
-          <div className="p-1 text-center">
+            onClick={handleChangeNameView}
-            <h2 className="text-[20px] font-bold">Statistics:</h2>
+          >
-          </div>
+            (Change project name)
-          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
+          </p>
-            <p className="p-2">Number of members: {users.length}</p>
+          {showInput && (
-            <p className="p-2">
+            <>
+              <h2 className="text-[20px] font-bold pb-2">Change name:</h2>
+              <div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4">
+                <InputField
+                  type={"text"}
+                  value={newProjName}
+                  onChange={function (e): void {
+                    setNewProjName(e.target.value);
+                  }}
+                  placeholder={"Project Name"}
+                />
+                <div className="px-6 grid grid-cols-2 gap-10">
+                  <Button
+                    text={"Change"}
+                    onClick={function (): void {
+                      handleClickChangeName();
+                    }}
+                    type={"submit"}
+                  />
+                  <Button
+                    text={"Close"}
+                    onClick={function (): void {
+                      handleChangeNameView();
+                    }}
+                    type={"submit"}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          <h2 className="text-[20px] font-bold pb-2">Statistics:</h2>
+          <div className="border-2 border-black rounded-2xl px-2 py-1 text-left divide-y-2 flex flex-col overflow-auto">
+            <p>Number of members: {users.length}</p>
+            <p>
               Total time reported:{" "}
               {Math.floor(totalTime.current / 60 / 24) + " d "}
               {Math.floor((totalTime.current / 60) % 24) + " h "}
               {(totalTime.current % 60) + " m "}
             </p>
           </div>
-          <div className="h-[6vh] p-7 text-center">
+          <h3 className="pt-7 text-[20px] font-bold">Project members:</h3>
-            <h2 className="text-[20px] font-bold">Project members:</h2>
+          <div className="">
-          </div>
+            <InputField
-          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
+              placeholder={"Search member"}
-            <ul className="text-left font-medium space-y-2">
+              type={"Text"}
-              <div></div>
+              value={search}
-              {users.map((user) => (
+              onChange={(e) => {
-                <li
+                setSearch(e.target.value);
-                  className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+              }}
-                  key={user.Username}
+            />
-                  onClick={() => {
+            <ul className="border-2 border-black mt-2 p-2 rounded-2xl text-left overflow-auto h-[24vh] font-medium space-y-2">
-                    props.onClick(user.Username);
+              {users
-                  }}
+                .filter((user) => {
-                >
+                  return search.toLowerCase() === ""
-                  <span>
+                    ? user.Username
-                    Name: {user.Username}
+                    : user.Username.toLowerCase().includes(
-                    <div></div>
+                        search.toLowerCase(),
-                    Role: {user.UserRole}
+                      );
-                  </span>
+                })
-                </li>
+                .map((user) => (
-              ))}
+                  <li
+                    className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
+                    key={user.Username}
+                    onClick={() => {
+                      props.onClick(user.Username);
+                    }}
+                  >
+                    <span>
+                      Name: {user.Username}
+                      <div></div>
+                      Role: {user.UserRole}
+                    </span>
+                  </li>
+                ))}
             </ul>
           </div>
           <div className="space-x-5 my-2">

frontend/src/Components/ProjectListAdmin.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
 import MemberInfoModal from "./MemberInfoModal";
+import InputField from "./InputField";
 
 /**
  * A list of projects for admin manage projects page, that sets an onClick
@@ -21,6 +22,7 @@ export function ProjectListAdmin(props: {
   const [projectName, setProjectName] = useState("");
   const [userModalVisible, setUserModalVisible] = useState(false);
   const [username, setUsername] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleClickUser = (username: string): void => {
     setUsername(username);
@@ -44,6 +46,7 @@ export function ProjectListAdmin(props: {
 
   return (
     <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>
       {projectModalVisible && (
         <ProjectInfoModal
           onClose={handleCloseProject}
@@ -59,18 +62,32 @@ export function ProjectListAdmin(props: {
         />
       )}
       <div>
-        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+        <InputField
-          {props.projects.map((project) => (
+          placeholder={"Search"}
-            <li
+          type={"Text"}
-              className="pt-5"
+          value={search}
-              key={project.name}
+          onChange={(e) => {
-              onClick={() => {
+            setSearch(e.target.value);
-                handleClickProject(project.name);
+          }}
-              }}
+        />
-            >
+        <ul className="mt-3 border-2 text-left border-black rounded-2xl px-2 divide-y divide-gray-300 font-semibold text-[30px] cursor-pointer overflow-auto h-[65vh] w-[50vw]">
-              {project.name}
+          {props.projects
-            </li>
+            .filter((project) => {
-          ))}
+              return search.toLowerCase() === ""
+                ? project.name
+                : project.name.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((project) => (
+              <li
+                className="hover:font-extrabold hover:underline p-1"
+                key={project.name}
+                onClick={() => {
+                  handleClickProject(project.name);
+                }}
+              >
+                {project.name}
+              </li>
+            ))}
         </ul>
       </div>
     </>

frontend/src/Components/Register.tsx

@@ -61,6 +61,7 @@ export default function Register(): JSX.Element {
               onChange={(e) => {
                 setUsername(e.target.value);
               }}
+              placeholder={"Username"}
             />
             <InputField
               label="Password"
@@ -69,6 +70,7 @@ export default function Register(): JSX.Element {
               onChange={(e) => {
                 setPassword(e.target.value);
               }}
+              placeholder={"Password"}
             />
           </div>
           <div className="flex items-center justify-between">

frontend/src/Components/UserInfoModal.tsx

@@ -13,6 +13,7 @@ function UserInfoModal(props: {
 }): JSX.Element {
   const [showInput, setShowInput] = useState(false);
   const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
   if (!props.isVisible) {
     return <></>;
   }
@@ -26,11 +27,34 @@ function UserInfoModal(props: {
   };
 
   const handleClickChangeName = (): void => {
-    const nameChange: StrNameChange = {
+    if (newUsername === "") return;
-      prevName: props.username,
+    if (
-      newName: newUsername.replace(/ /g, ""),
+      confirm(
-    };
+        `Do you really want to change username of ${props.username} to ${newUsername}?`,
-    ChangeUsername({ nameChange: nameChange });
+      )
+    ) {
+      const nameChange: StrNameChange = {
+        prevName: props.username,
+        newName: newUsername.replace(/ /g, ""),
+      };
+      ChangeUsername({ nameChange: nameChange });
+    } else {
+      alert("Name was not changed!");
+    }
+  };
+
+  const handleClickChangePassword = (): void => {
+    if (newPassword === "") return;
+
+    if (
+      confirm(`Are you sure you want to change password of ${props.username}?`)
+    ) {
+      //TODO: insert change password functionality
+      alert("Not implemented yet");
+      setNewPassword("");
+    } else {
+      alert("Password was not changed!");
+    }
   };
 
   return (
@@ -38,14 +62,14 @@ function UserInfoModal(props: {
       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 rounded-lg text-center flex flex-col">
+      <div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
         <div className="mx-10">
           <p className="font-bold text-[30px]">{props.username}</p>
           <p
             className="mb-[10px] hover:font-bold hover:cursor-pointer underline"
             onClick={handleChangeNameView}
           >
-            (Change Username)
+            (Change Username or Password)
           </p>
           {showInput && (
             <div>
@@ -54,14 +78,25 @@ function UserInfoModal(props: {
                 type={"text"}
                 value={newUsername}
                 onChange={function (e): void {
-                  e.defaultPrevented;
                   setNewUsername(e.target.value);
                 }}
+                placeholder={"Username"}
+              />
+              <div className="m-4"></div>
+              <InputField
+                label={"New password"}
+                type={"password"}
+                value={newPassword}
+                onChange={function (e): void {
+                  setNewPassword(e.target.value);
+                }}
+                placeholder={"Password"}
               />
               <Button
                 text={"Change"}
                 onClick={function (): void {
                   handleClickChangeName();
+                  handleClickChangePassword();
                 }}
                 type={"submit"}
               />

frontend/src/Components/UserListAdmin.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import UserInfoModal from "./UserInfoModal";
+import InputField from "./InputField";
 
 /**
  * A list of users for admin manage users page, that sets an onClick
@@ -15,6 +16,7 @@ import UserInfoModal from "./UserInfoModal";
 export function UserListAdmin(props: { users: string[] }): JSX.Element {
   const [modalVisible, setModalVisible] = useState(false);
   const [username, setUsername] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleClick = (username: string): void => {
     setUsername(username);
@@ -28,24 +30,39 @@ export function UserListAdmin(props: { users: string[] }): JSX.Element {
 
   return (
     <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
       <UserInfoModal
         onClose={handleClose}
         isVisible={modalVisible}
         username={username}
       />
       <div>
-        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+        <InputField
-          {props.users.map((user) => (
+          placeholder={"Search"}
-            <li
+          type={"Text"}
-              className="pt-5"
+          value={search}
-              key={user}
+          onChange={(e) => {
-              onClick={() => {
+            setSearch(e.target.value);
-                handleClick(user);
+          }}
-              }}
+        />
-            >
+        <ul className="mt-3 border-2 text-left border-black rounded-2xl px-2 divide-y divide-gray-300 font-semibold text-[30px] transition-all cursor-pointer overflow-auto h-[65vh] w-[50vw]">
-              {user}
+          {props.users
-            </li>
+            .filter((user) => {
-          ))}
+              return search.toLowerCase() === ""
+                ? user
+                : user.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((user) => (
+              <li
+                className="hover:font-extrabold hover:underline p-1"
+                key={user}
+                onClick={() => {
+                  handleClick(user);
+                }}
+              >
+                {user}
+              </li>
+            ))}
         </ul>
       </div>
     </>

frontend/src/Pages/AdminPages/AdminManageProjects.tsx

@@ -13,14 +13,7 @@ function AdminManageProjects(): JSX.Element {
     setProjectsProp: setProjects,
     username: localStorage.getItem("username") ?? "",
   });
-  const content = (
+  const content = <ProjectListAdmin projects={projects} />;
-    <>
-      <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <ProjectListAdmin projects={projects} />
-      </div>
-    </>
-  );
 
   const buttons = (
     <>

frontend/src/Pages/AdminPages/AdminManageUsers.tsx

@@ -12,14 +12,7 @@ function AdminManageUsers(): JSX.Element {
 
   const navigate = useNavigate();
 
-  const content = (
+  const content = <UserListAdmin users={users} />;
-    <>
-      <h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <UserListAdmin users={users} />
-      </div>
-    </>
-  );
 
   const buttons = (
     <>

frontend/src/Pages/AdminPages/AdminMenuPage.tsx

@@ -5,14 +5,14 @@ function AdminMenuPage(): JSX.Element {
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Administrator Menu</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-auto space-y-[10vh] p-[30px]">
         <Link to="/adminManageUser">
-          <h1 className="font-bold underline text-[30px] cursor-pointer">
+          <h1 className="font-bold hover:underline text-[30px] cursor-pointer hover:font-extrabold">
             Manage Users
           </h1>
         </Link>
         <Link to="/adminManageProject">
-          <h1 className="font-bold underline text-[30px] cursor-pointer">
+          <h1 className="font-bold hover:underline text-[30px] cursor-pointer hover:font-extrabold">
             Manage Projects
           </h1>
         </Link>

frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx

@@ -1,11 +1,12 @@
 import { useLocation } from "react-router-dom";
 import AddUserToProject from "../../Components/AddUserToProject";
 import BasicWindow from "../../Components/BasicWindow";
+import BackButton from "../../Components/BackButton";
 
 function AdminProjectAddMember(): JSX.Element {
   const projectName = useLocation().search.slice(1);
   const content = <AddUserToProject projectName={projectName} />;
-  const buttons = <></>;
+  const buttons = <BackButton />;
   return <BasicWindow content={content} buttons={buttons} />;
 }
 export default AdminProjectAddMember;