Allowing only 1 role per user using Asp.Net Boilerplate 5.5.0.0

Question

I am using Asp.Net Boilerplate (ABP Zero) to manage users in multi-tenant environment. I created new roles within the Angular app and permissions (added to the .net core backend code) to those roles. I am able to select the roles and all of the permissions work as designed. However, within the Angular front-end panel, I would like to only allow and admin to assign "1" role to a user instead of being able to click multiple roles from the checkboxes that displays each role (see my screenshot). Can someone illustrate what needs to be changed within the app's code to accomplish this? I only want to allow 1 role to be selected. If anyone knows enough about the ABP code to show me how to accomplish this, I would really appreciate it. Thanks!

Answer 1

Ok, this was a fairly easy fix. I changed the <input type="checkbox" ...> to ><input type="radio" ...> and gave it a name="role_" attribute. this solved the problem since the "name" attribute will set up the selections as a "group."

This change takes place in the following ABP files:

- app/users/edit-user-dialog.component.html:

<input
    name="role_"
    type="radio"
    class="custom-control-input"
    [id]="'role_' + i"
    [checked]="isRoleChecked(role.normalizedName)"
    (change)="onRoleChange(role, $event)" 
    [disabled]="disableRoleCheckBoxes"
/>

- app/users/create-user-dialog.component.html:

<input
   name="role_"
   type="radio"
   class="custom-control-input"
   [id]="'role_' + i"
   [checked]="isRoleChecked(role.normalizedName)"
   (change)="onRoleChange(role, $event)"
/>

I hope this will help anyone that comes along looking for this kind of fix.