Having created the functionality and created routes for the functionality it's a relatively straightforward process to integrate this into the existing UI. The current roles screen which was generated by the scaffolder has three icons on the right side of the line for each role. One to view the role, one to edit the role and one to delete that role. With a small change we can introduce an additional icon which, when clicked, will allow us to assign permissions for that role. Edit \resources\views\users\tables.blade.php. Add the following block into the list of icons with links for each user in the list
<a href="{{ route('users.assignroles', [$users->id]) }}" class='btn btn-default btn-xs'>
<i class="far fa-user-tag"></i>
</a>
To tidy up the screen a little bit remove the blocks highlighted in red and add the block highlighted in green.
This code adds an additional icon to the Users Browse screen which will link to the users.assignroles route passing the id of whichever user is selected by the individual assigning roles. This appears as follows
Now let's do the same with the roles screen to introduce an additional icon into the list of funcions you can perform on each role. To do this edit the file \resources\views\roles\tables.blade.php. Add the following block into the list of icons with links for each role in the list
<a href="{{ route('roles.assignpermissions', [$roles->id]) }}" class='btn btn-default btn-xs'>
<i class="fas fa-unlock-alt"></i>
</a>
Similarly, this code adds an additional icon to Roles Browse page which will link to the roles.assignpermissions route passing the id of the Role selected by the user. This appears as follows
Now we have all the elements of a ui which will allow us to easily
- create roles
- assign users into those roles
- create permissions
- grant permissions to roles
All that remains is to implement the mechanism which protects routes so that they can only be accessed by people with the appropriate permissions. We'll do that in the next post.