Customize security (Angular)

In this step from the CRM Application tutorial we will customize the security settings:

• Add FirstName, LastName and Picture columns to the AspNetUsers table.
• Customize the user management pages - Add Application User, Application Users and optionally Edit Application User.
• Create some roles and add a couple of users.
• Set page permissions.

Extend the AspNetUsers table

Radzen applications come with a built-in security feature which relies on ASP.NET Core Identity. ASP.NET Core Identity is backed up by a set of tables that are created via Entity Framework Core migrations automatically the first time you log in your Radzen application.

Application users are stored in the AspNetUsers table which by default looks like this:

Yes, by default it has only the most basic info. Lets change that by adding FirstName, LastName and Picture columns. This time though we are not going to edit the database in SQL Server Management Studio or run SQL. Remember that ASP.NET Identity relies on Entity Framework Migrations which use code to create the underlying tables and columns.

1. Open server\project.csproj with Visual Studio (or the server directory with Visual Studio Code).

2. Add a new file server\Models\ApplicationUser.Custom.cs with the following content.

   using System;
   using System.Collections.Generic;
   using System.ComponentModel.DataAnnotations.Schema;
   using System.Runtime.Serialization;
   using Microsoft.AspNetCore.Identity;
   using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
   
   namespace RadzenCrm.Models
   {
       public partial class ApplicationUser : IdentityUser
       {
           public string FirstName {get; set;}
           public string LastName {get; set;}
           public string Picture {get; set;}
       }
   }
   

   The ApplicationUser class represents a record from the AspNetUsers table and by adding those three properties we extend it.

3. Add a new file server\Data\CrmContext.Custom.cs with the following content.

   using Microsoft.EntityFrameworkCore;
   
   using RadzenCrm.Models;
   
   namespace RadzenCrm.Data
   {
       public partial class CrmContext
       {
           partial void OnModelBuilding(ModelBuilder builder)
           {
               builder.Entity<ApplicationUser>().ToTable("AspNetUsers");
           }
       }
   }
   

4. Open a command prompt window and go to the server directory of the CRM application.
5. Run the following command (it will take some time to complete):

   dotnet ef migrations add ExtendApplicationUser -c ApplicationIdentityDbContext
   

   This command uses the Entity Framework Core tooling to add the FirstName, LastName and Picture columns to the AspNetUsers table.

Now that we have added three new columns it is time to update the Add and Edit Application User pages.

Update the user management pages

Radzen has scaffolded pages for managing application users. We will now update those pages to allow setting the new database columns.

We will start from the Add Application User page.

1. Open the Add Application User page in Radzen.
2. Select the Form component.
3. Add a new form field by clicking the + button next to the Fields label in the property grid. The new form field goes last. Scroll to the bottom of the property grid.
4. Type FirstName in the Property dropdown and then click Add FirstName. This specifies what property (database column) this form field binds to.
5. Check the Required check to make it a required form field.
6. Set Title to First Name. This is the label before the form field.
7. We can move the form field up the form field list as usually the first name is displayed first. Click the ^ button in the field header repeatedly until the First Name field becomes first.

Here are all the steps as a short video.

1. Perform steps 1 - 7 again for the LastName property. Move it so it is the second field in the form.
2. Add one last form field. Set Type to file and Property to Picture. This will allow uploading user pictures.

Optionally you can perform those above steps to add FirstName, LastName and Picture to the Edit Application User page.

Let’s now update the Application Users page to show FirstName, LastName and Picture in the DataGrid.

1. Open the Application Users page in Radzen.
2. Select the DataGrid component.
3. Add a new data grid column by clicking the + button next to the Columns label in the property grid. The new column goes last. Scroll to the bottom of the property grid.
4. Type FirstName in the Property dropdown and then click Add FirstName. This specifies what property (database column) this column will display.
5. Set Title to First Name. This sets the column header text.
6. Now perform 1-5 for the LastName column.

We now need to add a data grid column to display the Picture column of the AspNetUsers table.

1. Add a column for the Picture property by followign the steps above. Then click the Edit button next to Template. We need to add an Image component in this column to display the user picture stored in the database.
2. Drag and drop an Image component from the Radzen toolbox. Set its Path property to ${data.Picture}.
3. Go to the Style tab of the property grid. It allows you to specify various visual component settings. Set Width to 30px and Height to 30px.
4. Click End template editing.

Create roles and users

Now that we have customized the security pages it is time to add roles and users.

Add the roles

1. Run the application in Radzen and log in with admin/admin.
2. In your browser go to the application menu in the top right corner.
3. Click Roles. This loads the role management pages.
4. Add two roles: Sales Manager and Sales Representative.

Add the users

1. In your browser go to the application menu in the top right corner.
2. Click Users. This loads the user management pages.
3. Add a new user with the following attributes:
   • First Name: Jane
   • Last Name: Smith
   • Email: salesmanager@demo.radzen.com
   • Roles: check Sales Manager
   • Upload some photo for the Picture (we will use this)
   • Password and Confirm password: SalesManager1@
4. Add a second user with the following attributes:
   • First Name: John
   • Last Name: Doe
   • Email: salesrep@demo.radzen.com
   • Roles: check Sales Representative
   • Upload some photo for the Picture (we will use this)
   • Password and Confirm password: SalesRep1@

And we are done with the users!

Set page permissions

We would now allow only the members of the Sales Manager role to create new users and roles as well as opportunity statuses, task types and task statuses.

1. Go back to Radzen and stop the running application.
2. Right click the Add Application User page and choose Properties from the context menu.
3. Clear the existing Access and select only Sales Manager. This will make the Add Application User page available only to members of the Sales Manager role.
4. Repeat steps 2 and 3 for Application Users, Application Roles, Edit Application User, Add Application Role, etc.

We are now ready to Customize the CRUD pages.