Stint360 is a task management system with a frontend built using Angular and a backend powered by ASP .NET Web API. The system caters to three distinct roles: admin, manager, and employee, facilitating efficient task assignment, tracking, and collaboration within the organization.
Glimpse of Tech Stack Utilized
- Angular
- Asp.net core Web API
- Azure SQL Database
Front – End Tech Stack:
- Angular 16
- Material UI
- Apexchart.js
- Dependency Injection
- Sentry
- Reacting Forms
- Guards
- Routing
Back – End Tech Stack:
- .Net 7
- Entity Framework
- JSON Web Token for Authorization
- Role Based Authorization
- Database in Azure
- Azure App Services
- Serilog
Features of Stint360:
A versatile task management platform equipped with powerful authentication and authorization capabilities. This dynamic module caters specifically to employees, managers, and admins, offering seamless task assignment, real-time progress tracking, and efficient communication, all within a unified and user-friendly interface.
Unveiling the Power of STINT360: A Comprehensive Exploration of its Dynamic Modules
1. Authentication and authorization module
Authentication and authorization are critical modules within STINT360, ensuring secure access and controlled actions for users. In the development of this STINT360, the implementation of role-based authentication and authorization using JWT (JSON Web Tokens) in ASP.NET WebAPI and the integration of authguard and interceptors in Angular have been instrumental in bolstering the system’s security and access control.
Authentication is the process of verifying the identity of a user attempting to access the system. In STINT360, users must log in with their credentials (username and password) to gain access. By employing JWT, a widely-used industry standard for token-based authentication, the platform generates a unique and digitally signed token upon successful login. This token contains user-specific information and serves as proof of authentication during subsequent interactions.
Using JWT in ASP.NET WEB API provides a secure way to handle authentication and generate tokens. Upon successful login, a JWT token is issued to the user, containing claims like user ID, role, and expiration time. This token is signed with a secret key, ensuring its integrity and authenticity. Subsequent requests to the server include the JWT token in the authorization header, allowing the server to validate and identify the user, thus securing the APIs from unauthorized access.
JwtUtils.cs:
The JwtUtils class has methods to generate and validate JWT tokens with user claims such as UserId, UserName, and Role. The GenerateJwtToken method generates a token with a symmetric security key and specified claims for user identification. Meanwhile, the ValidateJwtToken method verifies the token’s authenticity, extracting and returning the UserId from the token’s claims. This robust approach ensures secure access to the task management platform and allows seamless role-based authorization for employees, managers, and admins
In user forgot password page, employees, admins, and managers can initiate the password recovery process. The path “https://portal-stint360.azurewebsites.net/authentication/forgot-password” leads to the Forgot Password component, where users can request a password reset. After requesting, users proceed to the OTP Verify component to verify their identity and securely reset their passwords, ensuring a streamlined and secure recovery experience.
In the password reset page, accessible through “https://portal-stint360.azurewebsites.net/authentication/reset-password?email=someone@gmail.com”, users can securely reset their passwords. The page features input fields for entering the new password and confirming it, with appropriate validation to ensure password strength and matching confirmation. After clicking the submit button, the new password is successfully updated, and users are redirected to the login page. Additionally, the page displays a snackbar to provide feedback on every successful password submission, enhancing the user experience with clear and timely notifications.
Authrepository.cs:
Login method:
The Login method accepts a username and password as parameters. It aims to authenticate the user’s login attempt by verifying the provided credentials against the stored password hash and salt in the database. If the user is found and the password matches, a JWT token is generated for the authenticated user. Additionally, for users with the role of “Manager,” the method checks if they are appointed before generating the JWT token. The method returns a ServiceResponse<string> object indicating the success or failure of the login attempt, along with appropriate messages or the JWT token upon successful authentication.
Verify method:
The Verify method is responsible for validating the One-Time Password (OTP) sent to a user’s email during the verification process. It takes the email and otp as input parameters and returns a ServiceResponse<string> object containing the result of the verification process.
ForgotPassword component:
The ForgotPassword method facilitates the password reset process for users who have forgotten their passwords. It takes the user’s email as input and returns a ServiceResponse<string> object indicating the status and outcome of the password reset request.
ResetPassword component:
authentication.service.ts
The AuthenticationService in the provided Angular code is responsible for handling user authentication and related actions within the STINT360 application. It communicates with the backend API ( ASP .NET Web API ) to perform login, registration, user verification, password reset, and other authentication-related functionalities
authguard.ts
The AuthGuard is an injectable service in the Angular application. It acts as a protective shield for specific routes and controls access based on the user’s authentication status and role.Upon activation, the AuthGuard first checks if the user is logged in by inspecting the credentials stored in the CredentialsService. If the user is authenticated, it proceeds with additional checks for role-based authorization. If the accessed route requires specific roles, it verifies if the user’s role matches any of the allowed roles defined in the route’s data[‘roles’]. If the user’s role is not authorized for the route, they are redirected to the login page or an appropriate location.
If the user is not logged in, the canActivate method redirects them to the login page, preserving the return URL to facilitate a seamless return to the desired route after successful authentication.
The teamAuthGuard is a utility function that serves as a helper for route guards using the AuthGuard. It allows for dependency injection of the AuthGuard and provides a convenient way to reuse the guard function for multiple routes.
Auth-header.interceptor.ts
The AuthHeadersInterceptor is an Angular HttpInterceptor that intercepts outgoing HTTP requests and enhances them with an authorization header when necessary. It plays a crucial role in securing API calls within the STINT360 application. The AuthHeadersInterceptor is injected with the CredentialsService, enabling access to the user’s authentication status and token information.
2 . Admin Module
An admin-created department list can be seen at https://portal-stint360.azurewebsites.net/dashboard/departments. Here, an administrator has the authority to establish a new department.
An admin-created manages are listed on the page at https://portal-stint360.azurewebsites.net/dashboard/managers. Here, an administrator has the authority to designate a new manager, remove a manager, or edit a manager.
An admin-created employeeare listed on the page at https://portal-stint360.azurewebsites.net/dashboard/employees. Here, an administrator has the authority to designate a new employee, remove an employee, or edit a employee.
LoaderInterceptor :
The LoaderInterceptor is an Angular HttpInterceptor that intercepts outgoing HTTP requests and shows a loading indicator during the network call. It is designed to enhance the user experience by providing visual feedback while data is being fetched from the server.
2. Manager Module
In STINT360, when a manager logs in, they gain access to a personalized dashboard displaying their profile details, as well as an overview of all tasks assigned to their employees. The dashboard features widgets showing the task count for each status and a donut chart illustrating the Employees Task Summary, which includes the distribution of tasks among different statuses. This comprehensive view empowers managers to efficiently monitor and manage their team’s task progress, fostering a more organized and productive work environment.
The dashboard data is efficiently fetched from a single endpoint, which provides the counts of tasks in each status. This data is then passed to the widgets responsible for displaying the task status count, enabling managers to have a real-time overview of their team’s task progress.’
When the manager clicks on the “Employee List” option, they are presented with a comprehensive view that displays all the employees under their supervision. This list includes the names and basic details of each employee, enabling the manager to quickly access and manage their team members efficiently.
The “Employee List” feature streamlines the process of accessing employee information, allowing managers to easily assign tasks and monitor progress.
“Employee List” is dynamically fetched from an endpoint using the manager’s unique ID as a parameter. When the manager clicks on this option, the platform makes a request to the designated endpoint, which then retrieves all the employees under that specific manager.
when the manager clicks on a particular employee from the “Employee List,” they are directed to the employee’s task page. On this page, the details of the selected employee are displayed, providing the manager with relevant information about the employee.
Additionally, the tasks assigned to the employee are shown on this page, including task details such as descriptions, due dates, and current status. This allows the manager to have a comprehensive view of all tasks assigned to the employee.
Furthermore, the manager has the capability to create new tasks for the employee directly from this page. They can also edit and delete existing tasks as needed, facilitating efficient task management.
When the employee updates the status of any task, the changes are automatically reflected on the task page. The manager can easily track the progress of the tasks assigned to the employee, enabling real-time monitoring of task statuses and overall performance.
3 . Employee Module
In STINT360, when an employee logs into the portal, they are greeted with their personalized dashboard. This dashboard showcases the employee’s profile details and provides an overview of their assigned tasks.
The dashboard includes widgets that display the count of tasks for each task status (e.g., “In Progress,” “Completed,” “Pending”). These widgets allow the employee to quickly grasp the current status of their tasks, facilitating better task management and prioritization.
Additionally, the employee task summary is visually represented using a donut chart. This chart illustrates the distribution of tasks among different task statuses, giving the employee a comprehensive view of their overall task progress.
when an employee clicks on “New Task,” they can create a update task and set its initial status as “In Progress.” This status indicates that the employee has started working on the task.To facilitate task status updates and seamless task management, the platform provides a bell icon in the header. The bell icon serves as a notification indicator, displaying the count of new tasks assigned to the employee.
when an employee clicks on “In Progress” tasks, they can access a list of tasks that are currently in progress. This list displays all tasks with the “In Progress” status assigned to the employee.
The employee can then choose a specific task and update its status to “Completed” once they have finished working on it. By marking the task as “Completed,” the employee signals that the task has been successfully finished.
When the employee updates a task’s status to “Completed,” the system triggers an automatic email notification to the manager. The notification email informs the manager that the task has been completed by the employee, allowing the manager to stay informed about task progress without the need for manual checks.
An automated process monitors task due dates. When the due date of a task is reached and the task is still marked as “In Progress,” the system automatically updates the task status to “Pending.” This ensures that tasks that are not completed by their due date are appropriately flagged for follow-up.
However, if a task has already been marked as “Completed” before the due date, the system will not check the due date again for that task. This allows employees to complete tasks ahead of schedule without being affected by the due date status change.
This approach streamlines task management by automating status updates based on due dates, helping employees and managers stay on top of pending tasks and ensuring a more efficient workflow within the organization.
The “Completed Task” section provides a list of all tasks that have reached their final status, which is “Completed.” This section serves as a comprehensive record of all completed tasks, allowing users to review and reference their past accomplishments.
The “Completed Task” section is valuable for both employees and managers. Employees can refer to this section to track their achievements and maintain a sense of accomplishment, while managers can use it for performance reviews and assessing overall team productivity.
4 .Deploying the STINT360 Frontend and Backend on Azure App Service:
We will delve into the process of deploying the STINT360 frontend and backend applications using Azure App Service, a powerful platform-as-a-service (PaaS) offering by Microsoft. Azure App Service simplifies the deployment and management of web applications, allowing us to effortlessly host both the Angular frontend (named portal-Stint360) and the ASP.NET Web API backend (named Stint360) on the cloud. Let’s explore how this seamless deployment enhances scalability, reliability, and ease of management for the STINT360 platform.
Azure App Service: A Brief Overview:
Azure App Service provides a fully-managed environment for hosting web applications, enabling developers to focus on building and deploying their applications without worrying about server infrastructure. It offers features like automatic scaling, continuous deployment, custom domains, SSL support, and built-in monitoring and diagnostics.
Deploying portal-Stint360 (Angular Frontend):
The Stint360 frontend, named portal-Stint360, is developed using Angular. To deploy it on Azure App Service, we start by creating a new web app in the Azure portal. We can choose the appropriate region for hosting, such as the one closest to our target users to reduce latency.
portal-Stint360(ANGULAR)
Deploying Stint360 (ASP.NET Web API Backend):
The Stint360 backend, built with ASP.NET Web API, powers the core functionalities of the platform. Similarly, we create a new web app in Azure App Service for hosting the backend application. By selecting the appropriate stack (in this case, ASP.NET), Azure automatically configures the necessary environment to support the Web API.
Stint360 (ASP .NET WEBAPI)
Conclusion:
In conclusion, STINT360 is a robust task management system developed by our talented team of three members: myself, Nikil Srinivasan, and Sujith Sairam, under the guidance and expertise of our mentor, Mr. Syed Haroon and Arunkumar Kumaresan. Throughout the development process, we aimed to create an efficient and user-friendly platform that facilitates task assignment and tracking for employees, managers.