feat: add confirmation dialog on deleting configurations

CaddyManager/CaddyManager.csproj

@@ -27,8 +27,9 @@
 
     <ItemGroup>
       <AdditionalFiles Include="Components\Pages\Caddy\CaddyfileEditor\CaddyfileEditor.razor" />
-      <AdditionalFiles Include="Components\Pages\Caddy\ReverseProxies\ReverseProxiesPage.razor" />
+      <AdditionalFiles Include="Components\Pages\Caddy\CaddyReverseProxies\ReverseProxiesPage.razor" />
-      <AdditionalFiles Include="Components\Pages\Caddy\ReverseProxies\ReverseProxyItem.razor" />
+      <AdditionalFiles Include="Components\Pages\Caddy\CaddyReverseProxies\ReverseProxyItem.razor" />
+      <AdditionalFiles Include="Components\Pages\Generic\Error.razor" />
     </ItemGroup>
 
     <ItemGroup>

CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor

@@ -23,7 +23,7 @@
          @bind-SelectedValues="_selectedCaddyConfigurations">
     @foreach (var caddyConfig in _availableCaddyConfigurations)
     {
-        <ReverseProxyItem FileName="@caddyConfig"/>
+        <CaddyReverseProxyItem FileName="@caddyConfig"/>
         <MudDivider/>
     }
 </MudList>

CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor.cs

@@ -1,27 +1,25 @@
+using System.Globalization;
+using CaddyManager.Components.Pages.Generic;
 using CaddyManager.Contracts.Caddy;
 using CaddyManager.Contracts.Docker;
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
 
-namespace CaddyManager.Components.Pages.Caddy.ReverseProxies;
+namespace CaddyManager.Components.Pages.Caddy.CaddyReverseProxies;
 
-public partial class ReverseProxiesPage : ComponentBase
+public partial class CaddyReverseProxiesPage : ComponentBase
 {
     private bool _isProcessing;
     private List<string> _availableCaddyConfigurations = [];
     private IReadOnlyCollection<string> _selectedCaddyConfigurations = [];
 
-    [Inject]
+    [Inject] private ICaddyService CaddyService { get; set; } = null!;
-    private ICaddyService CaddyService { get; set; } = null!;
 
-    [Inject]
+    [Inject] private IDockerService DockerService { get; set; } = null!;
-    private IDockerService DockerService { get; set; } = null!;
 
-    [Inject]
+    [Inject] private IDialogService DialogService { get; set; } = null!;
-    private IDialogService DialogService { get; set; } = null!;
 
-    [Inject]
+    [Inject] private ISnackbar Snackbar { get; set; } = null!;
-    private ISnackbar Snackbar { get; set; } = null!;
 
     protected override void OnAfterRender(bool firstRender)
     {
@@ -67,21 +65,45 @@ public partial class ReverseProxiesPage : ComponentBase
     /// <summary>
     /// Have the selected configurations be deleted
     /// </summary>
-    private void Delete()
+    private Task Delete()
+    {
+        var confWord = _selectedCaddyConfigurations.Count > 1 ? "configurations" : "configuration";
+
+        return DialogService.ShowAsync<ConfirmationDialog>($"Delete {confWord}", options: new DialogOptions
+        {
+            FullWidth = true,
+            MaxWidth = MaxWidth.ExtraSmall,
+        }, parameters: new DialogParameters
+        {
+            {
+                "Message",
+                $"Are you sure you want to delete the selected {confWord}?"
+            },
+            {
+                "OnConfirm", EventCallback.Factory.Create(this, () =>
                 {
                     var response = CaddyService.DeleteCaddyConfigurations(_selectedCaddyConfigurations.ToList());
 
-        _selectedCaddyConfigurations = _selectedCaddyConfigurations.Except(response.DeletedConfigurations).ToList();
+                    _selectedCaddyConfigurations =
+                        _selectedCaddyConfigurations.Except(response.DeletedConfigurations).ToList();
 
                     if (response.Success)
                     {
-            Snackbar.Add("Configuration(s) deleted successfully", Severity.Success);
+                        Snackbar.Add(
+                            $"{CultureInfo.InvariantCulture.TextInfo.ToTitleCase(confWord)} deleted successfully",
+                            Severity.Success);
                         Refresh();
                     }
                     else
                     {
                         Snackbar.Add(response.Message, Severity.Error);
                     }
+                })
+            },
+            { "ConfirmText", "Yes" },
+            { "ConfirmColor", Color.Error },
+            { "CancelText", "No" }
+        });
     }
 
     /// <summary>

CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxyItem.razor.cs

@@ -2,9 +2,9 @@ using CaddyManager.Contracts.Caddy;
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
 
-namespace CaddyManager.Components.Pages.Caddy.ReverseProxies;
+namespace CaddyManager.Components.Pages.Caddy.CaddyReverseProxies;
 
-public partial class ReverseProxyItem : ComponentBase
+public partial class CaddyReverseProxyItem : ComponentBase
 {
     /// <summary>
     /// File path of the Caddy configuration file

CaddyManager/Components/Pages/Generic/ConfirmationDialog.razor

@@ -0,0 +1,9 @@
+<MudDialog>
+    <DialogContent>
+        <MudText Typo="Typo.body1">@Message</MudText>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="Cancel">@CancelText</MudButton>
+        <MudButton Color="@ConfirmColor" OnClick="Confirm">@ConfirmText</MudButton>
+    </DialogActions>
+</MudDialog>

CaddyManager/Components/Pages/Generic/ConfirmationDialog.razor.cs

@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
+namespace CaddyManager.Components.Pages.Generic;
+
+public partial class ConfirmationDialog : ComponentBase
+{
+    [CascadingParameter] 
+    private IMudDialogInstance MudDialog { get; set; } = null!;
+    
+    /// <summary>
+    /// The message to display to the user, to be set in the body of the dialog
+    /// </summary>
+    [Parameter]
+    public string Message { get; set; } = string.Empty;
+    
+    /// <summary>
+    /// Callback when the user confirms the action. The dialog will close after this callback is invoked.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnConfirm { get; set; } = EventCallback.Empty;
+    
+    /// <summary>
+    /// Callback when the user cancels the action. The dialog will close after this callback is invoked.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnCancel { get; set; } = EventCallback.Empty;
+    
+    /// <summary>
+    /// The text to display on the confirm button
+    /// </summary>
+    [Parameter]
+    public string ConfirmText { get; set; } = "Confirm";
+    
+    /// <summary>
+    /// The color of the confirm button
+    /// </summary>
+    [Parameter]
+    public Color ConfirmColor { get; set; } = Color.Primary;
+    
+    /// <summary>
+    /// The text to display on the cancel button
+    /// </summary>
+    [Parameter]
+    public string CancelText { get; set; } = "Cancel";
+
+    /// <summary>
+    /// Perform the confirmation action
+    /// </summary>
+    private async Task Confirm()
+    {
+        await OnConfirm.InvokeAsync();
+        MudDialog.Close();
+    }
+
+    /// <summary>
+    /// Cancel the cancel action
+    /// </summary>
+    private async Task Cancel()
+    {
+        await OnCancel.InvokeAsync();
+        MudDialog.Close();
+    }
+}