Permission Management UI

Author: iammukeshm

src/Playground/Playground.Blazor/Components/Pages/Roles/CreateRoleDialog.razor

@@ -0,0 +1,156 @@
+@using FSH.Playground.Blazor.ApiClient
+@inject IIdentityClient IdentityClient
+@inject ISnackbar Snackbar
+
+<MudDialog>
+    <TitleContent>
+        <MudStack Spacing="0">
+            <MudText Typo="Typo.h6" Class="fw-600">@(IsEditMode ? "Edit Role" : "Create New Role")</MudText>
+            <MudText Typo="Typo.caption" Class="text-muted">
+                @(IsEditMode ? "Modify role details" : "Define a new role for your organization")
+            </MudText>
+        </MudStack>
+    </TitleContent>
+    <DialogContent>
+        <MudForm @ref="_form" Model="_model">
+            <MudStack Spacing="4" Class="mt-2">
+                @* Role Name *@
+                <MudTextField @bind-Value="_model.Name"
+                              Label="Role Name"
+                              Placeholder="Enter role name (e.g., Manager, Editor)"
+                              Required="true"
+                              RequiredError="Role name is required"
+                              Variant="Variant.Outlined"
+                              Adornment="Adornment.Start"
+                              AdornmentIcon="@Icons.Material.Filled.Badge"
+                              Immediate="true"
+                              Disabled="@(IsEditMode && IsSystemRole(_model.Name))"
+                              HelperText="@(IsEditMode && IsSystemRole(_model.Name) ? "System role names cannot be changed" : "Choose a descriptive name for the role")" />
+
+                @* Role Description *@
+                <MudTextField @bind-Value="_model.Description"
+                              Label="Description"
+                              Placeholder="Describe the purpose and scope of this role"
+                              Variant="Variant.Outlined"
+                              Adornment="Adornment.Start"
+                              AdornmentIcon="@Icons.Material.Filled.Description"
+                              Lines="3"
+                              HelperText="Help others understand what this role is used for" />
+
+                @* Info Alert *@
+                <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Dense="true">
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                        <MudIcon Icon="@Icons.Material.Filled.Info" Size="Size.Small" />
+                        <MudText Typo="Typo.body2">
+                            @if (IsEditMode)
+                            {
+                                <span>After saving, you can manage permissions for this role from the Roles page.</span>
+                            }
+                            else
+                            {
+                                <span>After creating the role, you can assign permissions to define what users with this role can do.</span>
+                            }
+                        </MudText>
+                    </MudStack>
+                </MudAlert>
+            </MudStack>
+        </MudForm>
+    </DialogContent>
+    <DialogActions>
+        <MudButton Variant="Variant.Text"
+                   Color="Color.Default"
+                   OnClick="Cancel"
+                   Disabled="_busy">
+            Cancel
+        </MudButton>
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Primary"
+                   OnClick="Submit"
+                   Disabled="_busy"
+                   StartIcon="@(_busy ? null : (IsEditMode ? Icons.Material.Filled.Save : Icons.Material.Filled.Add))">
+            @if (_busy)
+            {
+                <MudProgressCircular Size="Size.Small" Indeterminate="true" Class="mr-2" />
+                <span>@(IsEditMode ? "Saving..." : "Creating...")</span>
+            }
+            else
+            {
+                <span>@(IsEditMode ? "Save Changes" : "Create Role")</span>
+            }
+        </MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter]
+    private IMudDialogInstance MudDialog { get; set; } = default!;
+
+    [Parameter]
+    public RoleDto? ExistingRole { get; set; }
+
+    private MudForm? _form;
+    private UpsertRoleCommand _model = new();
+    private bool _busy;
+
+    private bool IsEditMode => ExistingRole is not null;
+
+    private static readonly HashSet<string> SystemRoles = new(StringComparer.OrdinalIgnoreCase)
+    {
+        "Admin", "Administrator", "Basic"
+    };
+
+    protected override void OnInitialized()
+    {
+        if (ExistingRole is not null)
+        {
+            _model = new UpsertRoleCommand
+            {
+                Id = ExistingRole.Id,
+                Name = ExistingRole.Name,
+                Description = ExistingRole.Description
+            };
+        }
+    }
+
+    private static bool IsSystemRole(string? roleName) =>
+        !string.IsNullOrEmpty(roleName) && SystemRoles.Contains(roleName);
+
+    private void Cancel()
+    {
+        MudDialog.Cancel();
+    }
+
+    private async Task Submit()
+    {
+        if (_form is not null)
+        {
+            await _form.Validate();
+            if (!_form.IsValid)
+            {
+                return;
+            }
+        }
+
+        if (string.IsNullOrWhiteSpace(_model.Name))
+        {
+            Snackbar.Add("Please enter a role name.", Severity.Warning);
+            return;
+        }
+
+        _busy = true;
+        try
+        {
+            await IdentityClient.RolesPostAsync(_model);
+            Snackbar.Add($"Role '{_model.Name}' {(IsEditMode ? "updated" : "created")} successfully!", Severity.Success);
+            MudDialog.Close(DialogResult.Ok(true));
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Failed to {(IsEditMode ? "update" : "create")} role: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+}