Projecteer Update: User Registration/Authentication, Add New Team, VIew Team Details

Repository

https://github.com/olatundeee/projecteer

As stated in the introductory post for the projecteer project, I am seeking to implement a platform where users can manage projects/tasks/content and create teams for their brands or any of their creative pursuits while getting rewarded with steem/sbd.

In the introductory post I also spelled out a list of proposed features some of which were added in the post.

This update talks about the newly added features of the project and how they were implemented

New Features

User Registration

I added a user registration form to allow users create an account for login purposes. During registration the user has to submit email, username and password.

In order to implement this feature I created a component signup. In the html file I created the registration form using the code in the screenshot below

In the .ts file for signup I grabbed the form data and sent it to the service file using the block below

I created a service services/user that will accept the data from signup and send it to the backend using a http request.

In services/user the screenshot below is responsible for user registration

In the backend, I created a route file for users routes/users.js. The screenshot below displays the code handling user registration in routes/users.js

I also created a data model in the backend that dictates the parameters to be stored as user data in the database.

The file for the user data model can found in models/users and the code is shown in the screenshot below.

To access the registration form a user has to navigate to the route /register from the client side , on that view the user will see the form and they go on to enter their details.

The screenshot below shows the registration form.

This feature was committed to Github alongside the feature in the next section, all codes for this commit will be found in the commit link after the next section.

User Login

On the front end I created a new component login that will handle login operations for the user.

While logging in users have to submit the email and password they used during registration.

In the html file for login component I added a form that accepts login data and sends it to the ts file for login.

The code for the login form is shown in the screenshot below

In the ts file, the method login() is responsible for grabbing the form data and sending it to the user service

The code for the ts file is shown in the screenshot below

In services/user the following code screenshot is responsible for accepting data from login component and sending it to the backend for authentication.

In the backend file routes/users the following code block accepts the login data and executes the authentication.

The block above accepts the login data as a http request, the first thing it does is to check the login email if it exists in the database.

If no user was found a response is returned stating User Not Found.

If user is found the block then proceeds to compare the password provided with the one registered on the database.

If the compared passwords do not match a response falsifying the authentication is sent and no token is provided.

If the compared passwords match a response validating the authentication is sent and a token is provided for the session.

routes/users also uses the data model at models/users for database data structuring.

On the front end, to view the login form the user should navigate to /login. The login interface is shown in the screenshot below.

The codes for login/signup functionality can be found in the commit in the shared link below

https://github.com/olatundeee/projecteer/commit/204e2e64599e4ba10b1782ce4ecaca0ae926f63f

Adding Team to A Project

For every project created by a user the user has the liberty to create a team for the project so that other users can join to encourage collaboration between platform users.

I added a new component add-new-team which lets users create one team per project.

In the html file for add-new-team the screenshot below shows the code for the form.

The ts file implements a method addTeam() which will grab the form data and send it to teams service to be sent to the backend.

The code for add-new-team ts file.

I created a service file for teams in services/teams. In services/teams I implemented another method addTeam() which receives data from add-new-team component

The received data is then sent to the backend in form of a http request.

The code for addTeam() in services/teams

In the backend, I created a new file for teams routes at routes/teams.

In routes/teams the following screenshot shows the code that executes the add-new-team request.

The code block in the screenshot above accept data through the request body and uses the data to create a new document in the teams database and finally proceeds to send data from the created document back as a json object.

The data model for the teams can be found in models/teams and is also shown in the screenshot below

When adding a team to a project from the front end, the user has to submit the following information

• A name for the team

• Project being handled by the team:- This field will be pre-filled since a team can only be assigned to one project. The project to be handled by the team will be determined by the project chosen from the projects list page before redirecting to the add new team page.

• Team Lead:- The field for team lead is also pre-filled and the value is the username of the currently logged in user who created the project and is creating the team.

• Team Description :- This field is expected to contain information and details on what the team is about, expected responsibilities of the team members, nature of project tasks and other miscellaneous details.

In order to add a new team users can navigate to dashboard/teams/add-new-team.

The screenshot below shows the add-new-team form

The link to the commit for add new team feature
https://github.com/olatundeee/projecteer/commit/92acec6ea6363440d5f1c5acb6ee6667ae87fb8e

Viewing Team Details

After creating a team for a project we need to have an interface where we can view the team details.

To create this interface I add a new component view-user-teams.

The html for view-user-teams contains the following code.

In the screenshot above we have collection list and on the list we have list items containing the data we added when creating the team for the project.

In the ts file for view-user-teams, I implemented the ngOnInit() method which allows the containing block to run once the page loads completely.

In ngOnInit() I made a call to teams service to get the details of the specified team from the backend and return it to view-user-teams.

The code responsible for that operation is shown below.

In services/teams I implemented the method getProjectTeam() which makes a http request to the backend and returns the team details data from the database.

Code for getProjectTeam()

In getProjectTeam() , I made a post request to the api using the if the chosen project and the team lead as request body.

The returned data will be the document that contains that project Id and team lead id sent in the request body, and since only one team can be assigned per project we can always expect only one object to be returned.

In the backend route file routes/teams I implemented the following code

When the route /get-user-team in routes/teams is called the block executes by firstly searching through the database for one document containing the team_lead_id and projectId sent in the request body.

Any matching document will be sent back as a response.

To view the team details on the front-end the user should navigate to /dashboard/teams, the view is shown in the screenshot below

The link to the github commit for this feature

https://github.com/olatundeee/projecteer/commit/f6ad94d1ca21199f515eb3ab797735765e14eba7

About Projecteer

To know more about what projecteer is about you can check out the introduction post for more information

https://steemit.com/utopian-io/@gotgame/project-introduction-projecteer-an-awesome-project-management-tool-for-remote-teams-and-creatives

How to contribute?

You can contribute to the project by forking and cloning the github repo(link shared at the top), running npm install in the project root directory(backend) and client directory to install all dependencies.

To start the backend server navigate to the root directory and run the following command

SET DEBUG=projecteer:* & npm start

To start the frontend server navigate to the client directory in the project folder and run the following command

npm start

Before working on the project kindly contact me on discord at the handle gotgame.

GitHub Account

https://github.com/olatundeee