feat: view customize on member's role

backend/middleware/auth.js

@@ -56,23 +56,47 @@ function authMiddleware(sequelize) {
    */
   async function verifyProjectVisible(req, res, next) {
     const Project = defineProject(sequelize, DataTypes);
+    const Member = defineMember(sequelize, DataTypes);
+    Project.hasMany(Member, { foreignKey: 'projectId' });
 
     const projectId = req.params.projectId || req.query.projectId;
     if (!projectId) {
       return res.status(400).json({ error: 'projectId is required' });
     }
 
-    const project = await Project.findByPk(projectId);
+    const project = await Project.findOne({
+      where: { id: projectId },
+      include: [
+        {
+          model: Member,
+          where: { userId: req.userId },
+          required: false,
+        },
+      ],
+    });
     if (!project) {
       return res.status(404).send('Project not found');
     }
 
-    // if project is private, only project owner can access
-    if (!project.isPublic && project.userId !== req.userId) {
-      return res.status(403).json({ error: 'Forbidden' });
+    // if project is public, everyone can see
+    if (project.isPublic) {
+      next();
+      return;
     }
 
-    next();
+    // if project is private, owner and project member can see
+    if (project.userId === req.userId) {
+      next();
+      return;
+    }
+
+    const member = project.Members && project.Members[0];
+    if (member) {
+      next();
+      return;
+    }
+
+    return res.status(403).json({ error: 'Forbidden' });
   }
 
   /**

backend/routes/members/index.js

@@ -1,17 +1,16 @@
 const express = require('express');
 const router = express.Router();
-const defineMember = require('../../models/members');
 const defineUser = require('../../models/users');
+const defineMember = require('../../models/members');
 const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
-  const { verifySignedIn, verifyProjectManager } = require('../../middleware/auth')(sequelize);
-  const Member = defineMember(sequelize, DataTypes);
+  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
   const User = defineUser(sequelize, DataTypes);
-
+  const Member = defineMember(sequelize, DataTypes);
   Member.belongsTo(User, { foreignKey: 'userId' });
 
-  router.get('/', verifySignedIn, verifyProjectManager, async (req, res) => {
+  router.get('/', verifySignedIn, verifyProjectVisible, async (req, res) => {
     const { projectId } = req.query;
 
     if (!projectId) {

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import {
   Table,
   TableHeader,

frontend/src/app/[locale]/projects/[projectId]/folders/FolderEditMenu.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@nextui-org/react';
 import { MoreVertical } from 'lucide-react';
 import { FolderType, FoldersMessages } from '@/types/folder';
@@ -11,14 +12,24 @@ type Props = {
 };
 
 export default function FolderEditMenu({ folder, isDisabled, onEditClick, onDeleteClick, messages }: Props) {
+  const [disabledKeys, setDisabledKeys] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isDisabled) {
+      setDisabledKeys(['edit', 'delete']);
+    } else {
+      setDisabledKeys([]);
+    }
+  }, [isDisabled]);
+
   return (
     <Dropdown>
       <DropdownTrigger>
-        <Button isIconOnly isDisabled={isDisabled} size="sm" className="bg-transparent rounded-full">
+        <Button isIconOnly size="sm" className="bg-transparent rounded-full">
           <MoreVertical size={16} />
         </Button>
       </DropdownTrigger>
-      <DropdownMenu aria-label="Static Actions">
+      <DropdownMenu aria-label="Static Actions" disabledKeys={disabledKeys}>
         <DropdownItem key="edit" onClick={() => onEditClick(folder)}>
           {messages.editFolder}
         </DropdownItem>

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -118,7 +118,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
           size="sm"
           variant="bordered"
           className="m-2"
-          isDisabled={!context.isProjectEditable(Number(projectId))}
+          isDisabled={!context.isProjectDeveloper(Number(projectId))}
           onClick={openDialogForCreate}
         >
           {messages.newFolder}
@@ -133,7 +133,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
               endContent={
                 <FolderEditMenu
                   folder={folder}
-                  isDisabled={!context.isProjectEditable(Number(projectId))}
+                  isDisabled={!context.isProjectDeveloper(Number(projectId))}
                   onEditClick={onEditClick}
                   onDeleteClick={onDeleteClick}
                   messages={messages}

frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx

@@ -21,12 +21,13 @@ import Avatar from 'boring-avatars';
 
 type Props = {
   members: MemberType[];
+  isDisabled: boolean;
   onChangeRole: (userEdit: UserType, role: number) => void;
   onDeleteMember: (userDeleted: UserType) => void;
   messages: SettingsMessages;
 };
 
-export default function MembersTable({ members, onChangeRole, onDeleteMember, messages }: Props) {
+export default function MembersTable({ members, isDisabled, onChangeRole, onDeleteMember, messages }: Props) {
   const headerColumns = [
     { name: messages.avatar, uid: 'avatar' },
     { name: messages.email, uid: 'email', sortable: true },
@@ -71,7 +72,7 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
         return (
           <Dropdown>
             <DropdownTrigger>
-              <Button size="sm" variant="light" endContent={<ChevronDown size={16} />}>
+              <Button size="sm" isDisabled={isDisabled} variant="light" endContent={<ChevronDown size={16} />}>
                 <span className="w-12">{messages[memberRoles[cellValue].uid]}</span>
               </Button>
             </DropdownTrigger>
@@ -86,7 +87,13 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
         );
       case 'delete':
         return (
-          <Button size="sm" color="danger" variant="light" onClick={() => onDeleteMember(member.User)}>
+          <Button
+            size="sm"
+            isDisabled={isDisabled}
+            color="danger"
+            variant="light"
+            onClick={() => onDeleteMember(member.User)}
+          >
             {messages.deleteMember}
           </Button>
         );

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -69,13 +69,20 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
     <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
       <div className="w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">{messages.memberManagement}</h3>
-        <Button startContent={<Plus size={16} />} size="sm" color="primary" onClick={() => setIsDialogOpen(true)}>
+        <Button
+          startContent={<Plus size={16} />}
+          size="sm"
+          color="primary"
+          isDisabled={!context.isProjectManager(Number(projectId))}
+          onClick={() => setIsDialogOpen(true)}
+        >
           {messages.addMember}
         </Button>
       </div>
 
       <MembersTable
         members={members}
+        isDisabled={!context.isProjectManager(Number(projectId))}
         onChangeRole={handleChangeRole}
         onDeleteMember={handleDeleteMember}
         messages={messages}

frontend/types/user.ts

@@ -26,12 +26,13 @@ export type TokenContextType = {
     access_token: string;
     user: UserType;
   };
-  isSignedIn: () => Boolean;
-  isAdmin: () => Boolean;
-  isProjectEditable: (projectId: number) => Boolean;
-  setToken: (token: TokenType) => {};
-  storeTokenToLocalStorage: (token: TokenType) => {};
-  removeTokenFromLocalStorage: () => {};
+  isSignedIn: () => boolean;
+  isAdmin: () => boolean;
+  isProjectManager: (projectId: number) => boolean;
+  isProjectDeveloper: (projectId: number) => boolean;
+  setToken: (token: TokenType) => void;
+  storeTokenToLocalStorage: (token: TokenType) => void;
+  removeTokenFromLocalStorage: () => void;
 };
 
 export type ProjectRoleType = {

frontend/utils/TokenProvider.tsx

@@ -6,7 +6,8 @@ import { useRouter, usePathname } from '@/src/navigation';
 import {
   isSignedIn as tokenIsSinedIn,
   isAdmin as tokenIsAdmin,
-  isProjectEditable as tokenIsProjectEditable,
+  isProjectManager as tokenIsProjectManager,
+  isProjectDeveloper as tokenIsProjectDeveloper,
   checkSignInPage as tokenCheckSignInPage,
   fetchMyRoles,
 } from './token';
@@ -28,6 +29,12 @@ const defaultContext = {
   },
   isSignedIn: () => false,
   isAdmin: () => false,
+  isProjectManager: (projectId: number) => {
+    return false;
+  },
+  isProjectDeveloper: (projectId: number) => {
+    return false;
+  },
   setToken: (token: TokenType) => {},
   storeTokenToLocalStorage,
   removeTokenFromLocalStorage,
@@ -55,8 +62,12 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
     return tokenIsAdmin(token);
   };
 
-  const isProjectEditable = (projectId: number) => {
-    return tokenIsProjectEditable(projectRoles, projectId);
+  const isProjectManager = (projectId: number) => {
+    return tokenIsProjectManager(projectRoles, projectId);
+  };
+
+  const isProjectDeveloper = (projectId: number) => {
+    return tokenIsProjectDeveloper(projectRoles, projectId);
   };
 
   const tokenContext = {
@@ -64,7 +75,8 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
     projectRoles,
     isSignedIn,
     isAdmin,
-    isProjectEditable,
+    isProjectManager,
+    isProjectDeveloper,
     setToken,
     storeTokenToLocalStorage,
     removeTokenFromLocalStorage,

frontend/utils/token.ts

@@ -61,7 +61,28 @@ async function fetchMyRoles(jwt: string) {
   }
 }
 
-function isProjectEditable(projectRoles: ProjectRoleType[], projectId: number) {
+function isProjectManager(projectRoles: ProjectRoleType[], projectId: number) {
+  const found = projectRoles.find((role) => {
+    return role.projectId === projectId;
+  });
+
+  if (!found) {
+    return false;
+  }
+
+  if (found.isOwner === true) {
+    return true;
+  }
+
+  const managerRoleIndex = memberRoles.findIndex((entry) => entry.uid === 'manager');
+  if (found.role === managerRoleIndex) {
+    return true;
+  }
+
+  return false;
+}
+
+function isProjectDeveloper(projectRoles: ProjectRoleType[], projectId: number) {
   const found = projectRoles.find((role) => {
     return role.projectId === projectId;
   });
@@ -113,4 +134,4 @@ function checkSignInPage(token: TokenType, pathname: string) {
   return ret;
 }
 
-export { isSignedIn, isAdmin, isProjectEditable, isPrivatePath, checkSignInPage, fetchMyRoles };
+export { isSignedIn, isAdmin, isProjectManager, isProjectDeveloper, isPrivatePath, checkSignInPage, fetchMyRoles };