Implement modal to add users to organization

[shivareddy6]

Is your feature request related to a problem? Please describe.
Adding users to a organization is not implemented yet.

The solution should solve following

• Only Owner or Admin should be able to see these buttons
• Implement Add New Admin modal
• Implement Add New Contributors modal
• Connect it to backend function (more details given below)

Expected Behaviour when Add New button is clicked

• For adding Admin
  • A modal with options to enter user handle and add admin button should be visible
• For adding Contributors
  • A modal with options to enter user handle and drop box (Editor, Reviewer) and add contributor should be visible

Navigating to the Implementation Page

1. Login with a user credentials (with an organization)
2. Navigate to http://localhost:5173/org/settings/
3. Click on Users Option
4. Find buttons to Add Admin and Add Contributors

Backend Integration Details

• The backend integration for adding users to the organization is handled by the addOrgUser function.
• This function can be found in src\store\actions\orgActions.js.
• If you are running emulators, you can check if the data is getting added by visiting http://localhost:4000/firestore

Additional context
Check the data base model for more information about user permissions

[skbhagat0502]

@shivareddy6 Please assign me this task.

[Aady7]

Would like to work the issue.

[shivareddy6]

I would suggest you to go through the codebase and device a basic plan on how you want to solve this issue. Please post a comment highlighting your plan of action. Its better to have more clarity before getting assigned and start solving the issue right.

[Aady7]

Hii @shivareddy6 I have looked in for a possible method to implement this in CodeLabz project :-

1. We already have add new button just need to change label with add admins and add contibutors.
2. Opens up a modal, we can put necessory information about the user in the modal that will contain a form.
3. On clicking add button within modal the user get added calling up the function addOrgUser.
4. About the button visibility permission array will help us to do so.
5. Depending on the input of dropdown and button clicked the added users permissions will be decided.

[skbhagat0502]

Frontend Implementation Approach:

1. Modal Design:

   • Will be using Material UI modal.

2. Modal Content:

   • Admin Modal: User handle input field and "Add Admin" button.
   • Contributors Modal: User handle input field, dropdown for role selection (Editor/Reviewer), and "Add Contributor" button.

3. Validation:

   • Frontend validation:
     • Disable buttons when user handle field is empty.
     • Enable buttons when user handle is filled.
     • For contributors, enable the button only when both user handle and role are filled.

4. Modal Interaction:

   • Close modal on clicking a cross button or outside the modal.

5. Visibility Control:

   • Buttons visible only to Owner or Admin. For this will get the data of the user from redux.

6. Integration with Backend:

   • Send data to backend on button click.
   • Backend validation:
     • Check if the user already exists.
     • If yes, add to the respective list (admin or contributor) and show a success message.
     • If no, show an error message. like the user handle is incorrect or the user does not exist.

7. Update Frontend:

   • Reflect changes immediately on the frontend after successful backend operation.

Backend Implementation Approach:

1. Functionality:

   • Backend function addOrgUser in src\store\actions\orgActions.js handles adding users to the organization.

2. Data Validation:

   • Check if the user already exists in the database or not.

3. Add to Respective Lists:

   • If the user exists, add to the admin or contributor list based on the request.
   • If the user doesn't exist, return an error message.

4. Database Update:

   • Ensure that the organization data in the database is updated accordingly.

Additional Points for Efficiency:

1. Feedback to User:

   • Provide feedback messages on the frontend indicating the success or failure of the operation.

2. Role-Based Access Control:

   • Ensure that only users with the required roles can perform these actions.

By incorporating these additional points, your feature implementation will be more robust and user-friendly.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[shivareddy6]

Heyy @Aady7, can you resolve the conflicts

[Aady7]

@shivareddy6 looking into it

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.