Refactored project to module structure

Moonlight.Frontend/Admin/Users/Index.razor

@@ -0,0 +1,42 @@
+@page "/admin/users"
+@using LucideBlazor
+@using Microsoft.AspNetCore.Authorization
+@using Moonlight.Frontend.Admin.Users.Roles
+@using Moonlight.Frontend.Admin.Users.Users
+@using Moonlight.Shared
+@using ShadcnBlazor.Tab
+
+@inject NavigationManager Navigation
+
+@attribute [Authorize(Policy = Permissions.Users.View)]
+
+<Tabs DefaultValue="@(Tab ?? "users")" OnValueChanged="OnTabChanged">
+    <TabsList ClassName="inline-flex w-full lg:w-fit justify-start overflow-x-auto overflow-y-hidden">
+        <TabsTrigger Value="users">
+            <UserRoundIcon/>
+            Users
+        </TabsTrigger>
+        <TabsTrigger Value="roles">
+            <UsersRoundIcon/>
+            Roles
+        </TabsTrigger>
+    </TabsList>
+    <TabsContent Value="users">
+        <Users/>
+    </TabsContent>
+    <TabsContent Value="roles">
+        <Roles/>
+    </TabsContent>
+</Tabs>
+
+@code
+{
+    [SupplyParameterFromQuery(Name = "tab")]
+    [Parameter]
+    public string? Tab { get; set; }
+
+    private void OnTabChanged(string name)
+    {
+        Navigation.NavigateTo($"/admin/users?tab={name}");
+    }
+}

Moonlight.Frontend/Admin/Users/Roles/CreateRoleDialog.razor

@@ -0,0 +1,96 @@
+@using Moonlight.Frontend.Admin.Users.Shared
+@using Moonlight.Frontend.Infrastructure.Helpers
+@using Moonlight.Shared.Admin.Users.Roles
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
+@using ShadcnBlazor.Inputs
+@using SerializationContext = Moonlight.Shared.SerializationContext
+
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@inject HttpClient HttpClient
+@inject ToastService ToastService
+
+<DialogHeader>
+    <DialogTitle>
+        Create new role
+    </DialogTitle>
+    <DialogDescription>
+        Create a new role by giving it a name, a description and the permissions it should grant to its members
+    </DialogDescription>
+</DialogHeader>
+
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
+        <FormValidationSummary/>
+        <DataAnnotationsValidator/>
+
+        <FieldSet>
+            <Field>
+                <FieldLabel for="roleName">Name</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Name"
+                    id="roleName"
+                    placeholder="My fancy role"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
+                                    placeholder="Describe what the role should be used for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
+
+@code
+{
+    [Parameter] public Func<Task> OnSubmit { get; set; }
+
+    private CreateRoleDto Request;
+    private List<string> Permissions;
+
+    protected override void OnInitialized()
+    {
+        Request = new CreateRoleDto
+        {
+            Permissions = []
+        };
+
+        Permissions = new List<string>();
+    }
+
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
+    {
+        Request.Permissions = Permissions.ToArray();
+
+        var response = await HttpClient.PostAsJsonAsync(
+            "api/admin/roles",
+            Request,
+            SerializationContext.Default.Options
+        );
+
+        if (!response.IsSuccessStatusCode)
+        {
+            await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
+            return false;
+        }
+
+        await ToastService.SuccessAsync("Role creation", $"Role {Request.Name} has been successfully created");
+
+        await OnSubmit.Invoke();
+        await CloseAsync();
+
+        return true;
+    }
+}

Moonlight.Frontend/Admin/Users/Roles/ManageRoleMembersDialog.razor

@@ -0,0 +1,116 @@
+@using LucideBlazor
+@using Moonlight.Shared.Admin.Users.Roles
+@using Moonlight.Shared.Admin.Users.Users
+@using Moonlight.Shared.Shared
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.DataGrids
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Comboboxes
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Labels
+@using ShadcnBlazor.Tabels
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@inject HttpClient HttpClient
+
+<DialogHeader>
+    <DialogTitle>
+        Manage members of @Role.Name
+    </DialogTitle>
+    <DialogDescription>
+        Manage members of this role
+    </DialogDescription>
+</DialogHeader>
+
+<div class="grid gap-2 mt-5">
+    <Label>Add new member</Label>
+    <div class="flex justify-start gap-1">
+        <Combobox @bind-Value="SelectedUser"
+                  ClassName="w-[200px]"
+                  FieldPlaceholder="Select user"
+                  SearchPlaceholder="Search user"
+                  ValueSelector="dto => dto.Username"
+                  Source="LoadUsersAsync"/>
+        <WButton OnClick="AddAsync" Variant="ButtonVariant.Outline" Size="ButtonSize.Icon">
+            <PlusIcon/>
+        </WButton>
+    </div>
+</div>
+<div class="mt-3">
+    <DataGrid @ref="Grid"
+              TGridItem="UserDto"
+              ColumnVisibility="false"
+              EnableSearch="true"
+              EnableLiveSearch="true"
+              Loader="LoadAsync">
+        <PropertyColumn Field="dto => dto.Username"/>
+        <PropertyColumn Field="dto => dto.Email"/>
+        <TemplateColumn>
+            <CellTemplate>
+                <TableCell>
+                    <div class="flex justify-end me-1.5">
+                        <WButton OnClick="_ => RemoveAsync(context)" Variant="ButtonVariant.Destructive"
+                                 Size="ButtonSize.Icon">
+                            <TrashIcon/>
+                        </WButton>
+                    </div>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+    </DataGrid>
+</div>
+
+@code
+{
+    [Parameter] public RoleDto Role { get; set; }
+
+    private UserDto? SelectedUser;
+    private DataGrid<UserDto> Grid;
+
+    private async Task<DataGridResponse<UserDto>> LoadAsync(DataGridRequest<UserDto> request)
+    {
+        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
+
+        if (!string.IsNullOrWhiteSpace(request.SearchTerm))
+            query += $"&searchTerm={request.SearchTerm}";
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<UserDto>>(
+            $"api/admin/roles/{Role.Id}/members{query}"
+        );
+
+        return new DataGridResponse<UserDto>(response!.Data, response.TotalLength);
+    }
+
+    private async Task<UserDto[]> LoadUsersAsync(string? searchTerm)
+    {
+        var query = "?startIndex=0&length=100";
+
+        if (!string.IsNullOrWhiteSpace(searchTerm))
+            query += $"&searchTerm={searchTerm}";
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<UserDto>>(
+            $"api/admin/roles/{Role.Id}/members/available{query}"
+        );
+
+        return response!.Data;
+    }
+
+    private async Task AddAsync()
+    {
+        if (SelectedUser == null)
+            return;
+
+        await HttpClient.PutAsync($"api/admin/roles/{Role.Id}/members/{SelectedUser.Id}", null);
+
+        SelectedUser = null;
+        await InvokeAsync(StateHasChanged);
+
+        await Grid.RefreshAsync();
+    }
+
+    private async Task RemoveAsync(UserDto user)
+    {
+        await HttpClient.DeleteAsync($"api/admin/roles/{Role.Id}/members/{user.Id}");
+        await Grid.RefreshAsync();
+    }
+}

Moonlight.Frontend/Admin/Users/Roles/RoleMapper.cs

@@ -0,0 +1,13 @@
+using System.Diagnostics.CodeAnalysis;
+using Moonlight.Shared.Admin.Users.Roles;
+using Riok.Mapperly.Abstractions;
+
+namespace Moonlight.Frontend.Admin.Users.Roles;
+
+[Mapper]
+[SuppressMessage("Mapper", "RMG020:No members are mapped in an object mapping")]
+[SuppressMessage("Mapper", "RMG012:No members are mapped in an object mapping")]
+public static partial class RoleMapper
+{
+    public static partial UpdateRoleDto ToUpdate(RoleDto role);
+}

Moonlight.Frontend/Admin/Users/Roles/Roles.razor

@@ -0,0 +1,174 @@
+@using LucideBlazor
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Moonlight.Shared
+@using Moonlight.Shared.Admin.Users.Roles
+@using Moonlight.Shared.Shared
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.DataGrids
+@using ShadcnBlazor.Dropdowns
+@using ShadcnBlazor.Extras.AlertDialogs
+@using ShadcnBlazor.Extras.Dialogs
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Tabels
+@using SerializationContext = Moonlight.Shared.SerializationContext
+
+@inject HttpClient HttpClient
+@inject DialogService DialogService
+@inject ToastService ToastService
+@inject AlertDialogService AlertDialogService
+@inject IAuthorizationService AuthorizationService
+
+<div class="flex flex-row justify-between mt-5">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Roles</h1>
+        <div class="text-muted-foreground">
+            Manage roles, their members and permissions
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button @onclick="CreateAsync" disabled="@(!CreateAccess.Succeeded)">
+            <PlusIcon/>
+            Create
+        </Button>
+    </div>
+</div>
+
+<div class="mt-3">
+    <DataGrid @ref="Grid" TGridItem="RoleDto" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
+        <PropertyColumn Field="u => u.Id"/>
+        <TemplateColumn Title="Name" IsFilterable="true" Identifier="@nameof(RoleDto.Name)">
+            <HeadTemplate>
+                <TableHead>Name</TableHead>
+            </HeadTemplate>
+            <CellTemplate>
+                <TableCell>
+                    <a class="text-primary" href="#" @onclick="_ => MembersAsync(context)" @onclick:preventDefault>
+                        @context.Name
+                    </a>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+        <PropertyColumn Title="Description" Field="r => r.Description"/>
+        <PropertyColumn Title="Members" Field="r => r.MemberCount"/>
+        <TemplateColumn>
+            <CellTemplate>
+                <TableCell>
+                    <div class="flex flex-row items-center justify-end me-3">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Slot Context="dropdownSlot">
+                                    <Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost"
+                                            @attributes="dropdownSlot">
+                                        <EllipsisIcon/>
+                                    </Button>
+                                </Slot>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent SideOffset="2">
+                                <DropdownMenuItem OnClick="() => MembersAsync(context)"
+                                                  Disabled="@(!MembersAccess.Succeeded)">
+                                    Members
+                                    <DropdownMenuShortcut>
+                                        <UsersRoundIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => EditAsync(context)"
+                                                  Disabled="@(!EditAccess.Succeeded)">
+                                    Edit
+                                    <DropdownMenuShortcut>
+                                        <PenIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => DeleteAsync(context)"
+                                                  Variant="DropdownMenuItemVariant.Destructive"
+                                                  Disabled="@(!DeleteAccess.Succeeded)">
+                                    Delete
+                                    <DropdownMenuShortcut>
+                                        <TrashIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+    </DataGrid>
+</div>
+
+@code
+{
+    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
+
+    private DataGrid<RoleDto> Grid;
+
+    private AuthorizationResult MembersAccess;
+    private AuthorizationResult EditAccess;
+    private AuthorizationResult DeleteAccess;
+    private AuthorizationResult CreateAccess;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthState;
+
+        MembersAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Roles.Members);
+        EditAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Roles.Edit);
+        DeleteAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Roles.Delete);
+        CreateAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Roles.Create);
+    }
+
+    private async Task<DataGridResponse<RoleDto>> LoadAsync(DataGridRequest<RoleDto> request)
+    {
+        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
+        var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<RoleDto>>(
+            $"api/admin/roles{query}&filterOptions={filterOptions}",
+            SerializationContext.Default.Options
+        );
+
+        return new DataGridResponse<RoleDto>(response!.Data, response.TotalLength);
+    }
+
+    private async Task CreateAsync()
+    {
+        await DialogService.LaunchAsync<CreateRoleDialog>(parameters => { parameters[nameof(CreateRoleDialog.OnSubmit)] = async Task () => { await Grid.RefreshAsync(); }; });
+    }
+
+    private async Task EditAsync(RoleDto role)
+    {
+        await DialogService.LaunchAsync<UpdateRoleDialog>(parameters =>
+        {
+            parameters[nameof(UpdateRoleDialog.Role)] = role;
+            parameters[nameof(UpdateRoleDialog.OnSubmit)] = async Task () => { await Grid.RefreshAsync(); };
+        });
+    }
+
+    private async Task MembersAsync(RoleDto role)
+    {
+        if (!MembersAccess.Succeeded)
+        {
+            await ToastService.ErrorAsync("Permission denied", "You dont have the required permission to manage members");
+            return;
+        }
+
+        await DialogService.LaunchAsync<ManageRoleMembersDialog>(parameters => { parameters[nameof(ManageRoleMembersDialog.Role)] = role; }, model => { model.ClassName = "sm:max-w-xl"; });
+    }
+
+    private async Task DeleteAsync(RoleDto role)
+    {
+        await AlertDialogService.ConfirmDangerAsync(
+            $"Deletion of role {role.Name}",
+            $"Do you really want to delete the role {role.Name} with {role.MemberCount} members? This action cannot be undone",
+            async () =>
+            {
+                var response = await HttpClient.DeleteAsync($"api/admin/roles/{role.Id}");
+                response.EnsureSuccessStatusCode();
+
+                await ToastService.SuccessAsync("User deletion", $"Successfully deleted role {role.Name}");
+
+                await Grid.RefreshAsync();
+            }
+        );
+    }
+}

Moonlight.Frontend/Admin/Users/Roles/UpdateRoleDialog.razor

@@ -0,0 +1,93 @@
+@using Moonlight.Frontend.Admin.Users.Shared
+@using Moonlight.Frontend.Infrastructure.Helpers
+@using Moonlight.Shared.Admin.Users.Roles
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
+@using ShadcnBlazor.Inputs
+@using SerializationContext = Moonlight.Shared.SerializationContext
+
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@inject HttpClient HttpClient
+@inject ToastService ToastService
+
+<DialogHeader>
+    <DialogTitle>
+        Update @Role.Name
+    </DialogTitle>
+    <DialogDescription>
+        Update name, description and the permissions the role should grant to its members
+    </DialogDescription>
+</DialogHeader>
+
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
+        <FormValidationSummary/>
+        <DataAnnotationsValidator/>
+
+        <FieldSet>
+            <Field>
+                <FieldLabel for="roleName">Name</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Name"
+                    id="roleName"
+                    placeholder="My fancy role"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
+                                    placeholder="Describe what the role should be used for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
+
+@code
+{
+    [Parameter] public Func<Task> OnSubmit { get; set; }
+    [Parameter] public RoleDto Role { get; set; }
+
+    private UpdateRoleDto Request;
+    private List<string> Permissions;
+
+    protected override void OnInitialized()
+    {
+        Request = RoleMapper.ToUpdate(Role);
+        Permissions = Role.Permissions.ToList();
+    }
+
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
+    {
+        Request.Permissions = Permissions.ToArray();
+
+        var response = await HttpClient.PatchAsJsonAsync(
+            $"api/admin/roles/{Role.Id}",
+            Request,
+            SerializationContext.Default.Options
+        );
+
+        if (!response.IsSuccessStatusCode)
+        {
+            await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
+            return false;
+        }
+
+        await ToastService.SuccessAsync("Role update", $"Role {Request.Name} has been successfully updated");
+
+        await OnSubmit.Invoke();
+        await CloseAsync();
+
+        return true;
+    }
+}

Moonlight.Frontend/Admin/Users/Shared/Permission.cs

@@ -0,0 +1,15 @@
+namespace Moonlight.Frontend.Admin.Users.Shared;
+
+public class Permission
+{
+    public Permission(string identifier, string name, string description)
+    {
+        Identifier = identifier;
+        Name = name;
+        Description = description;
+    }
+
+    public string Identifier { get; init; }
+    public string Name { get; init; }
+    public string Description { get; init; }
+}

Moonlight.Frontend/Admin/Users/Shared/PermissionCategory.cs

@@ -0,0 +1,22 @@
+using System.Diagnostics.CodeAnalysis;
+
+namespace Moonlight.Frontend.Admin.Users.Shared;
+
+public record PermissionCategory
+{
+    public PermissionCategory(string name, Type icon, Permission[] permissions)
+    {
+        Name = name;
+        Icon = icon;
+        Permissions = permissions;
+    }
+
+    public string Name { get; init; }
+
+    // Used to prevent the IL-Trimming from removing this type as its dynamically assigned a type, and we
+    // need it to work properly
+    [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
+    public Type Icon { get; init; }
+
+    public Permission[] Permissions { get; init; }
+}

Moonlight.Frontend/Admin/Users/Shared/PermissionSelector.razor

@@ -0,0 +1,83 @@
+@using Moonlight.Frontend.Infrastructure.Hooks
+@using ShadcnBlazor.Accordions
+@using ShadcnBlazor.Checkboxes
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Labels
+@inject IEnumerable<IPermissionProvider> Providers
+
+<LazyLoader Load="LoadAsync">
+    <Accordion ClassName="flex w-full flex-col gap-2 overflow-y-auto max-h-80 scrollbar-thin"
+               Type="AccordionType.Multiple">
+        @foreach (var category in Categories)
+        {
+            <AccordionItem
+                ClassName="rounded-lg border bg-background px-4 last:border-b"
+                Value="@category.Name"
+                @key="category.Name">
+                <AccordionTrigger className="group hover:no-underline [&>svg]:hidden">
+                    <div class="flex w-full items-center gap-3">
+                        <div class="relative size-4 shrink-0">
+                            <DynamicComponent Type="category.Icon" Parameters="IconParameters"/>
+                        </div>
+                        <span class="flex-1 text-left">@category.Name</span>
+                    </div>
+                </AccordionTrigger>
+                <AccordionContent ClassName="ps-7">
+                    <div class="grid gap-3 grid-cols-2">
+                        @foreach (var permission in category.Permissions)
+                        {
+                            <div class="flex flex-row gap-x-2">
+                                @if (Permissions.Contains(permission.Identifier))
+                                {
+                                    <Checkbox ValueChanged="b => HandleToggle(permission.Identifier, b)"
+                                              DefaultValue="true"
+                                              id="@permission.Identifier"/>
+                                }
+                                else
+                                {
+                                    <Checkbox ValueChanged="b => HandleToggle(permission.Identifier, b)"
+                                              DefaultValue="false"
+                                              id="@permission.Identifier"/>
+                                }
+                                <Label for="@permission.Identifier">@permission.Name</Label>
+                            </div>
+                        }
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+        }
+    </Accordion>
+</LazyLoader>
+
+@code
+{
+    [Parameter] public List<string> Permissions { get; set; } = new();
+
+    private static readonly Dictionary<string, object> IconParameters = new()
+    {
+        ["ClassName"] = "absolute inset-0 size-4 text-muted-foreground"
+    };
+
+    private readonly List<PermissionCategory> Categories = new();
+
+    private async Task LoadAsync(LazyLoader _)
+    {
+        foreach (var provider in Providers)
+        {
+            Categories.AddRange(
+                await provider.GetPermissionsAsync()
+            );
+        }
+    }
+
+    private void HandleToggle(string permission, bool toggle)
+    {
+        if (toggle)
+        {
+            if (!Permissions.Contains(permission))
+                Permissions.Add(permission);
+        }
+        else
+            Permissions.Remove(permission);
+    }
+}

Moonlight.Frontend/Admin/Users/Users/CreateUserDialog.razor

@@ -0,0 +1,87 @@
+@using Moonlight.Frontend.Infrastructure.Helpers
+@using Moonlight.Shared.Admin.Users.Users
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
+@using ShadcnBlazor.Inputs
+@using SerializationContext = Moonlight.Shared.SerializationContext
+
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@inject HttpClient HttpClient
+@inject ToastService ToastService
+
+<DialogHeader>
+    <DialogTitle>
+        Create new user
+    </DialogTitle>
+    <DialogDescription>
+        Create a new user by giving it a username and an email address
+    </DialogDescription>
+</DialogHeader>
+
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+
+    <FieldGroup>
+        <FormValidationSummary/>
+        <DataAnnotationsValidator/>
+
+        <FieldSet>
+            <Field>
+                <FieldLabel for="username">Username</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Username"
+                    id="username"
+                    placeholder="Name of the user"/>
+            </Field>
+            <Field>
+                <FieldLabel for="emailAddress">Email Address</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Email"
+                    id="emailAddress"
+                    placeholder="email@of.user"/>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
+
+@code
+{
+    [Parameter] public Func<Task> OnCompleted { get; set; }
+
+    private CreateUserDto Request;
+
+    protected override void OnInitialized()
+    {
+        Request = new CreateUserDto();
+    }
+
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
+    {
+        var response = await HttpClient.PostAsJsonAsync(
+            "/api/admin/users",
+            Request,
+            SerializationContext.Default.Options
+        );
+
+        if (!response.IsSuccessStatusCode)
+        {
+            await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
+            return false;
+        }
+
+        await ToastService.SuccessAsync(
+            "User creation",
+            $"Successfully created user {Request.Username}"
+        );
+
+        await OnCompleted.Invoke();
+        await CloseAsync();
+
+        return true;
+    }
+}

Moonlight.Frontend/Admin/Users/Users/UpdateUserDialog.razor

@@ -0,0 +1,84 @@
+@using Moonlight.Frontend.Infrastructure.Helpers
+@using Moonlight.Shared.Admin.Users.Users
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
+@using ShadcnBlazor.Inputs
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@inject HttpClient HttpClient
+@inject ToastService ToastService
+
+<DialogHeader>
+    <DialogTitle>
+        Update @User.Username
+    </DialogTitle>
+    <DialogDescription>
+        Update the user by giving it a username and an email address
+    </DialogDescription>
+</DialogHeader>
+
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
+        <FormValidationSummary/>
+        <DataAnnotationsValidator/>
+
+        <FieldSet>
+            <Field>
+                <FieldLabel for="username">Username</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Username"
+                    id="username"
+                    placeholder="Name of the user"/>
+            </Field>
+            <Field>
+                <FieldLabel for="emailAddress">Email Address</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Email"
+                    id="emailAddress"
+                    placeholder="email@of.user"/>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
+
+@code
+{
+    [Parameter] public Func<Task> OnCompleted { get; set; }
+    [Parameter] public UserDto User { get; set; }
+
+    private UpdateUserDto Request;
+
+    protected override void OnInitialized()
+    {
+        Request = UserMapper.ToUpdate(User);
+    }
+
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
+    {
+        var response = await HttpClient.PatchAsJsonAsync(
+            $"/api/admin/users/{User.Id}",
+            Request
+        );
+
+        if (!response.IsSuccessStatusCode)
+        {
+            await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
+            return false;
+        }
+
+        await ToastService.SuccessAsync(
+            "User update",
+            $"Successfully updated user {Request.Username}"
+        );
+
+        await OnCompleted.Invoke();
+        await CloseAsync();
+
+        return true;
+    }
+}

Moonlight.Frontend/Admin/Users/Users/UserMapper.cs

@@ -0,0 +1,13 @@
+using System.Diagnostics.CodeAnalysis;
+using Moonlight.Shared.Admin.Users.Users;
+using Riok.Mapperly.Abstractions;
+
+namespace Moonlight.Frontend.Admin.Users.Users;
+
+[Mapper]
+[SuppressMessage("Mapper", "RMG020:No members are mapped in an object mapping")]
+[SuppressMessage("Mapper", "RMG012:No members are mapped in an object mapping")]
+public static partial class UserMapper
+{
+    public static partial UpdateUserDto ToUpdate(UserDto dto);
+}

Moonlight.Frontend/Admin/Users/Users/Users.razor

@@ -0,0 +1,178 @@
+@using LucideBlazor
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Moonlight.Shared
+@using Moonlight.Shared.Admin.Users.Users
+@using Moonlight.Shared.Shared
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.DataGrids
+@using ShadcnBlazor.Dropdowns
+@using ShadcnBlazor.Extras.AlertDialogs
+@using ShadcnBlazor.Extras.Dialogs
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Tabels
+@using SerializationContext = Moonlight.Shared.SerializationContext
+
+@inject HttpClient HttpClient
+@inject AlertDialogService AlertDialogService
+@inject DialogService DialogService
+@inject ToastService ToastService
+@inject IAuthorizationService AuthorizationService
+
+<div class="flex flex-row justify-between mt-5">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Users</h1>
+        <div class="text-muted-foreground">
+            Manage users registered in your instance
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button @onclick="CreateAsync" disabled="@(!CreateAccess.Succeeded)">
+            <PlusIcon/>
+            Create
+        </Button>
+    </div>
+</div>
+
+<div class="mt-3">
+    <DataGrid @ref="Grid" TGridItem="UserDto" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
+        <PropertyColumn HeadClassName="text-left" Field="u => u.Id"/>
+        <TemplateColumn IsFilterable="true" Identifier="@nameof(UserDto.Username)" Title="Username">
+            <CellTemplate>
+                <TableCell>
+                    <a class="text-primary" href="#"
+                       @onclick="() => EditAsync(context)" @onclick:preventDefault>
+                        @context.Username
+                    </a>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+        <PropertyColumn HeadClassName="text-left" IsFilterable="true"
+                        Identifier="@nameof(UserDto.Email)" Field="u => u.Email"/>
+        <TemplateColumn>
+            <CellTemplate>
+                <TableCell>
+                    <div class="flex flex-row items-center justify-end me-3">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Slot Context="dropdownSlot">
+                                    <Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost"
+                                            @attributes="dropdownSlot">
+                                        <EllipsisIcon/>
+                                    </Button>
+                                </Slot>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent SideOffset="2">
+                                <DropdownMenuItem OnClick="() => LogoutAsync(context)"
+                                                  Disabled="@(!LogoutAccess.Succeeded)">
+                                    Logout
+                                    <DropdownMenuShortcut>
+                                        <LogOutIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => EditAsync(context)"
+                                                  Disabled="@(!EditAccess.Succeeded)">
+                                    Edit
+                                    <DropdownMenuShortcut>
+                                        <PenIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => DeleteAsync(context)"
+                                                  Variant="DropdownMenuItemVariant.Destructive"
+                                                  Disabled="@(!DeleteAccess.Succeeded)">
+                                    Delete
+                                    <DropdownMenuShortcut>
+                                        <TrashIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+    </DataGrid>
+</div>
+
+@code
+{
+    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
+
+    private DataGrid<UserDto> Grid;
+
+    private AuthorizationResult LogoutAccess;
+    private AuthorizationResult EditAccess;
+    private AuthorizationResult DeleteAccess;
+    private AuthorizationResult CreateAccess;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthState;
+
+        LogoutAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Users.Logout);
+        EditAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Users.Edit);
+        DeleteAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Users.Delete);
+        CreateAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Users.Create);
+    }
+
+    private async Task<DataGridResponse<UserDto>> LoadAsync(DataGridRequest<UserDto> request)
+    {
+        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
+        var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<UserDto>>(
+            $"api/admin/users{query}&filterOptions={filterOptions}",
+            SerializationContext.Default.Options
+        );
+
+        return new DataGridResponse<UserDto>(response!.Data, response.TotalLength);
+    }
+
+    private async Task CreateAsync()
+    {
+        await DialogService.LaunchAsync<CreateUserDialog>(parameters => { parameters[nameof(CreateUserDialog.OnCompleted)] = async () => { await Grid.RefreshAsync(); }; });
+    }
+
+    private async Task EditAsync(UserDto user)
+    {
+        await DialogService.LaunchAsync<UpdateUserDialog>(parameters =>
+        {
+            parameters[nameof(UpdateUserDialog.User)] = user;
+            parameters[nameof(UpdateUserDialog.OnCompleted)] = async () => { await Grid.RefreshAsync(); };
+        });
+    }
+
+    private async Task DeleteAsync(UserDto user)
+    {
+        await AlertDialogService.ConfirmDangerAsync(
+            $"Deletion of user {user.Username}",
+            "Do you really want to delete this user? This action cannot be undone",
+            async () =>
+            {
+                var response = await HttpClient.DeleteAsync($"api/admin/users/{user.Id}");
+                response.EnsureSuccessStatusCode();
+
+                await ToastService.SuccessAsync("User deletion", $"Successfully deleted user {user.Username}");
+
+                await Grid.RefreshAsync();
+            }
+        );
+    }
+
+    private async Task LogoutAsync(UserDto user)
+    {
+        await AlertDialogService.ConfirmDangerAsync(
+            $"Logout all session of user {user.Username}",
+            "Do you really want to logout all session of this user? This action cannot be undone",
+            async () =>
+            {
+                var response = await HttpClient.PostAsync($"api/admin/users/{user.Id}/logout", null);
+                response.EnsureSuccessStatusCode();
+
+                await ToastService.SuccessAsync("User logout", $"Successfully logged out all session of user {user.Username}");
+
+                await Grid.RefreshAsync();
+            }
+        );
+    }
+}