Improved Account Manage custom links

This commit is contained in:
Mia Rose Winter 2024-03-27 11:05:50 +01:00
parent 5e8e521028
commit be8bb535c9
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
3 changed files with 58 additions and 35 deletions

View file

@ -1,20 +1,35 @@
@using Wave.Data @using Wave.Data
@using System.ComponentModel.DataAnnotations @using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Identity @using Microsoft.AspNetCore.Identity
@using Wave.Utilities
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@inject NavigationManager Navigation @inject NavigationManager Navigation
@inject IStringLocalizer<Wave.Components.Account.Pages.Manage.Index> Localizer @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"> <ul class="flex flex-col gap-2 my-3">
@foreach (var link in User.Links) { @foreach (var link in User.Links) {
<li class="flex justify-between items-center"> <li class="flex justify-between items-center">
<UserLinkComponent Link="link" class="link flex gap-2" /> <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 /> <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"]"> <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"> <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" /> <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> </li>
} }
</ul> </ul>
<button class="btn btn-primary w-full" onclick="@(ModalId).showModal()">
<EditForm FormName="user-links" EditContext="@Context" OnValidSubmit="OnValidSubmit" method="post" class="w-full"> @Localizer["Links_Label"]
<DataAnnotationsValidator /> </button>
<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 { @code {
private static string ModalId => "AddLinkDialog";
[Parameter] [Parameter]
public required ApplicationUser User { get; set; } public required ApplicationUser User { get; set; }
[SupplyParameterFromForm(FormName = "user-links")] // Create
private InputModel Model { get; set; } = new(); [SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url")]
private EditContext Context { get; set; } = null!; private string Url { get; set; } = string.Empty;
private ValidationMessageStore Validation { get; set; } = null!;
[SupplyParameterFromForm(Name = "LinkId")] // Delete
[SupplyParameterFromForm(Name = "link-id")]
private int? LinkId { get; set; } private int? LinkId { get; set; }
protected override void OnInitialized() { private async Task Add() {
Context = new EditContext(Model); if (string.IsNullOrWhiteSpace(Url)) {
Validation = new ValidationMessageStore(Context); Message.ShowError("Url is required.");
} return;
}
private async Task OnValidSubmit() { if (Url.Length > 1024) {
var link = new UserLink { UrlString = Model.Url }; Message.ShowError("Url is too long.");
return;
}
var link = new UserLink { UrlString = Url };
if (!link.Validate()) { if (!link.Validate()) {
Validation.Add(() => Model.Url, "Url is invalid."); Message.ShowError("Url is invalid.");
Context.NotifyValidationStateChanged();
return; return;
} }
link.UrlString = link.Url.AbsoluteUri; link.UrlString = link.Url.AbsoluteUri;
User.Links.Add(link); User.Links.Add(link);
await UserManager.UpdateAsync(User); 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);
}
} }

View file

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

View file

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