Improved Account Manage custom links

Wave/Components/Account/Pages/Manage/Partials/LinksPartial.razor

@@ -1,20 +1,35 @@
 @using Wave.Data
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
+@using Wave.Utilities
 
 @inject UserManager<ApplicationUser> UserManager
 @inject NavigationManager Navigation
 @inject IStringLocalizer<Wave.Components.Account.Pages.Manage.Index> Localizer
+@inject IMessageDisplay Message
+
+<ModalComponent Id="@ModalId">
+	<ChildContent>
+		<form id="add-user-link" @formname="add-user-link" @onsubmit="Add" method="post">
+			<AntiforgeryToken />
+			<InputLabelComponent LabelText="@Localizer["Links_Url_Label"]">
+				<input class="input input-bordered" maxlength="1024" autocomplete="off" type="url"
+					   name="link-url" value="@Url" placeholder="@Localizer["Links_Url_Placeholder"]" />
+			</InputLabelComponent>
+		</form>
+	</ChildContent>
+	<Actions>
+		<button form="add-user-link" type="submit" class="btn btn-primary">@Localizer["Links_Submit"]</button>
+	</Actions>
+</ModalComponent>
 
 <ul class="flex flex-col gap-2 my-3">
 	@foreach (var link in User.Links) {
 		<li class="flex justify-between items-center">
 			<UserLinkComponent Link="link" class="link flex gap-2" />
-			<form action="/api/user/link/@link.Id" method="post">
+			<form @formname="@link.Id.ToString()" method="post" @onsubmit="Delete">
 				<AntiforgeryToken />
-				<input type="hidden" name="linkId" value="@link.Id" />
+				<input type="hidden" name="link-id" value="@link.Id" />
-				<input type="hidden" name="ReturnUrl" value="~/@Navigation.ToBaseRelativePath(Navigation.Uri)" />
-				<input type="hidden" name="_method" value="delete" />
 				<button type="submit" class="btn btn-square btn-error btn-sm" title="@Localizer["Links_Delete_Label"]">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                         <path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
@@ -24,52 +39,54 @@
 		</li>
 	}
 </ul>
+<button class="btn btn-primary w-full" onclick="@(ModalId).showModal()">
+	@Localizer["Links_Label"]
+</button>
 
-<EditForm FormName="user-links" EditContext="@Context" OnValidSubmit="OnValidSubmit"  method="post" class="w-full">
+@code {
-	<DataAnnotationsValidator />
+	private static string ModalId => "AddLinkDialog";
-	<InputLabelComponent LabelText="@Localizer["Links_Url_Label"]" For="() => Model.Url">
-		<div class="join join-vertical md:join-horizontal">
-			<InputText class="input input-bordered md:flex-1 join-item" maxlength="64" autocomplete="off" type="url"
-					   @bind-Value="@Model.Url" placeholder="@Localizer["Links_Url_Placeholder"]" />
-			<button type="submit" class="btn btn-primary join-item">@Localizer["Links_Submit"]</button>
-		</div>
-	</InputLabelComponent>
-</EditForm>
 
-@code { 
 	[Parameter]
 	public required ApplicationUser User { get; set; }
+	
+	// Create
+	[SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url")]
+	private string Url { get; set; } = string.Empty;
 
-	[SupplyParameterFromForm(FormName = "user-links")]
+	// Delete
-	private InputModel Model { get; set; } = new();
+	[SupplyParameterFromForm(Name = "link-id")]
-	private EditContext Context { get; set; } = null!;
-	private ValidationMessageStore Validation { get; set; } = null!;
-	[SupplyParameterFromForm(Name = "LinkId")]
 	private int? LinkId { get; set; }
+	
+	private async Task Add() {
+		if (string.IsNullOrWhiteSpace(Url)) {
+			Message.ShowError("Url is required.");
+			return;
+		}
+		if (Url.Length > 1024) {
+			Message.ShowError("Url is too long.");
+			return;
+		}
 
-	protected override void OnInitialized() {
+		var link = new UserLink { UrlString = Url };
-		Context = new EditContext(Model);
-		Validation = new ValidationMessageStore(Context);
-	}
-
-	private async Task OnValidSubmit() {
-		var link = new UserLink { UrlString = Model.Url };
-
 		if (!link.Validate()) {
-			Validation.Add(() => Model.Url, "Url is invalid.");
+			Message.ShowError("Url is invalid.");
-			Context.NotifyValidationStateChanged();
 			return;
 		}
 
 		link.UrlString = link.Url.AbsoluteUri;
 		User.Links.Add(link);
 		await UserManager.UpdateAsync(User);
-		Model = new InputModel();
+		Url = string.Empty;
 	}
 
-	private sealed class InputModel {
+	private async Task Delete() {
-		[Url, Required(AllowEmptyStrings = false), MaxLength(1024)]
+		var link = User.Links.FirstOrDefault(l => l.Id == LinkId);
-		public string Url { get; set; } = string.Empty;
+		if (link is null) {
-	}
+			Message.ShowError("Link ID not found.");
+			return;
+		}
 
+		User.Links.Remove(link);
+		await UserManager.UpdateAsync(User);
+	}
 }

Wave/Resources/Components/Account/Pages/Manage/Index.de-DE.resx

@@ -201,4 +201,7 @@ Ich koche seit dem jungen Alter von 7...</value>
   <data name="Contact_Phone_Placeholder" xml:space="preserve">
     <value>+49 555 5555 555</value>
   </data>
+    <data name="Links_Label" xml:space="preserve">
+        <value>Link Hinzufügen</value>
+    </data>
 </root>

Wave/Resources/Components/Account/Pages/Manage/Index.resx

@@ -201,4 +201,7 @@ I started cooking at the young age of 7...</value>
   <data name="Contact_Error" xml:space="preserve">
     <value>Error updated contact information</value>
   </data>
+    <data name="Links_Label" xml:space="preserve">
+        <value>Add Link</value>
+    </data>
 </root>