add support for profile pictures (#33)

prisma/migrations/20230306211437_add_profile_picture/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "user" ADD COLUMN "picture" TEXT;

prisma/schema.prisma

@@ -15,6 +15,7 @@ model User {
     username    String    @unique
     name        String
     email       String    @unique @default("[email protected]")
+    picture     String?
     items       Item[]    @relation("MyItems")
     addedItems  Item[]    @relation("AddedItems")
     plegedItems Item[]    @relation("PledgedItems")

src/app.d.ts

@@ -7,6 +7,7 @@ declare global {
 			name: string;
 			email: string;
 			roleId: number;
+			picture?: string | null;
 		};
 	}
 

src/lib/components/Avatar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Avatar } from "@skeletonlabs/skeleton";
+
+	export let user: {
+		name: string;
+		picture?: string | null;
+	};
+</script>
+
+<Avatar
+	initials={user?.name.split(" ").reduce((x, y) => x + y.at(0), "")}
+	src={user?.picture ? `/api/assets/${user.picture}` : ""}
+	background={user?.picture ? "" : "bg-primary-400-500-token"}
+	{...$$props}
+/>

src/lib/components/UserCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar } from "@skeletonlabs/skeleton";
+	import Avatar from "./Avatar.svelte";
 
 	export let hideCount = false;
 	export let user: {
@@ -15,10 +15,7 @@
 <a class="card" href="/wishlists/{user.username}" data-sveltekit-preload-data>
 	<div class="card-header">
 		<div class="flex flex-row space-x-4 items-center">
-			<Avatar
-				initials={user.name.split(" ").reduce((x, y) => x + y.at(0), "")}
-				background="bg-primary-400-500-token"
-			/>
+			<Avatar {user} />
 			<span class="font-bold text-3xl">
 				<span class="unstyled no-underline text-primary-700-200-token">{user.name}</span>
 			</span>

src/lib/components/navigation/NavMenu.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { invalidateAll } from "$app/navigation";
 	import type { ClientUser } from "@lucia-auth/sveltekit/client";
-	import { Avatar, LightSwitch, popup, type PopupSettings } from "@skeletonlabs/skeleton";
+	import { LightSwitch, popup, type PopupSettings } from "@skeletonlabs/skeleton";
 	import type { Readable } from "svelte/store";
+	import Avatar from "../Avatar.svelte";
 
 	export let user: Readable<ClientUser>;
 
@@ -16,10 +17,7 @@
 	<div class="flex flex-row space-x-2 items-center">
 		<span class="relative">
 			<button use:popup={menuSettings}>
-				<Avatar
-					initials={$user.name.split(" ").reduce((x, y) => x + y.at(0), "")}
-					background="bg-primary-400-500-token"
-				/>
+				<Avatar user={$user} />
 			</button>
 			<nav class="list-nav card p-4 w-fit shadow-xl" data-popup="user">
 				<ul>

src/lib/server/auth.ts

@@ -12,7 +12,8 @@ export const auth = lucia({
 			username: userData.username,
 			email: userData.email,
 			name: userData.name,
-			roleId: userData.roleId
+			roleId: userData.roleId,
+			picture: userData.picture
 		};
 	}
 });

src/routes/+page.server.ts

@@ -13,6 +13,7 @@ export const load = (async ({ locals }) => {
 		select: {
 			name: true,
 			username: true,
+			picture: true,
 			items: {
 				select: {
 					id: true
@@ -47,6 +48,7 @@ export const load = (async ({ locals }) => {
 		select: {
 			username: true,
 			name: true,
+			picture: true,
 			items: {
 				select: {
 					id: true

src/routes/account/+page.server.ts

@@ -3,6 +3,7 @@ import { client } from "$lib/server/prisma";
 import { resetPasswordSchema } from "$lib/validations/resetPassword";
 import type { PrismaClientKnownRequestError } from "@prisma/client/runtime";
 import { fail, redirect } from "@sveltejs/kit";
+import { writeFileSync } from "fs";
 import { z } from "zod";
 import type { Actions, PageServerLoad } from "./$types";
 
@@ -62,6 +63,39 @@ export const actions: Actions = {
 		}
 	},
 
+	profilePicture: async ({ request, locals }) => {
+		const { user, session } = await locals.validateUser();
+		if (!session) throw redirect(302, "/login?ref=/account");
+
+		const form = await request.formData();
+		const image = form.get("profilePic") as File;
+
+		let filename = null;
+
+		const create_image = image.size > 0 && image.size <= 5000000;
+
+		if (create_image) {
+			const ext = image.name.split(".").pop();
+			filename = user?.username + "-" + Date.now().toString() + "." + ext;
+
+			const ab = await image.arrayBuffer();
+
+			writeFileSync(`uploads/${filename}`, Buffer.from(ab));
+			console.log("wrote image");
+		}
+
+		if (filename) {
+			await client.user.update({
+				where: {
+					id: user.userId
+				},
+				data: {
+					picture: filename
+				}
+			});
+		}
+	},
+
 	passwordchange: async ({ request, locals }) => {
 		const { user, session } = await locals.validateUser();
 		if (!session) throw redirect(302, "/login?ref=/account");

src/routes/account/+page.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { enhance } from "$app/forms";
 	import ChangePassword from "$lib/components/account/ChangePassword.svelte";
 	import EditProfile from "$lib/components/account/EditProfile.svelte";
-	import { Avatar, Tab, TabGroup } from "@skeletonlabs/skeleton";
+	import Avatar from "$lib/components/Avatar.svelte";
+	import { FileButton, Tab, TabGroup } from "@skeletonlabs/skeleton";
 	import type { PageServerData } from "./$types";
 
 	export let data: PageServerData;
 
-	$: initials = data.user.name.split(" ").reduce((x, y) => x + y.at(0), "");
+	let submitButton: HTMLElement;
+
 	let tabSet = 0;
 </script>
 
@@ -16,7 +19,21 @@
 	<svelte:fragment slot="panel">
 		{#if tabSet === 0}
 			<div class="flex flex-col w-fit items-center">
-				<Avatar width="w-24 md:w-32" {initials} background="bg-primary-400-500-token" />
+				<div class="picture">
+					<Avatar user={data.user} width="w-24 md:w-32" />
+					<form method="POST" class="add-icon" action="?/profilePicture" use:enhance>
+						<FileButton
+							name="profilePic"
+							id="profilePic"
+							accept="image/*"
+							button="btn-icon variant-glass-secondary"
+							on:change={() => submitButton.click()}
+						>
+							<iconify-icon icon="ion:camera" class="text-2xl" />
+						</FileButton>
+						<button type="submit" bind:this={submitButton} />
+					</form>
+				</div>
 
 				<EditProfile user={data.user} />
 			</div>
@@ -29,3 +46,23 @@
 <svelte:head>
 	<title>Account</title>
 </svelte:head>
+
+<style>
+	.picture {
+		width: 100% !important;
+		height: 100% !important;
+		max-width: 150px !important;
+		max-height: 150px !important;
+		margin: auto;
+		position: relative;
+	}
+
+	.add-icon {
+		width: 50px;
+		height: 50px;
+		border-radius: 100%;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+</style>