Small fixes in all files that fetches user projects, so that they pass username as argument to GetProjects-function

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

@@ -7,6 +7,8 @@ VALUES ("user", "123");
 INSERT OR IGNORE INTO users(username, password)
 VALUES ("user2", "123");
 
+INSERT OR IGNORE INTO site_admin VALUES (1);
+
 INSERT OR IGNORE INTO projects(name,description,owner_user_id)
 VALUES ("projecttest","test project", 1);
 

backend/internal/handlers/handlers_project_related.go

@@ -44,10 +44,11 @@ func (gs *GState) DeleteProject(c *fiber.Ctx) error {
 
 // GetUserProjects returns all projects that the user is a member of
 func (gs *GState) GetUserProjects(c *fiber.Ctx) error {
-	// First we get the username from the token
-	user := c.Locals("user").(*jwt.Token)
-	claims := user.Claims.(jwt.MapClaims)
-	username := claims["name"].(string)
+	username := c.Params("username")
+	if username == "" {
+		log.Info("No username provided")
+		return c.Status(400).SendString("No username provided")
+	}
 
 	// Then dip into the database to get the projects
 	projects, err := gs.Db.GetProjectsForUser(username)

backend/internal/handlers/handlers_user_related.go

@@ -59,9 +59,9 @@ func (gs *GState) UserDelete(c *fiber.Ctx) error {
 	// Read username from Locals
 	auth_username := c.Locals("user").(*jwt.Token).Claims.(jwt.MapClaims)["name"].(string)
 
-	if username != auth_username {
-		log.Info("User tried to delete another user")
-		return c.Status(403).SendString("You can only delete yourself")
+	if username == auth_username {
+		log.Info("User tried to delete itself")
+		return c.Status(403).SendString("You can't delete yourself")
 	}
 
 	if err := gs.Db.RemoveUser(username); err != nil {

backend/main.go

@@ -84,7 +84,7 @@ func main() {
 
 	// Protected routes (require a valid JWT bearer token authentication header)
 	server.Post("/api/submitWeeklyReport", gs.SubmitWeeklyReport)
-	server.Get("/api/getUserProjects", gs.GetUserProjects)
+	server.Get("/api/getUserProjects/:username", gs.GetUserProjects)
 	server.Post("/api/loginrenew", gs.LoginRenew)
 	server.Delete("/api/userdelete/:username", gs.UserDelete) // Perhaps just use POST to avoid headaches
 	server.Delete("api/project/:projectID", gs.DeleteProject) // WIP

frontend/src/API/API.ts

@@ -6,6 +6,8 @@ import {
   NewProject,
   UserProjectMember,
   WeeklyReport,
+  StrNameChange,
+  NewProjMember,
 } from "../Types/goTypes";
 
 /**
@@ -112,10 +114,14 @@ interface API {
   ): Promise<APIResponse<WeeklyReport[]>>;
 
   /** Gets all the projects of a user
+   * @param {string} username - The authentication token.
    * @param {string} token - The authentication token.
    * @returns {Promise<APIResponse<Project[]>>} A promise containing the API response with the user's projects.
    */
-  getUserProjects(token: string): Promise<APIResponse<Project[]>>;
+  getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>>;
 
   /** Gets a project by its id.
    * @param {number} id The id of the project to retrieve.
@@ -133,6 +139,20 @@ interface API {
     projectName: string,
     token: string,
   ): Promise<APIResponse<UserProjectMember[]>>;
+  /**
+   * Changes the username of a user in the database.
+   * @param {StrNameChange} data The object containing the previous and new username.
+   * @param {string} token The authentication token.
+   * @returns {Promise<APIResponse<void>>} A promise resolving to an API response.
+   */
+  changeUserName(
+    data: StrNameChange,
+    token: string,
+  ): Promise<APIResponse<void>>;
+  addUserToProject(
+    user: NewProjMember,
+    token: string,
+  ): Promise<APIResponse<NewProjMember>>;
 }
 
 /** An instance of the API */
@@ -170,19 +190,17 @@ export const api: API = {
   ): Promise<APIResponse<User>> {
     try {
       const response = await fetch(`/api/userdelete/${username}`, {
-        method: "POST",
+        method: "DELETE",
         headers: {
           "Content-Type": "application/json",
           Authorization: "Bearer " + token,
         },
         body: JSON.stringify(username),
       });
-
       if (!response.ok) {
-        return { success: false, message: "Failed to remove user" };
+        return { success: false, message: "Could not remove user" };
       } else {
-        const data = (await response.json()) as User;
-        return { success: true, data };
+        return { success: true };
       }
     } catch (e) {
       return { success: false, message: "Failed to remove user" };
@@ -243,6 +261,30 @@ export const api: API = {
     }
   },
 
+  async addUserToProject(
+    user: NewProjMember,
+    token: string,
+  ): Promise<APIResponse<NewProjMember>> {
+    try {
+      const response = await fetch("/api/addUserToProject", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+        body: JSON.stringify(user),
+      });
+
+      if (!response.ok) {
+        return { success: false, message: "Failed to add member" };
+      } else {
+        return { success: true, message: "Added member" };
+      }
+    } catch (e) {
+      return { success: false, message: "Failed to add member" };
+    }
+  },
+
   async renewToken(token: string): Promise<APIResponse<string>> {
     try {
       const response = await fetch("/api/loginrenew", {
@@ -264,9 +306,12 @@ export const api: API = {
     }
   },
 
-  async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
+  async getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>> {
     try {
-      const response = await fetch("/api/getUserProjects", {
+      const response = await fetch(`/api/getUserProjects/${username}`, {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
@@ -484,4 +529,28 @@ export const api: API = {
       });
     }
   },
+
+  async changeUserName(
+    data: StrNameChange,
+    token: string,
+  ): Promise<APIResponse<void>> {
+    try {
+      const response = await fetch("/api/changeUserName", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        return { success: false, message: "Failed to change username" };
+      } else {
+        return { success: true };
+      }
+    } catch (e) {
+      return { success: false, message: "Failed to change username" };
+    }
+  },
 };

frontend/src/Components/AddMember.tsx

@@ -0,0 +1,39 @@
+import { APIResponse, api } from "../API/API";
+import { NewProjMember } from "../Types/goTypes";
+
+/**
+ * Tries to add a member to a project
+ * @param {Object} props - A NewProjMember
+ * @returns {boolean} True if added, false if not
+ */
+function AddMember(props: { memberToAdd: NewProjMember }): boolean {
+  let added = false;
+  if (
+    props.memberToAdd.username === "" ||
+    props.memberToAdd.role === "" ||
+    props.memberToAdd.projectname === ""
+  ) {
+    alert("All fields must be filled before adding");
+    return added;
+  }
+  api
+    .addUserToProject(
+      props.memberToAdd,
+      localStorage.getItem("accessToken") ?? "",
+    )
+    .then((response: APIResponse<NewProjMember>) => {
+      if (response.success) {
+        alert("Member added");
+        added = true;
+      } else {
+        alert("Member not added");
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      console.error("An error occurred during member add:", error);
+    });
+  return added;
+}
+
+export default AddMember;

frontend/src/Components/AddUserToProject.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { NewProjMember } from "../Types/goTypes";
+import Button from "./Button";
+import GetAllUsers from "./GetAllUsers";
+import AddMember from "./AddMember";
+import BackButton from "./BackButton";
+
+/**
+ * Provides UI for adding a member to a project.
+ * @returns {JSX.Element} - Returns the component UI for adding a member
+ */
+function AddUserToProject(): JSX.Element {
+  const [name, setName] = useState("");
+  const [users, setUsers] = useState<string[]>([]);
+  const [role, setRole] = useState("");
+  GetAllUsers({ setUsersProp: setUsers });
+
+  const handleClick = (): boolean => {
+    const newMember: NewProjMember = {
+      username: name,
+      projectname: localStorage.getItem("projectName") ?? "",
+      role: role,
+    };
+    return AddMember({ memberToAdd: newMember });
+  };
+
+  return (
+    <div className="border-4 border-black bg-white flex flex-col items-center justify-center rounded-3xl content-center pl-20 pr-20  h-[75vh] w-[50vh]">
+      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
+        User chosen: [{name}]
+      </p>
+      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
+        Role chosen: [{role}]
+      </p>
+      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
+        Project chosen: [{localStorage.getItem("projectName") ?? ""}]
+      </p>
+      <p className="p-1">Choose role:</p>
+      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16vh]">
+        <ul className="text-center items-center font-medium space-y-2">
+          <li
+            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            onClick={() => {
+              setRole("member");
+            }}
+          >
+            {"Member"}
+          </li>
+          <li
+            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            onClick={() => {
+              setRole("project_manager");
+            }}
+          >
+            {"Project manager"}
+          </li>
+        </ul>
+      </div>
+      <p className="p-1">Choose user:</p>
+      <div className="border-2 border-black p-2 rounded-xl text-center overflow-scroll h-[26vh] w-[26vh]">
+        <ul className="text-center font-medium space-y-2">
+          <div></div>
+          {users.map((user) => (
+            <li
+              className="items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+              key={user}
+              value={user}
+              onClick={() => {
+                setName(user);
+              }}
+            >
+              <span>{user}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex space-x-5 items-center justify-between">
+        <Button
+          text="Add"
+          onClick={(): void => {
+            handleClick();
+          }}
+          type="submit"
+        />
+        <BackButton />
+      </div>
+      <p className="text-center text-gray-500 text-xs"></p>
+    </div>
+  );
+}
+
+export default AddUserToProject;

frontend/src/Components/ChangeUsername.tsx

@@ -1,23 +1,48 @@
 import React, { useState } from "react";
 import InputField from "./InputField";
+import { api } from "../API/API";
 
 function ChangeUsername(): JSX.Element {
   const [newUsername, setNewUsername] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     setNewUsername(e.target.value);
   };
 
-  // const handleSubmit = async (): Promise<void> => {
-  //   try {
-  //     // Call the API function to update the username
-  //     await api.updateUsername(newUsername);
-  //     // Optionally, add a success message or redirect the user
-  //   } catch (error) {
-  //     console.error("Error updating username:", error);
-  //     // Optionally, handle the error
-  //   }
-  // };
+  const handleSubmit = async (): Promise<void> => {
+    try {
+      // Call the API function to change the username
+      const token = localStorage.getItem("accessToken");
+      if (!token) {
+        throw new Error("Access token not found");
+      }
+
+      const response = await api.changeUserName(
+        { prevName: "currentName", newName: newUsername },
+        token,
+      );
+
+      if (response.success) {
+        // Optionally, add a success message or redirect the user
+        console.log("Username changed successfully");
+      } else {
+        // Handle the error message
+        console.error("Failed to change username:", response.message);
+        setErrorMessage(response.message ?? "Failed to change username");
+      }
+    } catch (error) {
+      console.error("Error changing username:", error);
+      // Optionally, handle the error
+      setErrorMessage("Failed to change username");
+    }
+  };
+
+  const handleButtonClick = (): void => {
+    handleSubmit().catch((error) => {
+      console.error("Error in handleSubmit:", error);
+    });
+  };
 
   return (
     <div>
@@ -27,6 +52,8 @@ function ChangeUsername(): JSX.Element {
         value={newUsername}
         onChange={handleChange}
       />
+      {errorMessage && <div>{errorMessage}</div>}
+      <button onClick={handleButtonClick}>Update Username</button>
     </div>
   );
 }

frontend/src/Components/DeleteUser.tsx

@@ -11,7 +11,6 @@ import { api, APIResponse } from "../API/API";
  */
 
 function DeleteUser(props: { usernameToDelete: string }): boolean {
-  //console.log(props.usernameToDelete); FOR DEBUG
   let removed = false;
   api
     .removeUser(
@@ -20,12 +19,16 @@ function DeleteUser(props: { usernameToDelete: string }): boolean {
     )
     .then((response: APIResponse<User>) => {
       if (response.success) {
+        alert("User has been deleted!");
+        location.reload();
         removed = true;
       } else {
+        alert("User has not been deleted");
         console.error(response.message);
       }
     })
     .catch((error) => {
+      alert("User has not been deleted");
       console.error("An error occurred during creation:", error);
     });
   return removed;

frontend/src/Components/DisplayUserProjects.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Project } from "../Types/goTypes";
 import { Link } from "react-router-dom";
-import { api } from "../API/API";
+import GetProjects from "./GetProjects";
 
 /**
  * Renders a component that displays the projects a user is a part of and links to the projects start-page.
@@ -10,21 +10,10 @@ import { api } from "../API/API";
 function DisplayUserProject(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
-  const getProjects = async (): Promise<void> => {
-    const token = localStorage.getItem("accessToken") ?? "";
-    const response = await api.getUserProjects(token);
-    console.log(response);
-    if (response.success) {
-      setProjects(response.data ?? []);
-    } else {
-      console.error(response.message);
-    }
-  };
-
-  // Call getProjects when the component mounts
-  useEffect(() => {
-    void getProjects();
-  }, []);
+  GetProjects({
+    setProjectsProp: setProjects,
+    username: localStorage.getItem("username") ?? "",
+  });
 
   return (
     <>

frontend/src/Components/GetProjects.tsx

@@ -12,6 +12,7 @@ import { api } from "../API/API";
  */
 function GetProjects(props: {
   setProjectsProp: Dispatch<React.SetStateAction<Project[]>>;
+  username: string;
 }): void {
   const setProjects: Dispatch<React.SetStateAction<Project[]>> =
     props.setProjectsProp;
@@ -19,7 +20,7 @@ function GetProjects(props: {
     const fetchUsers = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        const response = await api.getUserProjects(token);
+        const response = await api.getUserProjects(props.username, token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -31,7 +32,7 @@ function GetProjects(props: {
     };
 
     void fetchUsers();
-  }, [setProjects]);
+  }, [props.username, setProjects]);
 }
 
 export default GetProjects;

frontend/src/Components/ProjectInfoModal.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import Button from "./Button";
 import { UserProjectMember } from "../Types/goTypes";
 import GetUsersInProject from "./GetUsersInProject";
+import { Link } from "react-router-dom";
 
 function ProjectInfoModal(props: {
   isVisible: boolean;
@@ -18,9 +19,12 @@ 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-[41vh] w-[40vw] flex flex-col">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
         <div className="pl-20 pr-20">
-          <h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
+          <h1 className="font-bold text-[32px] mb-[20px]">
+            {localStorage.getItem("projectName") ?? ""}
+          </h1>
+          <h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
           <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
             <ul className="text-left font-medium space-y-2">
               <div></div>
@@ -50,6 +54,15 @@ function ProjectInfoModal(props: {
             }}
             type="button"
           />
+          <Link to={"/adminProjectAddMember"}>
+            <Button
+              text={"Add Member"}
+              onClick={function (): void {
+                return;
+              }}
+              type="button"
+            />
+          </Link>
           <Button
             text={"Close"}
             onClick={function (): void {

frontend/src/Components/ProjectListAdmin.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
 import UserInfoModal from "./UserInfoModal";
-import DeleteUser from "./DeleteUser";
 
 /**
  * A list of projects for admin manage projects page, that sets an onClick
@@ -28,8 +27,9 @@ export function ProjectListAdmin(props: {
     setUserModalVisible(true);
   };
 
-  const handleClickProject = (username: string): void => {
-    setProjectname(username);
+  const handleClickProject = (projectname: string): void => {
+    setProjectname(projectname);
+    localStorage.setItem("projectName", projectname);
     setProjectModalVisible(true);
   };
 
@@ -55,7 +55,9 @@ export function ProjectListAdmin(props: {
         manageMember={true}
         onClose={handleCloseUser}
         //TODO: CHANGE TO REMOVE USER FROM PROJECT
-        onDelete={() => DeleteUser}
+        onDelete={() => {
+          return;
+        }}
         isVisible={userModalVisible}
         username={username}
       />

frontend/src/Components/Register.tsx

@@ -4,7 +4,6 @@ import { api } from "../API/API";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
 import InputField from "./InputField";
-import { useNavigate } from "react-router-dom";
 
 /**
  * Renders a registration form for the admin to add new users in.
@@ -15,8 +14,6 @@ export default function Register(): JSX.Element {
   const [password, setPassword] = useState<string>();
   const [errMessage, setErrMessage] = useState<string>();
 
-  const nav = useNavigate();
-
   const handleRegister = async (): Promise<void> => {
     const newUser: NewUser = {
       username: username ?? "",
@@ -24,8 +21,9 @@ export default function Register(): JSX.Element {
     };
     const response = await api.registerUser(newUser);
     if (response.success) {
-      nav("/"); // Instantly navigate to the login page
+      alert("User added!");
     } else {
+      alert("User not added");
       setErrMessage(response.message ?? "Unknown error");
       console.error(errMessage);
     }

frontend/src/Components/UserInfoModal.tsx

@@ -42,14 +42,20 @@ function UserInfoModal(props: {
             Member of these projects:
           </h2>
           <div className="pr-6 pl-6">
-            <UserProjectListAdmin />
+            <UserProjectListAdmin username={props.username} />
           </div>
         </div>
         <div className="items-center space-x-6 pr-6 pl-6">
           <Button
             text={"Delete"}
             onClick={function (): void {
-              DeleteUser({ usernameToDelete: props.username });
+              if (
+                window.confirm("Are you sure you want to delete this user?")
+              ) {
+                DeleteUser({
+                  usernameToDelete: props.username,
+                });
+              }
             }}
             type="button"
           />

frontend/src/Components/UserProjectListAdmin.tsx

@@ -2,16 +2,16 @@ import { useEffect, useState } from "react";
 import { api } from "../API/API";
 import { Project } from "../Types/goTypes";
 
-function UserProjectListAdmin(): JSX.Element {
+function UserProjectListAdmin(props: { username: string }): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
     const fetchProjects = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        // const username = props.username;
+        const username = props.username;
 
-        const response = await api.getUserProjects(token);
+        const response = await api.getUserProjects(username, token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -23,7 +23,7 @@ function UserProjectListAdmin(): JSX.Element {
     };
 
     void fetchProjects();
-  }, []);
+  }, [props.username]);
 
   return (
     <div className="border-2 border-black bg-white p-2 rounded-lg text-center">

frontend/src/Pages/AdminPages/AdminManageProjects.tsx

@@ -9,7 +9,10 @@ import { useState } from "react";
 
 function AdminManageProjects(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
-  GetProjects({ setProjectsProp: setProjects });
+  GetProjects({
+    setProjectsProp: setProjects,
+    username: localStorage.getItem("username") ?? "",
+  });
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>

frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx

@@ -1,22 +1,10 @@
-import BackButton from "../../Components/BackButton";
+import AddUserToProject from "../../Components/AddUserToProject";
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
 
 function AdminProjectAddMember(): JSX.Element {
-  const content = <></>;
+  const content = <AddUserToProject />;
 
-  const buttons = (
-    <>
-      <Button
-        text="Add"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
-      <BackButton />
-    </>
-  );
+  const buttons = <></>;
 
   return <BasicWindow content={content} buttons={buttons} />;
 }

frontend/src/Types/goTypes.ts

@@ -151,9 +151,16 @@ export interface NewProject {
  */
 export interface RoleChange {
   username: string;
-  role: 'project_manager' | 'user';
+  role: "project_manager" | "user";
   projectname: string;
 }
+
+export interface NewProjMember {
+  username: string;
+  projectname: string;
+  role: string;
+}
+
 export interface NameChange {
   id: number /* int */;
   name: string;