winter-software/Wave
winter-software/Wave
1
0
Fork 0
Code Issues Wiki Activity

Added more personalization to profile page, separated forms into partials

Browse source
This commit is contained in:
Mia Rose Winter 2024-01-17 14:49:00 +01:00
parent 677458c308
commit b8b50e8f19
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
6 changed files with 199 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
Wave/Components/Account/Pages/Manage/Index.razor
View file

@ -2,7 +2,7 @@
@using Microsoft.AspNetCore.Identity @using Microsoft.AspNetCore.Identity
@using Wave.Data @using Wave.Data
@using System.ComponentModel.DataAnnotations @using Wave.Components.Account.Pages.Manage.Partials
@inject IdentityUserAccessor UserAccessor @inject IdentityUserAccessor UserAccessor
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@ -16,7 +16,6 @@
<div class="flex gap-4 flex-wrap"> <div class="flex gap-4 flex-wrap">
<section class="w-80 max-w-xs" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"> <section class="w-80 max-w-xs" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post">
<h2 class="text-2xl lg:text-4xl mb-3">@Localizer["Title"]</h2> <h2 class="text-2xl lg:text-4xl mb-3">@Localizer["Title"]</h2>
<label class="form-control w-full"> <label class="form-control w-full">
<div class="label"> <div class="label">
<span class="label-text">@Localizer["UserName_Label"]</span> <span class="label-text">@Localizer["UserName_Label"]</span>
@ -24,25 +23,15 @@
<input class="input input-bordered w-full" type="text" value="@UserName" <input class="input input-bordered w-full" type="text" value="@UserName"
placeholder="Please choose your username." disabled/> placeholder="Please choose your username." disabled/>
</label> </label>
@if (User is not null) {
<EditForm FormName="update-profile" Model="@Model" OnValidSubmit="@SubmitFullNameUpdate" method="post" Enhance="false"> <ProfileFormPartial User="@User" />
<DataAnnotationsValidator /> }
<label class="form-control w-full"> </section>
<div class="label"> <section class="w-80 max-w-xs">
<span class="label-text">@Localizer["FullName_Label"]</span> <h2 class="text-2xl lg:text-4xl mb-3">@Localizer["AboutMe"]</h2>
</div> @if (User is not null) {
<InputText class="input input-bordered w-full" maxlength="64" autocomplete="name" <AboutMeFormPartial User="@User" />
@bind-Value="@Model.FullName" placeholder="@Localizer["FullName_Placeholder"]" /> }
<div class="label">
<span class="label-text-alt text-error">
<ValidationMessage For="() => Model.FullName" />
</span>
</div>
</label>
<button type="submit" class="btn btn-primary w-full">
@Localizer["FullName_Submit"]
</button>
</EditForm>
</section> </section>
<section class="w-80 max-w-xs"> <section class="w-80 max-w-xs">
<h2 class="text-2xl lg:text-4xl mb-3">@Localizer["Permissions"]</h2> <h2 class="text-2xl lg:text-4xl mb-3">@Localizer["Permissions"]</h2>
@ -113,29 +102,14 @@
@code { @code {
private string? Message { get; set; } private string? Message { get; set; }
[SupplyParameterFromForm]
private InputModel Model { get; set; } = new();
[CascadingParameter] [CascadingParameter]
private HttpContext HttpContext { get; set; } = default!; private HttpContext HttpContext { get; set; } = default!;
private ApplicationUser User { get; set; } = default!; private ApplicationUser? User { get; set; }
private string UserName { get; set; } = string.Empty; private string UserName { get; set; } = string.Empty;
protected override async Task OnInitializedAsync() { protected override async Task OnInitializedAsync() {
UserName = UserManager.GetUserName(HttpContext.User)!; UserName = UserManager.GetUserName(HttpContext.User)!;
User = await UserAccessor.GetRequiredUserAsync(HttpContext); User = await UserAccessor.GetRequiredUserAsync(HttpContext);
Model.FullName ??= User.FullName;
}
private async Task SubmitFullNameUpdate() {
User.FullName = Model.FullName?.Trim();
await UserManager.UpdateAsync(User);
await SignInManager.RefreshSignInAsync(User);
Message = Localizer["FullName_Success"];
}
private sealed class InputModel {
[MaxLength(64)]
public string? FullName { get; set; }
} }
} }

74
Wave/Components/Account/Pages/Manage/Partials/AboutMeFormPartial.razor Normal file
View file

@ -0,0 +1,74 @@
@using Wave.Data
@using Microsoft.AspNetCore.Identity
@using System.ComponentModel.DataAnnotations
@using Wave.Utilities
@inject UserManager<ApplicationUser> UserManager
@inject IStringLocalizer<Wave.Components.Account.Pages.Manage.Index> Localizer
<EditForm FormName="about-me" Model="@Model" OnValidSubmit="OnValidSubmit" method="post" class="w-full">
<label class="form-control w-full">
<div class="label">
<span class="label-text">
@Localizer["AboutTheAuthor_Label"]
<HelpDropdownComponent Body="@Localizer["AboutTheAuthor_Explanation"]" />
</span>
</div>
<InputTextArea class="textarea textarea-bordered w-full" rows="10" maxlength="512"
@bind-Value="@Model.AboutTheAuthor" placeholder="@Localizer["AboutTheAuthor_Placeholder"]" />
<div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.AboutTheAuthor" /></span>
</div>
</label>
<label class="form-control w-full">
<div class="label">
<span class="label-text">
@Localizer["Biography_Label"]
<span class="badge badge-info badge-sm badge-outline">Markdown</span>
<HelpDropdownComponent Body="@Localizer["Biography_Explanation"]" />
</span>
</div>
<InputTextArea class="textarea textarea-bordered w-full" rows="10" maxlength="512"
@bind-Value="@Model.Biography" placeholder="@Localizer["Biography_Placeholder"]" />
<div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.Biography" /></span>
</div>
</label>
<button type="submit" class="btn btn-primary w-full">
@Localizer["Submit"]
</button>
</EditForm>
@code {
[Parameter]
public required ApplicationUser? User { get; set; }
[SupplyParameterFromForm(FormName = "about-me")]
private InputModel Model { get; set; } = new();
protected override void OnInitialized() {
Model.AboutTheAuthor ??= User?.AboutTheAuthor;
Model.Biography ??= User?.Biography;
}
private async Task OnValidSubmit(EditContext obj) {
if (User is null) return;
if (Model.Biography is not null) {
User.BiographyHtml = MarkdownUtilities.Parse(Model.Biography);
User.Biography = Model.Biography;
}
if (Model.AboutTheAuthor is not null)
User.AboutTheAuthor = Model.AboutTheAuthor;
await UserManager.UpdateAsync(User);
}
private sealed record InputModel {
[MaxLength(512)]
public string? AboutTheAuthor { get; set; }
[MaxLength(4096)]
public string? Biography { get; set; }
}
}

52
Wave/Components/Account/Pages/Manage/Partials/ProfileFormPartial.razor Normal file
View file

@ -0,0 +1,52 @@
@using Wave.Data
@using Microsoft.AspNetCore.Identity
@using System.ComponentModel.DataAnnotations
@inject UserManager<ApplicationUser> UserManager
@inject SignInManager<ApplicationUser> SignInManager
@inject IStringLocalizer<Wave.Components.Account.Pages.Manage.Index> Localizer
<EditForm FormName="update-profile" Model="@Model" OnValidSubmit="@OnValidSubmit" method="post" Enhance="false">
<DataAnnotationsValidator />
<label class="form-control w-full">
<div class="label">
<span class="label-text">@Localizer["FullName_Label"]</span>
</div>
<InputText class="input input-bordered w-full" maxlength="64" autocomplete="name"
@bind-Value="@Model.FullName" placeholder="@Localizer["FullName_Placeholder"]" />
<div class="label">
<span class="label-text-alt text-error">
<ValidationMessage For="() => Model.FullName" />
</span>
</div>
</label>
<button type="submit" class="btn btn-primary w-full">
@Localizer["Submit"]
</button>
</EditForm>
@code {
[Parameter]
public required ApplicationUser? User { get; set; }
[SupplyParameterFromForm(FormName = "update-profile")]
private InputModel Model { get; set; } = new();
protected override void OnInitialized() {
Model.FullName ??= User?.FullName;
}
private async Task OnValidSubmit() {
if (User is null) return;
User.FullName = Model.FullName?.Trim();
await UserManager.UpdateAsync(User);
await SignInManager.RefreshSignInAsync(User);
// Message = Localizer["FullName_Success"];
}
private sealed class InputModel {
[MaxLength(64)]
public string? FullName { get; set; }
}
}

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

@ -101,9 +101,6 @@
<data name="Title" xml:space="preserve"> <data name="Title" xml:space="preserve">
<value>Profil</value> <value>Profil</value>
</data> </data>
<data name="FullName_Submit" xml:space="preserve">
<value>Speichern</value>
</data>
<data name="FullName_Label" xml:space="preserve"> <data name="FullName_Label" xml:space="preserve">
<value>Voller Name</value> <value>Voller Name</value>
</data> </data>
@ -128,4 +125,29 @@
<data name="Permission_RoleAssign" xml:space="preserve"> <data name="Permission_RoleAssign" xml:space="preserve">
<value>Benutzern Rollen zuweisen</value> <value>Benutzern Rollen zuweisen</value>
</data> </data>
<data name="AboutMe" xml:space="preserve">
<value>Über Mich</value>
</data>
<data name="AboutTheAuthor_Label" xml:space="preserve">
<value>Über den Autor/die Autorin</value>
</data>
<data name="AboutTheAuthor_Placeholder" xml:space="preserve">
<value>Alex Muster ist professionelle*r Konditor*in...</value>
</data>
<data name="AboutTheAuthor_Explanation" xml:space="preserve">
<value>Diese Beschreibung wird, neben Ihren Namen und Profilbild, in Artikeln eingefügt den Ihr verfasst. Diese soll dem Lesenden informationen über Ihre Qualifikationen und Fähigkeiten bereit stellen.</value>
</data>
<data name="Biography_Label" xml:space="preserve">
<value>Biographie</value>
</data>
<data name="Biography_Placeholder" xml:space="preserve">
<value># Meine Reise
Ich koche seit dem jungen Alter von 7...</value>
</data>
<data name="Biography_Explanation" xml:space="preserve">
<value>Dies ist ein freiform Text der auf Ihrer persönlichen Seite angezeigt wird.</value>
</data>
<data name="Submit" xml:space="preserve">
<value>Speichern</value>
</data>
</root> </root>

28
Wave/Resources/Components/Account/Pages/Manage/Index.resx
View file

@ -107,9 +107,6 @@
<data name="FullName_Placeholder" xml:space="preserve"> <data name="FullName_Placeholder" xml:space="preserve">
<value>Enter your full Name</value> <value>Enter your full Name</value>
</data> </data>
<data name="FullName_Submit" xml:space="preserve">
<value>Save</value>
</data>
<data name="UserName_Label" xml:space="preserve"> <data name="UserName_Label" xml:space="preserve">
<value>User Name</value> <value>User Name</value>
</data> </data>
@ -128,4 +125,29 @@
<data name="Permission_RoleAssign" xml:space="preserve"> <data name="Permission_RoleAssign" xml:space="preserve">
<value>Assign roles to users</value> <value>Assign roles to users</value>
</data> </data>
<data name="AboutMe" xml:space="preserve">
<value>About Me</value>
</data>
<data name="AboutTheAuthor_Label" xml:space="preserve">
<value>About the Author</value>
</data>
<data name="AboutTheAuthor_Explanation" xml:space="preserve">
<value>This description gets embedded next to your name and profile picture in articles that you wrote, it is intended to tell the reader about yourself and your qualifications and skills.</value>
</data>
<data name="AboutTheAuthor_Placeholder" xml:space="preserve">
<value>John Smith has a degree of arts in cooking...</value>
</data>
<data name="Biography_Label" xml:space="preserve">
<value>Biography</value>
</data>
<data name="Biography_Explanation" xml:space="preserve">
<value>This is a free form text that will be shown on your personal page.</value>
</data>
<data name="Biography_Placeholder" xml:space="preserve">
<value># My Journey
I started cooking at the young age of 7...</value>
</data>
<data name="Submit" xml:space="preserve">
<value>Save</value>
</data>
</root> </root>

2
Wave/wwwroot/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long