When you access the application for the first time, you will be
redirected to the login page. Clicking on the sign up link will
direct you to the registration form displayed on the left. Within
the register component I created three fetch statements, posting
data to Firebase Authentication, Firebase Realtime Database, and the
Stream API.
Google Firebase is an API that removes the need to write back-end
code. Firebase Authentication takes the user's email and
password and attaches a token to it. That information is stored in
my Firebase account as a user profile with a unique identifier.
Firebase doesn't allow anybody, including myself, the account
owner to view the user's password. Firebase Realtime Database
takes the data entered by the user, such as display name, phone
number, etcetera and creates a profile. The data within each user
profile I will later use throughout the app.
I created a server to take the user's data and configure a new
user in the Stream API. The password entered by the user is saved in
Stream as a hash through bcrypt. Below you can see the code that I
wrote to send user data to Stream. You will notice in the code an
api key, secret and id, that was given to me by Stream when I
created an account.
When you login to the application your email, password and token is
used for authentication. Once Firebase Authentication confirms your
credentials another GET request is sent to the Firebase Realtime
Database requesting the profile that matches the email inputted when
logging in. Once this profile is found a POST request is sent to the
Stream API containing your credentials. The Stream API responds with a
token, userID, and the other data inputted on the sign up page. This
data is stored in cookies so we can use it to connect the user to
Stream after we are logged in.
The photo above shows an example of the homepage.
A user can be assigned to one of four roles:
-
Developer
Can only modify tickets
which have been submitted.
-
Submitter
Has all the permissions
of a developer, but also has the ability to create and allocate new
tickets.
-
Project Manager
Has all submitter
permissions, but can also create new projects and assign users to
projects.
-
Administator
Has all project
manager permissions, but can also delete tickets and assign users to
another role.
Selecting the create ticket tab on the sidebar will direct you to the
page shown above. In my database there is a table entitled bugs that
contains all created tickets. When the end user completes the form and
clicks on create ticket, a POST API request sends the data to the
database as shown below.
The view tickets page contains another chart I created using
react-bootstrap-table2.
Each row consists of a new ticket, as shown below.
If you click the More details button, a modal will display showing
the details for each ticket. I was able to pull the ticket details
from the database by using the filter() method. In the filter method
I compare the row ID and Title to the corresponding values in the
database, then return only that value.
The My Tickets tab contains tickets which have been submitted by the
end-user or assigned to the end-user. I retrieved this information
from the database by using the user's unique ID number to filter
out tickets. This was accomplished by taking the username and
comparing it to the values in the Submitter or Assigned Dev's
column.
The My Projects page allows the end user to create a new project,
provided they are a Project Manager or Administrator. The end user can
also view their assigned projects on this page. When an end-user
creates a new project, the end-user will be asked to complete the
Project Name, Project Description and Assigned Personnel fields. The
Assigned Personnel field takes the user ID's of the selected
users and inputs them into an array. Below, you can see below the POST
API request that I created for exporting this data.
As a default, new users are assigned to the developer position. Only
the administrator can change the end-user's role.
At the bottom of the Manage User Roles page you will find a react
bootstrap table containing all the users name, email, and current
role.
Lastly, for security reasons, I implemented an idle timer. The idle
timer triggers a pop-up window after two minutes of inactivity. I used
an npm package called
react-idle-timer
to achieve this functionality. In addition, I also used localStorage
to store the end-user's login information. With this extra
feature, the end user can open the web browser and be brought back to
the current page without having to log back in.
