fix api client exceptions, fix validation errors when inviting, add loading for register and login

Author: skrasekmichael

Frontend/TeamUp.ApiLayer/ApiClient.cs

@@ -105,7 +105,16 @@ private async Task<Result> SendRequestAsync(HttpRequestMessage request, Cancella
 	{
 		await InjectAuthToken(request, ct);
 
-		var response = await _client.SendAsync(request, ct);
+		HttpResponseMessage response;
+
+		try
+		{
+			response = await _client.SendAsync(request, ct);
+		}
+		catch (Exception ex)
+		{
+			return new ApiUnexpectedError("Api.UnexpectedError", ex.Message);
+		}
 
 		if (!response.IsSuccessStatusCode)
 		{
@@ -119,7 +128,16 @@ private async Task<Result<TResponse>> SendRequestAsync<TResponse>(HttpRequestMes
 	{
 		await InjectAuthToken(request, ct);
 
-		var response = await _client.SendAsync(request, ct);
+		HttpResponseMessage response;
+
+		try
+		{
+			response = await _client.SendAsync(request, ct);
+		}
+		catch (Exception ex)
+		{
+			return new ApiUnexpectedError("Api.UnexpectedError", ex.Message);
+		}
 
 		if (!response.IsSuccessStatusCode)
 		{

Frontend/TeamUp.Client/AnonymousPages/Login.razor

@@ -31,7 +31,7 @@
 				<FluentValidationMessage For="() => Input.Password" Class="text-danger" />
 
 				<FluentStack Orientation="Orientation.Horizontal" Style="margin-top: 8px">
-					<FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Log in</FluentButton>
+					<FluentButton Loading="processing" Type="ButtonType.Submit" Appearance="Appearance.Accent">Log in</FluentButton>
 					<FluentAnchor Href="register" Appearance="Appearance.Lightweight">Register</FluentAnchor>
 				</FluentStack>
 			</FluentStack>
@@ -42,6 +42,8 @@
 
 @code
 {
+	private bool processing = false;
+
 	[SupplyParameterFromQuery]
 	private string? ReturnUrl { get; set; }
 
@@ -54,7 +56,6 @@
 
 	private CustomValidation ValidationComponent { get; set; } = null!;
 
-
 	protected override async Task OnInitializedAsync()
 	{
 		var state = await AuthenticationStateProvider.GetAuthenticationStateAsync();
@@ -66,6 +67,7 @@
 
 	public async Task LoginAsync()
 	{
+		processing = true;
 		var result = await ApiClient.LoginAsync(Input, CTS.Token);
 		if (result.IsFailure)
 		{
@@ -76,6 +78,7 @@
 
 			ToastService.ShowError(result.Error.Message);
 			Input.Password = "";
+			processing = false;
 			return;
 		}
 

Frontend/TeamUp.Client/AnonymousPages/Register.razor

@@ -46,7 +46,7 @@
 					<FluentValidationMessage For="() => Input.ConfirmPassword" Class="text-danger" />
 
 					<FluentStack Orientation="Orientation.Horizontal" Style="margin-top: 8px">
-						<FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Register</FluentButton>
+						<FluentButton Loading="processing" Type="ButtonType.Submit" Appearance="Appearance.Accent">Register</FluentButton>
 						<FluentAnchor Href="login" Appearance="Appearance.Lightweight">Log in</FluentAnchor>
 					</FluentStack>
 				</FluentStack>
@@ -59,6 +59,7 @@
 @code
 {
 	private string? email = null;
+	private bool processing = false;
 
 	[SupplyParameterFromForm]
 	private RegisterModel Input { get; set; } = new();
@@ -76,6 +77,7 @@
 
 	public async Task RegisterAsync()
 	{
+		processing = true;
 		var request = new RegisterUserRequest()
 		{
 			Email = Input.Email,
@@ -94,11 +96,13 @@
 			ToastService.ShowError(result.Error.Message);
 			Input.Password = "";
 			Input.ConfirmPassword = "";
+			processing = false;
 			return;
 		}
 
 		ToastService.ShowSuccess("Successful registration, please activate your account via email.");
 		email = Input.Email;
+		processing = false;
 	}
 
 	private sealed class RegisterModel

Frontend/TeamUp.Client/Pages/Components/TeamInvitationsComponent.razor

@@ -94,6 +94,8 @@
 
 		if (result.Cancelled)
 		{
+			emailInput.Email = "";
+			emailInput.Errors = null;
 			return;
 		}
 
@@ -106,9 +108,18 @@
 		if (invitationResult.IsFailure)
 		{
 			ToastService.ShowError(invitationResult.Error.Message);
+
+			if (invitationResult.Error is ApiValidationError error)
+			{
+				emailInput.Errors = error.Errors;
+			}
+
 			return;
 		}
 
+		emailInput.Email = "";
+		emailInput.Errors = null;
+
 		ToastService.ShowInfo("The invitation request was accepted for processing, invitation should be created in upcoming minutes.");
 		await LoadInvitationsAsync();
 	}

Frontend/TeamUp.Client/Pages/Panels/EmailInput.cs

@@ -7,4 +7,6 @@ public sealed class EmailInput
 	[Required]
 	[EmailAddress]
 	public required string Email { get; set; }
+
+	public IDictionary<string, string[]>? Errors { get; set; }
 }

Frontend/TeamUp.Client/Pages/Panels/InviteUserPanel.razor

@@ -3,11 +3,25 @@
 @using System.ComponentModel.DataAnnotations
 
 <FluentDialogBody>
-	<FluentTextField @bind-Value="@Content.Email">Email:</FluentTextField>
+	<EditForm Model="@Content" Style="margin: 1px">
+		<CustomValidation @ref="ValidationComponent" />
+		<FluentTextField @bind-Value="@Content.Email" Required="true" Placeholder="name@example.com" Label="Email" />
+		<FluentValidationMessage For="() => Content.Email" Class="text-danger" />
+	</EditForm>
 </FluentDialogBody>
 
 @code
 {
 	[Parameter]
 	public EmailInput Content { get; set; } = default!;
+
+	private CustomValidation ValidationComponent { get; set; } = null!;
+
+	protected override void OnAfterRender(bool firstRender)
+	{
+		if (Content?.Errors is not null)
+		{
+			ValidationComponent.DisplayErrors(Content.Errors);
+		}
+	}
 }

Frontend/TeamUp.Client/Pages/Team.razor

@@ -34,6 +34,8 @@
 					<strong style="margin-left: 4px;">@teamContext.Role.ToString()</strong>
 				</div>
 
+				<FluentDivider Style="margin-top: 8px; margin-bottom: 8px" />
+
 				@if (teamContext.Role.IsOwner())
 				{
 					<div style="margin-top: 8px">

Frontend/TeamUp.Contracts/ApiError.cs

@@ -4,6 +4,8 @@
 
 namespace TeamUp.Contracts;
 
+public sealed record ApiUnexpectedError(string Key, string Message) : Error(Key, Message);
+
 public sealed record ApiError(string Key, string Message, HttpStatusCode HttpStatusCode) : Error(Key, Message);
 
 public sealed record ApiValidationError(string Key, string Message, IDictionary<string, string[]> Errors) : Error(Key, Message);