@axium/server 0.40.2 → 0.41.1

package/dist/api/index.d.ts

@@ -2,6 +2,7 @@ import './acl.js';
 import './admin.js';
 import './metadata.js';
 import './passkeys.js';
+import './pfp.js';
 import './register.js';
 import './session.js';
 import './users.js';

package/dist/api/index.js

@@ -2,6 +2,7 @@ import './acl.js';
 import './admin.js';
 import './metadata.js';
 import './passkeys.js';
+import './pfp.js';
 import './register.js';
 import './session.js';
 import './users.js';

package/dist/api/pfp.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/pfp.js

@@ -0,0 +1,121 @@
+import { sql } from 'kysely';
+import { warn } from 'ioium/node';
+import { execSync } from 'node:child_process';
+import * as z from 'zod';
+import { checkAuthForUser } from '../auth.js';
+import { config } from '../config.js';
+import { database as db } from '../database.js';
+import { error, withError } from '../requests.js';
+import { addRoute } from '../routes.js';
+let imageSize;
+try {
+    const mod = await import('image-size');
+    imageSize = mod.imageSize;
+}
+catch {
+    try {
+        // Fall back to `identify` from ImageMagick
+        execSync('command -v identify');
+        imageSize = function identifyImageSize(input) {
+            const stdout = execSync('identify -ping -format "%w %h" -', { input, timeout: 1000 });
+            const [width, height] = stdout.toString().trim().split(' ').map(Number);
+            return { width, height };
+        };
+    }
+    catch {
+        warn('Can not determine profile picture dimensions because neither image-size or ImageMagick is available');
+    }
+}
+addRoute({
+    path: '/raw/pfp/:id',
+    params: { id: z.uuid() },
+    async HEAD(request, { id: userId }) {
+        const pfp = await db.selectFrom('profile_pictures').selectAll().where('userId', '=', userId).executeTakeFirst();
+        if (!pfp)
+            error(404, 'Profile picture not found');
+        if (!pfp.isPublic) {
+            try {
+                await checkAuthForUser(request, userId);
+            }
+            catch (e) {
+                if (!(e instanceof Error))
+                    throw e;
+                if (e.message == 'User ID mismatch')
+                    error(403, "User's profile picture is not public");
+                throw e;
+            }
+        }
+        return new Response(null, {
+            headers: {
+                'content-type': pfp.type,
+                'content-length': pfp.data.length.toString(),
+            },
+        });
+    },
+    async GET(request, { id: userId }) {
+        const pfp = await db.selectFrom('profile_pictures').selectAll().where('userId', '=', userId).executeTakeFirst();
+        if (!pfp)
+            error(404, 'Profile picture not found');
+        if (!pfp.isPublic) {
+            try {
+                await checkAuthForUser(request, userId);
+            }
+            catch (e) {
+                if (!(e instanceof Error))
+                    throw e;
+                if (e.message == 'User ID mismatch')
+                    error(403, "User's profile picture is not public");
+                throw e;
+            }
+        }
+        return new Response(pfp.data, {
+            headers: {
+                'content-type': pfp.type,
+                'content-length': pfp.data.length.toString(),
+            },
+        });
+    },
+    async POST(request, { id: userId }) {
+        const { enabled, max_size, max_length } = config.user_pfp;
+        if (!enabled)
+            error(503, 'Custom profile pictures are disabled');
+        await checkAuthForUser(request, userId);
+        const type = request.headers.get('content-type');
+        if (!type)
+            error(400, 'Missing Content-Type header');
+        if (!type.startsWith('image/'))
+            error(415, 'Only image files are allowed');
+        const size = Number(request.headers.get('content-length'));
+        if (!Number.isSafeInteger(size))
+            error(400, 'Invalid Content-Length header');
+        if (max_size && size / 1000 > max_size)
+            error(413, `Profile picture must be smaller than ${max_size} KB`);
+        const data = await request.bytes();
+        if (data.byteLength != size)
+            error(400, 'Content-Length does not match actual data size');
+        const { width, height } = imageSize?.(data) || { width: 0, height: 0 };
+        if (imageSize && (!width || !height))
+            error(400, 'Invalid image dimensions');
+        if (max_length && (width > max_length || height > max_length))
+            error(413, `Profile picture must be smaller than ${max_length}x${max_length} pixels`);
+        const { isInsert } = await db
+            .insertInto('profile_pictures')
+            .values({ userId, data, type })
+            .onConflict(oc => oc.column('userId').doUpdateSet({ data, type }))
+            .returning(sql `xmax = 0`.as('isInsert'))
+            .executeTakeFirstOrThrow()
+            .catch(withError('Failed to upload profile picture', 500));
+        return new Response(null, { status: isInsert ? 201 : 200 });
+    },
+    async DELETE(request, { id: userId }) {
+        await checkAuthForUser(request, userId);
+        const result = await db
+            .deleteFrom('profile_pictures')
+            .where('userId', '=', userId)
+            .executeTakeFirst()
+            .catch(withError('Failed to delete profile picture', 500));
+        if (!result?.numDeletedRows)
+            error(404, 'Profile picture not found');
+        return new Response(null, { status: 204 });
+    },
+});

package/dist/config.d.ts

@@ -42,6 +42,11 @@ export declare const Config: z.ZodObject<{
     request_size_limit: z.ZodOptional<z.ZodOptional<z.ZodNumber>>;
     show_duplicate_state: z.ZodOptional<z.ZodBoolean>;
     user_discovery: z.ZodOptional<z.ZodLiteral<"disabled" | "user" | "admin" | "public">>;
+    user_pfp: z.ZodOptional<z.ZodObject<{
+        enabled: z.ZodOptional<z.ZodBoolean>;
+        max_size: z.ZodOptional<z.ZodNumber>;
+        max_length: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$loose>>;
     verifications: z.ZodOptional<z.ZodObject<{
         timeout: z.ZodOptional<z.ZodNumber>;
         email: z.ZodOptional<z.ZodBoolean>;
@@ -119,6 +124,11 @@ export declare const ConfigFile: z.ZodObject<{
     request_size_limit: z.ZodOptional<z.ZodOptional<z.ZodOptional<z.ZodNumber>>>;
     show_duplicate_state: z.ZodOptional<z.ZodOptional<z.ZodBoolean>>;
     user_discovery: z.ZodOptional<z.ZodOptional<z.ZodLiteral<"disabled" | "user" | "admin" | "public">>>;
+    user_pfp: z.ZodOptional<z.ZodOptional<z.ZodObject<{
+        enabled: z.ZodOptional<z.ZodBoolean>;
+        max_size: z.ZodOptional<z.ZodNumber>;
+        max_length: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$loose>>>;
     verifications: z.ZodOptional<z.ZodOptional<z.ZodObject<{
         timeout: z.ZodOptional<z.ZodNumber>;
         email: z.ZodOptional<z.ZodBoolean>;

package/dist/config.js

@@ -63,6 +63,16 @@ export const Config = z
     show_duplicate_state: z.boolean(),
     /** Who can use the user discovery API. For example, setting to `admin` means regular users need to type a full email in the ACL dialog and won't be shown results */
     user_discovery: z.literal(['disabled', 'admin', 'user', 'public']),
+    user_pfp: z
+        .looseObject({
+        /** Whether user's can upload custom profile pictures */
+        enabled: z.boolean(),
+        /** Max PFP size in KB. Set to zero for no limit */
+        max_size: z.number().min(0),
+        /** Max dimensions on a side. Set to zero for no limit */
+        max_length: z.number().min(0),
+    })
+        .partial(),
     verifications: z
         .looseObject({
         /** In minutes */
@@ -130,6 +140,11 @@ export const defaultConfig = {
     show_duplicate_state: false,
     request_size_limit: 0,
     user_discovery: 'user',
+    user_pfp: {
+        enabled: true,
+        max_size: 500,
+        max_length: 2000,
+    },
     verifications: {
         timeout: 60,
         email: false,

package/dist/db/schema.json

@@ -87,6 +87,24 @@
                     }
                 }
             }
+        },
+        {
+            "delta": true,
+            "alter_tables": {
+                "users": {
+                    "drop_columns": ["image"]
+                }
+            },
+            "add_tables": {
+                "profile_pictures": {
+                    "columns": {
+                        "userId": { "type": "uuid", "required": true, "primary": true, "references": "users.id", "onDelete": "cascade" },
+                        "type": { "type": "text", "required": true },
+                        "data": { "type": "bytea", "required": true },
+                        "isPublic": { "type": "boolean", "required": true, "default": false }
+                    }
+                }
+            }
         }
     ],
     "wipe": ["users", "verifications", "passkeys", "sessions", "audit_log"]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/server",
-	"version": "0.40.2",
+	"version": "0.41.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -47,7 +47,7 @@
 		"clean": "rm -rf build .svelte-kit node_modules/{.vite,.vite-temp}"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.20.0",
+		"@axium/client": ">=0.21.0",
 		"@axium/core": ">=0.24.0",
 		"kysely": "^0.28.0",
 		"utilium": "^2.6.0",
@@ -59,6 +59,7 @@
 		"@types/pg": "^8.11.11",
 		"commander": "^14.0.0",
 		"cookie_v1": "npm:cookie@^1.0.2",
+		"ioium": "^0.1.0",
 		"logzen": "^0.7.0",
 		"pg": "^8.14.1",
 		"svelte": "^5.36.0"
@@ -68,6 +69,7 @@
 		"vite-plugin-mkcert": "^1.17.8"
 	},
 	"optionalDependencies": {
+		"image-size": "^2.0.2",
 		"ua-parser-js": "^2.0.9"
 	}
 }

package/routes/account/+page.svelte

@@ -1,25 +1,50 @@
 <script lang="ts">
 	import { fetchAPI, text } from '@axium/client';
-	import { ClipboardCopy, FormDialog, Icon, Logout, SessionList, ZodForm } from '@axium/client/components';
+	import { ClipboardCopy, FormDialog, Icon, Logout, Popover, SessionList, UserPFP, ZodForm } from '@axium/client/components';
 	import '@axium/client/styles/account';
 	import { createPasskey, deletePasskey, deleteUser, sendVerificationEmail, updatePasskey, updateUser } from '@axium/client/user';
 	import { preferenceLabels, Preferences } from '@axium/core/preferences';
-	import { getUserImage } from '@axium/core/user';
 	import type { PageProps } from './$types';
+	import { toast, toastStatus } from '@axium/client/toast';
+	import { contextMenu } from '@axium/client/attachments';
+	import { upload } from 'utilium/dom.js';
 
 	const { data }: PageProps = $props();
 	const { canVerify } = data;
 
-	let verificationSent = $state(false);
-	let currentSession = $state(data.currentSession);
-	let user = $state(data.user);
-	let passkeys = $state(data.passkeys);
-	let sessions = $state(data.sessions);
+	let verificationSent = $state(false),
+		currentSession = $state(data.currentSession),
+		user = $state(data.user),
+		passkeys = $state(data.passkeys),
+		sessions = $state(data.sessions),
+		hasDefaultPFP = $state(false);
 
 	async function _editUser(data: Record<string, FormDataEntryValue>) {
 		const result = await updateUser(user.id, data);
 		user = result;
 	}
+
+	async function updatePFP() {
+		try {
+			const file = await upload('image/*');
+			const response = await fetch('/raw/pfp/' + user.id, {
+				method: 'POST',
+				headers: { 'content-type': file.type, 'content-length': file.size.toString() },
+				body: file,
+			});
+			if (!response.ok) {
+				if (response.headers.get('content-type')?.endsWith('/json')) {
+					const error = await response.json();
+					throw error.message;
+				} else {
+					throw new Error('Failed to update profile picture');
+				}
+			}
+			await toast('success', text('page.account.pfp.toast_updated'));
+		} catch (e) {
+			await toast('error', e);
+		}
+	}
 </script>
 
 <svelte:head>
@@ -33,8 +58,30 @@
 {/snippet}
 
 <div class="Account flex-content">
-	<div id="pfp-container">
-		<img id="pfp" src={getUserImage(user)} alt={text('page.account.profile_alt')} width="100px" height="100px" />
+	<div id="pfp-container" {@attach contextMenu({ i: 'upload', text: text('page.account.pfp.update'), action: updatePFP })}>
+		<UserPFP {user} --size="100px" bind:isDefault={hasDefaultPFP} />
+		{#if hasDefaultPFP}
+			<Icon i="regular/camera" id="pfp-menu-toggle" onclick={updatePFP} />
+		{:else}
+			<Popover>
+				{#snippet toggle()}
+					<Icon i="regular/camera" id="pfp-menu-toggle" />
+				{/snippet}
+
+				<div class="menu-item" onclick={updatePFP}>
+					<Icon i="upload" />
+					<span>{text('page.account.pfp.update')}</span>
+				</div>
+
+				<div
+					class="menu-item"
+					onclick={() => toastStatus(fetch('/raw/pfp/' + user.id, { method: 'DELETE' }), text('page.account.pfp.toast_removed'))}
+				>
+					<Icon i="trash" />
+					<span>{text('page.account.pfp.remove')}</span>
+				</div>
+			</Popover>
+		{/if}
 	</div>
 	<p class="greeting">{text('page.account.greeting', { name: user.name })}</p>
 
@@ -185,19 +232,16 @@
 		width: 100px;
 		height: 100px;
 		margin-top: 3em;
-
-		:global(.MenuToggle) {
-			float: right;
-			position: relative;
-			top: -24px;
-		}
 	}
 
-	#pfp {
-		width: 100px;
-		height: 100px;
-		border-radius: 50%;
-		border: 1px solid #8888;
+	:global(#pfp-menu-toggle) {
+		float: right;
+		position: relative;
+		top: -24px;
+
+		&:hover {
+			cursor: pointer;
+		}
 	}
 
 	.greeting {

package/routes/admin/users/[id]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { deleteUser, fetchAPI, text } from '@axium/client';
-	import { ClipboardCopy, FormDialog, Icon, SessionList, ZodForm, ZodInput } from '@axium/client/components';
+	import { ClipboardCopy, FormDialog, Icon, SessionList, UserPFP, ZodForm, ZodInput } from '@axium/client/components';
 	import { toast } from '@axium/client/toast';
 	import '@axium/client/styles/account';
 	import { preferenceLabels, Preferences, User } from '@axium/core';
@@ -10,7 +10,8 @@
 	let user = $state(data.user);
 	const { session } = data;
 
-	let sessions = $state(user.sessions);
+	let sessions = $state(user.sessions),
+		hasDefaultPFP = $state(false);
 
 	async function updateValue(val: User) {
 		try {
@@ -94,12 +95,9 @@
 	</div>
 	<div class="item info">
 		<p>{text('page.admin.users.profile_image')}</p>
-		{#if user.image}
-			<a href={user.image} target="_blank" rel="noopener noreferrer">{user.image}</a>
-			<ClipboardCopy value={user.image} --size="16px" />
-		{:else}
-			<i>{text('page.admin.users.default_image')}</i>
-			<p></p>
+		<UserPFP {user} bind:isDefault={hasDefaultPFP} />
+		{#if hasDefaultPFP}
+			<p>{text('page.admin.users.default_image')}</p>
 		{/if}
 	</div>
 	<div class="item info">

package/schemas/config.json

@@ -147,6 +147,23 @@
                 "public"
             ]
         },
+        "user_pfp": {
+            "type": "object",
+            "properties": {
+                "enabled": {
+                    "type": "boolean"
+                },
+                "max_size": {
+                    "type": "number",
+                    "minimum": 0
+                },
+                "max_length": {
+                    "type": "number",
+                    "minimum": 0
+                }
+            },
+            "additionalProperties": {}
+        },
         "verifications": {
             "type": "object",
             "properties": {