Improve Blazor WASM Sample

Author: mckaragoz

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Brand/UAuthLogo.razor

@@ -1,33 +1,19 @@
 @namespace CodeBeam.UltimateAuth.Sample
 @inherits ComponentBase
 
-<svg xmlns="http://www.w3.org/2000/svg"
-     viewBox="0 0 200 240"
-     width="@Size"
-     height="@Size"
-     style="@BuildStyle()"
-     class="@Class">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" width="@Size" height="@Size" style="@BuildStyle()" class="@Class">
 
     @if (Variant == UAuthLogoVariant.Brand)
     {
         <path fill="@ShieldColor"
-              d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52
-                             c0,22.54-58.59,69.87-85.64,92.41
-                             -27-22.54-85.64-69.87-85.64-92.41V32.1
-                             C14.36,20.83,21.12,14.07,32.39,14.07Z" />
+              d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52c0,22.54-58.59,69.87-85.64,92.41-27-22.54-85.64-69.87-85.64-92.41V32.1C14.36,20.83,21.12,14.07,32.39,14.07Z" />
 
-        <path fill="@KeyColor"
-              fill-rule="evenodd"
-              d="@KeyPath" />
+        <path fill="@KeyColor" fill-rule="evenodd" d="@KeyPath" />
     }
     else
     {
-        <path d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52
-                             c0,22.54-58.59,69.87-85.64,92.41
-                             -27-22.54-85.64-69.87-85.64-92.41V32.1
-                             C14.36,20.83,21.12,14.07,32.39,14.07Z" />
+        <path d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52c0,22.54-58.59,69.87-85.64,92.41-27-22.54-85.64-69.87-85.64-92.41V32.1C14.36,20.83,21.12,14.07,32.39,14.07Z" />
 
-        <path fill-rule="evenodd"
-              d="@KeyPath" />
+        <path fill-rule="evenodd" d="@KeyPath" />
     }
 </svg>

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Dialogs/AccountStatusDialog.razor

@@ -4,7 +4,7 @@
 @inject ISnackbar Snackbar
 @inject IDialogService DialogService
 
-<MudDialog Class="mud-width-full" ContentClass="uauth-dialog">
+<MudDialog Class="mud-width-full">
     <TitleContent>
         <MudText>Identifier Management</MudText>
         <MudText Typo="Typo.subtitle2" Color="Color.Primary">User: @AuthState?.Identity?.DisplayName</MudText>
@@ -21,73 +21,3 @@
         </MudStack>
     </DialogContent>
 </MudDialog>
-
-@code {
-    [CascadingParameter]
-    private IMudDialogInstance MudDialog { get; set; } = default!;
-
-    [Parameter]
-    public UAuthState AuthState { get; set; } = default!;
-
-    private async Task SuspendAccountAsync()
-    {
-        var info = await DialogService.ShowMessageBoxAsync(
-            title: "Are You Sure",
-            markupMessage: (MarkupString)
-                """
-                You are going to suspend your account.<br/><br/>
-                You can still active your account later.
-                """,
-            yesText: "Suspend", noText: "Cancel",
-            options: new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, BackgroundClass = "uauth-blur-slight" });
-
-        if (info != true)
-        {
-            Snackbar.Add("Suspend process cancelled", Severity.Info);
-            return;
-        }
-
-        ChangeUserStatusSelfRequest request = new() { NewStatus = SelfUserStatus.SelfSuspended };
-        var result = await UAuthClient.Users.ChangeStatusSelfAsync(request);
-        if (result.IsSuccess)
-        {
-            Snackbar.Add("Your account suspended successfully.", Severity.Success);
-            MudDialog.Close();
-        }
-        else
-        {
-            Snackbar.Add(result?.Problem?.Detail ?? result?.Problem?.Title ?? "Delete failed.", Severity.Error);
-        }
-    }
-
-    private async Task DeleteAccountAsync()
-    {
-        var info = await DialogService.ShowMessageBoxAsync(
-            title: "Are You Sure",
-            markupMessage: (MarkupString)
-                """
-                You are going to delete your account.<br/><br/>
-                This action can't be undone.<br/><br/>
-                (Actually it is, admin can handle soft deleted accounts.)
-                """,
-            yesText: "Delete", noText: "Cancel",
-            options: new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, BackgroundClass = "uauth-blur-slight" });
-
-        if (info != true)
-        {
-            Snackbar.Add("Deletion cancelled", Severity.Info);
-            return;
-        }
-
-        var result = await UAuthClient.Users.DeleteMeAsync();
-        if (result.IsSuccess)
-        {
-            Snackbar.Add("Your account deleted successfully.", Severity.Success);
-            MudDialog.Close();
-        }
-        else
-        {
-            Snackbar.Add(result?.Problem?.Detail ?? result?.Problem?.Title ?? "Delete failed.", Severity.Error);
-        }
-    }
-}

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Dialogs/AccountStatusDialog.razor.cs

@@ -0,0 +1,77 @@
+using CodeBeam.UltimateAuth.Client;
+using CodeBeam.UltimateAuth.Users.Contracts;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
+namespace CodeBeam.UltimateAuth.Sample.BlazorServer.Components.Dialogs;
+
+public partial class AccountStatusDialog
+{
+    [CascadingParameter]
+    private IMudDialogInstance MudDialog { get; set; } = default!;
+
+    [Parameter]
+    public UAuthState AuthState { get; set; } = default!;
+
+    private async Task SuspendAccountAsync()
+    {
+        var info = await DialogService.ShowMessageBoxAsync(
+            title: "Are You Sure",
+            markupMessage: (MarkupString)
+                """
+            You are going to suspend your account.<br/><br/>
+            You can still active your account later.
+            """,
+            yesText: "Suspend", noText: "Cancel",
+            options: new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, BackgroundClass = "uauth-blur-slight" });
+
+        if (info != true)
+        {
+            Snackbar.Add("Suspend process cancelled.", Severity.Info);
+            return;
+        }
+
+        ChangeUserStatusSelfRequest request = new() { NewStatus = SelfUserStatus.SelfSuspended };
+        var result = await UAuthClient.Users.ChangeStatusSelfAsync(request);
+        if (result.IsSuccess)
+        {
+            Snackbar.Add("Your account suspended successfully.", Severity.Success);
+            MudDialog.Close();
+        }
+        else
+        {
+            Snackbar.Add(result?.GetErrorText ?? "Delete failed.", Severity.Error);
+        }
+    }
+
+    private async Task DeleteAccountAsync()
+    {
+        var info = await DialogService.ShowMessageBoxAsync(
+            title: "Are You Sure",
+            markupMessage: (MarkupString)
+                """
+            You are going to delete your account.<br/><br/>
+            This action can't be undone.<br/><br/>
+            (Actually it is, admin can handle soft deleted accounts.)
+            """,
+            yesText: "Delete", noText: "Cancel",
+            options: new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, BackgroundClass = "uauth-blur-slight" });
+
+        if (info != true)
+        {
+            Snackbar.Add("Deletion cancelled.", Severity.Info);
+            return;
+        }
+
+        var result = await UAuthClient.Users.DeleteMeAsync();
+        if (result.IsSuccess)
+        {
+            Snackbar.Add("Your account deleted successfully.", Severity.Success);
+            MudDialog.Close();
+        }
+        else
+        {
+            Snackbar.Add(result?.GetErrorText ?? "Delete failed.", Severity.Error);
+        }
+    }
+}

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Dialogs/CreateUserDialog.razor

@@ -9,12 +9,12 @@
     </TitleContent>
 
     <DialogContent>
-        <MudForm @ref="_form">
+        <MudForm @ref="_form" OnEnterPressed="CreateUserAsync">
             <MudStack Spacing="2">
                 <MudTextField @bind-Value="_username" Label="Username" Variant="Variant.Outlined" Required="true" />
                 <MudTextField @bind-Value="_email" Label="Email" Variant="Variant.Outlined" Required="true" />
                 <MudPasswordField @bind-Value="_password" Label="Password" Variant="Variant.Outlined" Required="true" />
-                <MudPasswordField @bind-Value="_passwordCheck" Label="Password (Again)" Variant="Variant.Outlined" Required="true" Validation="@(() => PasswordMatch(_password))" />
+                <MudPasswordField @bind-Value="_passwordCheck" Label="Password (Again)" Variant="Variant.Outlined" Required="true" Immediate="true" Validation="@(new Func<string, string>(PasswordMatch))" />
                 <MudTextField @bind-Value="_displayName" Label="Display Name" Variant="Variant.Outlined" />
             </MudStack>
         </MudForm>
@@ -25,52 +25,3 @@
         <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="CreateUserAsync">Create</MudButton>
     </DialogActions>
 </MudDialog>
-
-@code {
-    private MudForm _form = null!;
-    private string? _username;
-    private string? _email;
-    private string? _password;
-    private string? _passwordCheck;
-    private string? _displayName;
-
-    [CascadingParameter]
-    private IMudDialogInstance MudDialog { get; set; } = default!;
-
-    private async Task CreateUserAsync()
-    {
-        await _form.Validate();
-
-        if (!_form.IsValid)
-            return;
-
-        if (_password != _passwordCheck)
-        {
-            Snackbar.Add("Passwords do not match", Severity.Error);
-            return;
-        }
-
-        var request = new CreateUserRequest
-        {
-            UserName = _username,
-            Email = _email,
-            DisplayName = _displayName,
-            Password = _password
-        };
-
-        var result = await UAuthClient.Users.CreateAdminAsync(request);
-
-        if (!result.IsSuccess)
-        {
-            Snackbar.Add(result.GetErrorText ?? "User creation failed", Severity.Error);
-            return;
-        }
-
-        Snackbar.Add("User created successfully", Severity.Success);
-        MudDialog.Close(DialogResult.Ok(true));
-    }
-
-    private string PasswordMatch(string? arg) => _password != arg ? "Passwords don't match" : string.Empty;
-
-    private void Cancel() => MudDialog.Cancel();
-}

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Dialogs/CreateUserDialog.razor.cs

@@ -0,0 +1,55 @@
+using CodeBeam.UltimateAuth.Users.Contracts;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
+namespace CodeBeam.UltimateAuth.Sample.BlazorServer.Components.Dialogs;
+
+public partial class CreateUserDialog
+{
+    private MudForm _form = null!;
+    private string? _username;
+    private string? _email;
+    private string? _password;
+    private string? _passwordCheck;
+    private string? _displayName;
+
+    [CascadingParameter]
+    private IMudDialogInstance MudDialog { get; set; } = default!;
+
+    private async Task CreateUserAsync()
+    {
+        await _form.Validate();
+
+        if (!_form.IsValid)
+            return;
+
+        if (_password != _passwordCheck)
+        {
+            Snackbar.Add("Passwords don't match.", Severity.Error);
+            return;
+        }
+
+        var request = new CreateUserRequest
+        {
+            UserName = _username,
+            Email = _email,
+            DisplayName = _displayName,
+            Password = _password
+        };
+
+        var result = await UAuthClient.Users.CreateAdminAsync(request);
+
+        if (!result.IsSuccess)
+        {
+            Snackbar.Add(result.GetErrorText ?? "User creation failed.", Severity.Error);
+            return;
+        }
+
+        Snackbar.Add("User created successfully", Severity.Success);
+        MudDialog.Close(DialogResult.Ok(true));
+    }
+
+    private string PasswordMatch(string? arg) => _password != arg ? "Passwords don't match." : string.Empty;
+
+    private void Cancel() => MudDialog.Cancel();
+}