Implemented Profile Pictures

Wave/Components/Account/Pages/Manage/Index.razor

@@ -1,77 +1,78 @@
 @page "/Account/Manage"
 
-@using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
+@using Microsoft.EntityFrameworkCore
 @using Wave.Data
+@using Wave.Services
 
+@rendermode InteractiveServer
+@inject NavigationManager Navigation
 @inject UserManager<ApplicationUser> UserManager
-@inject SignInManager<ApplicationUser> SignInManager
+@inject IDbContextFactory<ApplicationDbContext> ContextFactory
-@inject IdentityUserAccessor UserAccessor
+@inject ImageService ImageService
-@inject IdentityRedirectManager RedirectManager
 
 <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 class="form-floating mb-3">
-                <input type="text" value="@username" class="form-control" placeholder="Please choose your username." disabled />
-                <label for="username" class="form-label">Username</label>
         </div>
-            <div class="form-floating mb-3">
+        <input class="input input-bordered w-full" type="text" value="@Username"
-                <InputText @bind-Value="Input.PhoneNumber" class="form-control" placeholder="Please enter your phone number." />
+               placeholder="Please choose your username." disabled/>
-                <label for="phone-number" class="form-label">Phone number</label>
+    </label>
-                <ValidationMessage For="() => Input.PhoneNumber" class="text-danger" />
+
+    @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>
-            <button type="submit" class="w-100 btn btn-lg btn-primary">Save</button>
-        </EditForm>
         </div>
+    }
+    <label class="form-control w-full">
+        <div class="label">
+            <span class="label-text">Profile Picture</span>
+        </div>
+        <FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
+    </label>
 </div>
 
 @code {
-    private ApplicationUser user = default!;
+    private ApplicationUser? User { get; set; } = default!;
-    private string? username;
+    private string? Username { get; set; }
-    private string? phoneNumber;
 
     [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()
-    {
-        if (Input.PhoneNumber != phoneNumber)
-        {
-            var setPhoneResult = await UserManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
-            if (!setPhoneResult.Succeeded)
-            {
-                RedirectManager.RedirectToCurrentPageWithStatus("Error: Failed to set phone number.", HttpContext);
         }
     }
 
-        await SignInManager.RefreshSignInAsync(user);
+    private async Task ProfilePictureChanged(string tempFilePath) {
-        RedirectManager.RedirectToCurrentPageWithStatus("Your profile has been updated", HttpContext);
+        var guid = await ImageService.StoreImageAsync(tempFilePath);
+        if (!guid.HasValue) throw new ApplicationException("Processing Image failed.");
+
+        await using var context = await ContextFactory.CreateDbContextAsync();
+        if (User.ProfilePicture is not null) {
+            context.Remove(User.ProfilePicture);
         }
 
-    private sealed class InputModel
+        User.ProfilePicture = new ProfilePicture() {
-    {
+            ImageId = guid.Value
-        [Phone]
+        };
-        [Display(Name = "Phone number")]
+
-        public string? PhoneNumber { get; set; }
+        context.Update(User);
+        await context.SaveChangesAsync();
+
+        // TODO notify changed pfp
     }
+
 }

Wave/Components/Layout/NavMenu.razor

@@ -1,4 +1,5 @@
-@implements IDisposable
+@using System.Security.Claims
+@implements IDisposable
 
 @inject NavigationManager NavigationManager
 
@@ -18,7 +19,17 @@
 				<AuthorizeView>
 					<Authorized>
 						<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>
 							<form action="Account/Logout" method="post">

Wave/Controllers/UserController.cs

@@ -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);
+    }
+}

Wave/Data/ApplicationDbContext.cs

@@ -4,4 +4,21 @@
 namespace Wave.Data;
 
 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");
+        });
+    }
+}

Wave/Data/ApplicationUser.cs

@@ -2,5 +2,6 @@
 
 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; }
+}

Wave/Data/Migrations/postgres/20240113145500_ProfilePictures.Designer.cs

@@ -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
+        }
+    }
+}

Wave/Data/Migrations/postgres/20240113145500_ProfilePictures.cs

@@ -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");
+    }
+}

Wave/Data/Migrations/postgres/ApplicationDbContextModelSnapshot.cs

@@ -218,6 +218,28 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                     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)
@@ -268,6 +290,19 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                         .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
         }
     }

Wave/Data/ProfilePicture.cs

@@ -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; }
+}

Wave/Program.cs

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

Wave/Wave.csproj

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