Implementing Multiple User Roles with Role-Based Authorization in Dotvvm — Part Two
Introduction
In the first part of this article, we created an empty Dotvvm Web Application and added authentication/authorization to it. We also very clearly highlighted the difference between the two and use cases. In this second part, we will continue to build out our leave management application.
Adding a View Employees Page
We need a page that lets us view all employees in the system. This page will be accessible to only system administrators and HR personnel.
Add a folder named Administration to the Views Folder, In this folder, create a Employees.dothtml page. At the prompt to create a backing ViewModel class, accept all options and embed in a MasterPage.
Open up UserService.cs and add the method below
The method simply returns all the users in the system as an IEnumerable. Next, open EmployeesViewModel and add the codeblock below
We are simply getting the employees from the UserService class and making it available to our View. The Authorize Attribute makes sure that only a user with a SystemAdministrator role can access this view.
Open the View and add the markup code below
Here we are binding the Employees List from the view model to a Dotvvm GridView. Run the project and navigate to /Administration/Employees and you should see the users in the application (Currently just one)
Adding the Create Employee Feature
System Administrators need to be able to create new employees and assign them a role. To add this feature, first we add a method that handles User creation in our UserService, then proceed to add the view and viewmodel for the page.
Open UserService.cs and add the method below to it
This method attempts to create a new user with a username and password, and if successful, adds the user to a specified role.
Add a folder named Administration to the Views Folder, In this folder, create a CreateEmployee.dothtml page. At the prompt to create a backing ViewModel class, accept all options and embed in a MasterPage.
Open up CreateEmployeeViewModel.cs and add the block of code below
We are using the Dotvvm ListBox in this example. We take the user name and password and selected role entered and creates a new account in that role. If successful, we direct to out employees page where we can see the new user.
Open CreateEmployee.dothtml and add the markup code
The only unfamiliar addition to this page is the Dotvvm Listbox, which we have bound to our roles list in the view model, and bound the selected Item to SelectedRole, this way our System Administrator can select a role when a user a created and that user is added to same role.
We can now mark our Create Employee Feature complete.
Add Request for Leave Feature
Our next task is to make sure our employees can request for leave. To do this, we need:
An Entity Class mapped to a database table to hold Leave Requests
A Service class that handles Request Creation, Status Updates, etc
A ViewPage and ViewModel for the LeaveRequest Page
Creating a Leave Application Entity and Database Table
Create an Enums folder and add the file LeaveApplicationStatus.cs in it with the content below
Now add an Entities folder and add a LeaveApplication.cs Entity class with the code shown below
This is going to be our entity class for leave applications, open up ApplicationDbContext and edit it as shown below
This creates a Table for leave applications when we create and run migrations.
Add a Leave Application Service class
Add a LeaveApplicationService.cs class to the services folder and add the code below to it
The service class has three methods GetLeaveApplicationsByUserId which returns applications for a single user, GetLeaveApplicatons returns all leave applications in the system and CreateLeaveRequest adds a new request to the database.
Register this service class in Startup.cs ConfigureServices method with services.AddTransient(typeof(LeaveApplicationService));
Add a Page for Employees to View Status of Leave Applications
We need a page for employees to view the status of their leave applications, this page will be accessible to all employee types as anyone should be able to request for a leave.
Add an Employee Folder to Views Folder and Add a new dothtml page “LeaveApplications.dothtml” with the backing ViewModels/Employee/LeaveApplicationsViewModel.cs class.
Add the code below to the class
This overridden PreRender class simply gets the current user’s id from the context and uses it to get their leave applications from the database. This list is bound to the view.
Open up the LeaveApplications View page and Add the dothtml markup below
Run the application, log in and navigate to https://localhost:5001/employee/leaveapplications . You should see the message “you don’t have any leave applications”. Let us add a page for creating those.
Add a Page for Creating Leave Applications
Add a new DotVVM View CreateLeaveApplication.dothtml and add the corresponding ViewModel Page. Open the View Model and add the code below
Here we are simply creating a LeaveApplication Object and passing it to our service class to be stored and redirecting. Add the code below to the View Page.
Now run the application, you can log in with the admin account, create a new employee account and use a different browser to log in to this new account.
Navigate to /employees/createleaveapplication and fill in the message, when you click submit you are redirected to the /employees/leaveapplications page and this time we see that we have one new leave application with a Pending Status.
Conclusion
This concludes part two of our project. We are now able to create a user in different roles, create and view a list of leave applications. In the Part 3 we will create pages and functionality necessary for HR to approve or reject these requests.
