Implemented Profile Pictures

This commit is contained in:
Mia Rose Winter 2024-01-14 19:04:06 +01:00
parent 108e1c0221
commit 6e0b4f75b7
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
12 changed files with 522 additions and 62 deletions

View file

@ -1,77 +1,78 @@
@page "/Account/Manage" @page "/Account/Manage"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Identity @using Microsoft.AspNetCore.Identity
@using Microsoft.EntityFrameworkCore
@using Wave.Data @using Wave.Data
@using Wave.Services
@rendermode InteractiveServer
@inject NavigationManager Navigation
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@inject SignInManager<ApplicationUser> SignInManager @inject IDbContextFactory<ApplicationDbContext> ContextFactory
@inject IdentityUserAccessor UserAccessor @inject ImageService ImageService
@inject IdentityRedirectManager RedirectManager
<PageTitle>Profile</PageTitle> <PageTitle>Profile</PageTitle>
<h3>Profile</h3> <h3 class="text-xl mb-3">Profile</h3>
<StatusMessage />
<div class="row"> <div class="max-w-xs" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post">
<div class="col-md-6"> <label class="form-control w-full">
<EditForm Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"> <div class="label">
<DataAnnotationsValidator /> <span class="label-text">Username</span>
<ValidationSummary class="text-danger" role="alert" /> </div>
<div class="form-floating mb-3"> <input class="input input-bordered w-full" type="text" value="@Username"
<input type="text" value="@username" class="form-control" placeholder="Please choose your username." disabled /> placeholder="Please choose your username." disabled/>
<label for="username" class="form-label">Username</label> </label>
@if (User?.ProfilePicture is not null) {
<div class="avatar w-24 my-3">
<div class="rounded">
<img src="/images/@(User.ProfilePicture.ImageId)" alt="" loading="lazy" />
</div> </div>
<div class="form-floating mb-3"> </div>
<InputText @bind-Value="Input.PhoneNumber" class="form-control" placeholder="Please enter your phone number." /> }
<label for="phone-number" class="form-label">Phone number</label> <label class="form-control w-full">
<ValidationMessage For="() => Input.PhoneNumber" class="text-danger" /> <div class="label">
</div> <span class="label-text">Profile Picture</span>
<button type="submit" class="w-100 btn btn-lg btn-primary">Save</button> </div>
</EditForm> <FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
</div> </label>
</div> </div>
@code { @code {
private ApplicationUser user = default!; private ApplicationUser? User { get; set; } = default!;
private string? username; private string? Username { get; set; }
private string? phoneNumber;
[CascadingParameter] [CascadingParameter]
private HttpContext HttpContext { get; set; } = default!; private Task<AuthenticationState>? AuthenticationState { get; set; }
[SupplyParameterFromForm] protected override async Task OnInitializedAsync() {
private InputModel Input { get; set; } = new(); if (AuthenticationState is not null) {
var state = await AuthenticationState;
protected override async Task OnInitializedAsync() User = await UserManager.GetUserAsync(state.User);
{ Username = User.UserName;
user = await UserAccessor.GetRequiredUserAsync(HttpContext); await using var context = await ContextFactory.CreateDbContextAsync();
username = await UserManager.GetUserNameAsync(user); await context.Entry(User).Reference(u => u.ProfilePicture).LoadAsync();
phoneNumber = await UserManager.GetPhoneNumberAsync(user); }
Input.PhoneNumber ??= phoneNumber;
} }
private async Task OnValidSubmitAsync() private async Task ProfilePictureChanged(string tempFilePath) {
{ var guid = await ImageService.StoreImageAsync(tempFilePath);
if (Input.PhoneNumber != phoneNumber) if (!guid.HasValue) throw new ApplicationException("Processing Image failed.");
{
var setPhoneResult = await UserManager.SetPhoneNumberAsync(user, Input.PhoneNumber); await using var context = await ContextFactory.CreateDbContextAsync();
if (!setPhoneResult.Succeeded) if (User.ProfilePicture is not null) {
{ context.Remove(User.ProfilePicture);
RedirectManager.RedirectToCurrentPageWithStatus("Error: Failed to set phone number.", HttpContext);
}
} }
await SignInManager.RefreshSignInAsync(user); User.ProfilePicture = new ProfilePicture() {
RedirectManager.RedirectToCurrentPageWithStatus("Your profile has been updated", HttpContext); ImageId = guid.Value
};
context.Update(User);
await context.SaveChangesAsync();
// TODO notify changed pfp
} }
private sealed class InputModel
{
[Phone]
[Display(Name = "Phone number")]
public string? PhoneNumber { get; set; }
}
} }

View file

@ -1,4 +1,5 @@
@implements IDisposable @using System.Security.Claims
@implements IDisposable
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@ -18,7 +19,17 @@
<AuthorizeView> <AuthorizeView>
<Authorized> <Authorized>
<li> <li>
<NavLink ActiveClass="tab-active" class="tab" href="Account/Manage">@context.User.Identity?.Name</NavLink> <NavLink ActiveClass="tab-active" class="tab" href="Account/Manage">
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<div class="avatar">
<div class="w-12 rounded">
<img src="/api/user/pfp/@id" alt="" loading="lazy"
onerror="this.remove()" />
</div>
</div>
}
@context.User.Identity?.Name
</NavLink>
</li> </li>
<li> <li>
<form action="Account/Logout" method="post"> <form action="Account/Logout" method="post">

View file

@ -0,0 +1,29 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Wave.Data;
using Wave.Services;
namespace Wave.Controllers;
[ApiController]
[Route("/api/user")]
public class UserController(ImageService imageService, IDbContextFactory<ApplicationDbContext> contextFactory) : ControllerBase {
private ImageService ImageService { get; } = imageService;
private IDbContextFactory<ApplicationDbContext> ContextFactory { get; } = contextFactory;
[HttpGet]
[Route("pfp/{userId}")]
public async Task<IActionResult> Get(string userId) {
await using var context = await ContextFactory.CreateDbContextAsync();
var user = await context.Users.Include(u => u.ProfilePicture).FirstOrDefaultAsync(u => u.Id == userId);
if (user is null) return NotFound();
if (user.ProfilePicture is null) {
return StatusCode(StatusCodes.Status204NoContent);
}
string? path = ImageService.GetPath(user.ProfilePicture.ImageId);
if (path is null) return NotFound();
return File(System.IO.File.OpenRead(path), ImageService.ImageMimeType);
}
}

View file

@ -4,4 +4,21 @@
namespace Wave.Data; namespace Wave.Data;
public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: IdentityDbContext<ApplicationUser>(options) { } : IdentityDbContext<ApplicationUser>(options) {
protected override void OnModelCreating(ModelBuilder builder) {
base.OnModelCreating(builder);
builder.Entity<ApplicationUser>(user => {
user.HasOne(u => u.ProfilePicture).WithOne().HasForeignKey(typeof(ProfilePicture))
.OnDelete(DeleteBehavior.SetNull);
user.Navigation(u => u.ProfilePicture).IsRequired(false);
});
builder.Entity<ProfilePicture>(pfp => {
pfp.HasKey(p => p.Id);
pfp.Property(p => p.ImageId).IsRequired();
pfp.ToTable("ProfilePictures");
});
}
}

View file

@ -2,5 +2,6 @@
namespace Wave.Data; namespace Wave.Data;
// Add profile data for application users by adding properties to the ApplicationUser class public class ApplicationUser : IdentityUser {
public class ApplicationUser : IdentityUser { } public ProfilePicture? ProfilePicture { get; set; }
}

View file

@ -0,0 +1,312 @@
// <auto-generated />
using System;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Infrastructure;
using Microsoft.EntityFrameworkCore.Migrations;
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
using Wave.Data;
#nullable disable
namespace Wave.Data.Migrations.postgres
{
[DbContext(typeof(ApplicationDbContext))]
[Migration("20240113145500_ProfilePictures")]
partial class ProfilePictures
{
/// <inheritdoc />
protected override void BuildTargetModel(ModelBuilder modelBuilder)
{
#pragma warning disable 612, 618
modelBuilder
.HasAnnotation("ProductVersion", "8.0.0")
.HasAnnotation("Relational:MaxIdentifierLength", 63);
NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
{
b.Property<string>("Id")
.HasColumnType("text");
b.Property<string>("ConcurrencyStamp")
.IsConcurrencyToken()
.HasColumnType("text");
b.Property<string>("Name")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.Property<string>("NormalizedName")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.HasKey("Id");
b.HasIndex("NormalizedName")
.IsUnique()
.HasDatabaseName("RoleNameIndex");
b.ToTable("AspNetRoles", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
{
b.Property<int>("Id")
.ValueGeneratedOnAdd()
.HasColumnType("integer");
NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
b.Property<string>("ClaimType")
.HasColumnType("text");
b.Property<string>("ClaimValue")
.HasColumnType("text");
b.Property<string>("RoleId")
.IsRequired()
.HasColumnType("text");
b.HasKey("Id");
b.HasIndex("RoleId");
b.ToTable("AspNetRoleClaims", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
{
b.Property<int>("Id")
.ValueGeneratedOnAdd()
.HasColumnType("integer");
NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
b.Property<string>("ClaimType")
.HasColumnType("text");
b.Property<string>("ClaimValue")
.HasColumnType("text");
b.Property<string>("UserId")
.IsRequired()
.HasColumnType("text");
b.HasKey("Id");
b.HasIndex("UserId");
b.ToTable("AspNetUserClaims", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
{
b.Property<string>("LoginProvider")
.HasColumnType("text");
b.Property<string>("ProviderKey")
.HasColumnType("text");
b.Property<string>("ProviderDisplayName")
.HasColumnType("text");
b.Property<string>("UserId")
.IsRequired()
.HasColumnType("text");
b.HasKey("LoginProvider", "ProviderKey");
b.HasIndex("UserId");
b.ToTable("AspNetUserLogins", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
{
b.Property<string>("UserId")
.HasColumnType("text");
b.Property<string>("RoleId")
.HasColumnType("text");
b.HasKey("UserId", "RoleId");
b.HasIndex("RoleId");
b.ToTable("AspNetUserRoles", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
{
b.Property<string>("UserId")
.HasColumnType("text");
b.Property<string>("LoginProvider")
.HasColumnType("text");
b.Property<string>("Name")
.HasColumnType("text");
b.Property<string>("Value")
.HasColumnType("text");
b.HasKey("UserId", "LoginProvider", "Name");
b.ToTable("AspNetUserTokens", (string)null);
});
modelBuilder.Entity("Wave.Data.ApplicationUser", b =>
{
b.Property<string>("Id")
.HasColumnType("text");
b.Property<int>("AccessFailedCount")
.HasColumnType("integer");
b.Property<string>("ConcurrencyStamp")
.IsConcurrencyToken()
.HasColumnType("text");
b.Property<string>("Email")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.Property<bool>("EmailConfirmed")
.HasColumnType("boolean");
b.Property<bool>("LockoutEnabled")
.HasColumnType("boolean");
b.Property<DateTimeOffset?>("LockoutEnd")
.HasColumnType("timestamp with time zone");
b.Property<string>("NormalizedEmail")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.Property<string>("NormalizedUserName")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.Property<string>("PasswordHash")
.HasColumnType("text");
b.Property<string>("PhoneNumber")
.HasColumnType("text");
b.Property<bool>("PhoneNumberConfirmed")
.HasColumnType("boolean");
b.Property<string>("SecurityStamp")
.HasColumnType("text");
b.Property<bool>("TwoFactorEnabled")
.HasColumnType("boolean");
b.Property<string>("UserName")
.HasMaxLength(256)
.HasColumnType("character varying(256)");
b.HasKey("Id");
b.HasIndex("NormalizedEmail")
.HasDatabaseName("EmailIndex");
b.HasIndex("NormalizedUserName")
.IsUnique()
.HasDatabaseName("UserNameIndex");
b.ToTable("AspNetUsers", (string)null);
});
modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
{
b.Property<int>("Id")
.ValueGeneratedOnAdd()
.HasColumnType("integer");
NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
b.Property<string>("ApplicationUserId")
.HasColumnType("text");
b.Property<Guid>("ImageId")
.HasColumnType("uuid");
b.HasKey("Id");
b.HasIndex("ApplicationUserId")
.IsUnique();
b.ToTable("ProfilePictures", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
{
b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
.WithMany()
.HasForeignKey("RoleId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
{
b.HasOne("Wave.Data.ApplicationUser", null)
.WithMany()
.HasForeignKey("UserId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
{
b.HasOne("Wave.Data.ApplicationUser", null)
.WithMany()
.HasForeignKey("UserId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
{
b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
.WithMany()
.HasForeignKey("RoleId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
b.HasOne("Wave.Data.ApplicationUser", null)
.WithMany()
.HasForeignKey("UserId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
{
b.HasOne("Wave.Data.ApplicationUser", null)
.WithMany()
.HasForeignKey("UserId")
.OnDelete(DeleteBehavior.Cascade)
.IsRequired();
});
modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
{
b.HasOne("Wave.Data.ApplicationUser", null)
.WithOne("ProfilePicture")
.HasForeignKey("Wave.Data.ProfilePicture", "ApplicationUserId")
.OnDelete(DeleteBehavior.SetNull);
});
modelBuilder.Entity("Wave.Data.ApplicationUser", b =>
{
b.Navigation("ProfilePicture");
});
#pragma warning restore 612, 618
}
}
}

View file

@ -0,0 +1,46 @@
using System;
using Microsoft.EntityFrameworkCore.Migrations;
using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
#nullable disable
namespace Wave.Data.Migrations.postgres;
// Add-Migration ProfilePictures -OutputDir Data/Migrations/postgres -Project Wave -StartupProject Wave -Context ApplicationDbContext -Args "ConnectionStrings:DefaultConnection=Host=localhost;Port=5432;AllowAnonymousConnections=true"
/// <inheritdoc />
public partial class ProfilePictures : Migration {
/// <inheritdoc />
protected override void Up(MigrationBuilder migrationBuilder) {
migrationBuilder.CreateTable(
name: "ProfilePictures",
columns: table => new
{
Id = table.Column<int>(type: "integer", nullable: false)
.Annotation("Npgsql:ValueGenerationStrategy",
NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
ImageId = table.Column<Guid>(type: "uuid", nullable: false),
ApplicationUserId = table.Column<string>(type: "text", nullable: true)
},
constraints: table => {
table.PrimaryKey("PK_ProfilePictures", x => x.Id);
table.ForeignKey(
name: "FK_ProfilePictures_AspNetUsers_ApplicationUserId",
column: x => x.ApplicationUserId,
principalTable: "AspNetUsers",
principalColumn: "Id",
onDelete: ReferentialAction.SetNull);
});
migrationBuilder.CreateIndex(
name: "IX_ProfilePictures_ApplicationUserId",
table: "ProfilePictures",
column: "ApplicationUserId",
unique: true);
}
/// <inheritdoc />
protected override void Down(MigrationBuilder migrationBuilder) {
migrationBuilder.DropTable(
name: "ProfilePictures");
}
}

View file

@ -218,6 +218,28 @@ protected override void BuildModel(ModelBuilder modelBuilder)
b.ToTable("AspNetUsers", (string)null); b.ToTable("AspNetUsers", (string)null);
}); });
modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
{
b.Property<int>("Id")
.ValueGeneratedOnAdd()
.HasColumnType("integer");
NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
b.Property<string>("ApplicationUserId")
.HasColumnType("text");
b.Property<Guid>("ImageId")
.HasColumnType("uuid");
b.HasKey("Id");
b.HasIndex("ApplicationUserId")
.IsUnique();
b.ToTable("ProfilePictures", (string)null);
});
modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b => modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
{ {
b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null) b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
@ -268,6 +290,19 @@ protected override void BuildModel(ModelBuilder modelBuilder)
.OnDelete(DeleteBehavior.Cascade) .OnDelete(DeleteBehavior.Cascade)
.IsRequired(); .IsRequired();
}); });
modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
{
b.HasOne("Wave.Data.ApplicationUser", null)
.WithOne("ProfilePicture")
.HasForeignKey("Wave.Data.ProfilePicture", "ApplicationUserId")
.OnDelete(DeleteBehavior.SetNull);
});
modelBuilder.Entity("Wave.Data.ApplicationUser", b =>
{
b.Navigation("ProfilePicture");
});
#pragma warning restore 612, 618 #pragma warning restore 612, 618
} }
} }

View file

@ -0,0 +1,9 @@
using System.ComponentModel.DataAnnotations;
namespace Wave.Data;
public class ProfilePicture {
[Key]
public int Id { get; set; }
public Guid ImageId { get; set; }
}

View file

@ -34,7 +34,7 @@
string connectionString = builder.Configuration.GetConnectionString("DefaultConnection") string connectionString = builder.Configuration.GetConnectionString("DefaultConnection")
?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found."); ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
builder.Services.AddDbContext<ApplicationDbContext>(options => builder.Services.AddDbContextFactory<ApplicationDbContext>(options =>
options.UseNpgsql(connectionString)); options.UseNpgsql(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter(); builder.Services.AddDatabaseDeveloperPageExceptionFilter();

View file

@ -20,7 +20,6 @@
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<Folder Include="Controllers\" />
<Folder Include="Services\" /> <Folder Include="Services\" />
<Folder Include="wwwroot\img\" /> <Folder Include="wwwroot\img\" />
</ItemGroup> </ItemGroup>

File diff suppressed because one or more lines are too long