@axium/client 0.33.5 → 0.35.0

package/assets/styles.css

@@ -441,6 +441,42 @@ div.toast {
 		border: var(--border-accent);
 		background-color: var(--bg-accent);
 	}
+
+	&.progress {
+		border: var(--border-accent);
+		background-color: var(--bg-accent);
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+		text-align: left;
+		min-width: 16em;
+
+		.toast-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1em;
+
+			button {
+				display: inline-flex;
+				cursor: pointer;
+			}
+		}
+
+		.subtle {
+			opacity: 69%;
+			font-size: 0.85em;
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		progress {
+			width: 100%;
+			height: 4px;
+		}
+	}
 }
 
 @media (width >= 700px) {

package/dist/cli/cache.d.ts

@@ -34,8 +34,8 @@ export declare const meta: Handle<z.ZodObject<{
         user: z.ZodObject<{
             id: z.ZodUUID;
             name: z.ZodString;
-            username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-            email: z.ZodEmail;
+            username: z.ZodString;
+            email: z.ZodOptional<z.ZodNullable<z.ZodEmail>>;
             emailVerified: z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>;
             preferences: z.ZodLazy<z.ZodObject<{
                 debug: z.ZodDefault<z.ZodBoolean>;

package/dist/cli/config.d.ts

@@ -10,7 +10,7 @@ export declare function session(): {
     user: {
         id: string;
         name: string;
-        email: string;
+        username: string;
         preferences: {
             debug: boolean;
         };
@@ -19,7 +19,7 @@ export declare function session(): {
         registeredAt: Date;
         isAdmin: boolean;
         isSuspended: boolean;
-        username?: string | null | undefined;
+        email?: string | null | undefined;
         emailVerified?: Date | null | undefined;
     };
     name?: string | null | undefined;

package/dist/locales.d.ts

@@ -29,7 +29,6 @@ declare let currentLoaded: {
         readonly no_results: "No results";
     };
     readonly Login: {
-        readonly email: "Email";
         readonly register: "Register instead";
     };
     readonly Logout: {
@@ -37,9 +36,7 @@ declare let currentLoaded: {
         readonly question: "Are you sure you want to log out?";
     };
     readonly Register: {
-        readonly email: "Email";
         readonly login: "Login instead";
-        readonly name: "Display Name";
     };
     readonly SessionList: {
         readonly created: "Created {date}";
@@ -84,6 +81,8 @@ declare let currentLoaded: {
         readonly none: "None";
         readonly ok: "Okay";
         readonly preferences: "Preferences";
+        readonly recovery: "Recovery";
+        readonly recovery_method_disabled: "This recovery method is disabled and can't be used.";
         readonly register: "Register";
         readonly rename: "Rename";
         readonly sessions: "Sessions";
@@ -91,7 +90,7 @@ declare let currentLoaded: {
         readonly success: "Success";
         readonly unknown: "Unknown";
         readonly unnamed: "Unnamed";
-        readonly user_display_name: "Name";
+        readonly user_display_name: "Display name";
         readonly username: "Username";
         readonly yes: "Yes";
     };
@@ -127,8 +126,11 @@ declare let currentLoaded: {
                 readonly toast_updated: "Profile picture updated";
             };
             readonly preferences: "Preferences";
+            readonly remove_email: "Remove email";
+            readonly remove_email_confirm: "Are you sure you want to remove your recovery email?";
             readonly sessions: "Sessions";
             readonly title: "Your Account";
+            readonly toast_username_updated: "Username updated";
             readonly user_id: "User ID";
             readonly user_id_hint: "This is your UUID. It can't be changed.";
             readonly verification_sent: "Verification email sent";

package/dist/user.d.ts

@@ -1,4 +1,4 @@
-import type { NewSessionResponse, Passkey, PasskeyChangeable, Session, User, UserChangeable, UserPublic, Verification } from '@axium/core';
+import type { AuthInfo, NewSessionResponse, Passkey, PasskeyChangeable, Session, User, UserChangeable, UserPublic, Verification } from '@axium/core';
 import * as z from 'zod';
 import Cache from './cache.js';
 export declare function login(userId: string): Promise<NewSessionResponse>;
@@ -6,7 +6,7 @@ export declare function login(userId: string): Promise<NewSessionResponse>;
  * Create an elevated session for the user to perform sensitive actions.
  */
 export declare function elevate(userId: string): Promise<void>;
-export declare function loginByEmail(email: string): Promise<NewSessionResponse>;
+export declare function loginByUsername(username: string): Promise<NewSessionResponse>;
 export declare function getCurrentSession(): Promise<Session & {
     user: User;
 }>;
@@ -27,7 +27,10 @@ export declare function fullUserInfo(userId: string): Promise<User & {
  * @param deletingId The UUID of the user performing the deletion (for authentication). Defaults to userId.
  */
 export declare function deleteUser(userId: string, deletingId?: string): Promise<User>;
-export declare function emailVerificationEnabled(userId: string): Promise<boolean>;
+/**
+ * Get which authentication-related features are available, e.g. account recovery methods.
+ */
+export declare function getAuthInfo(userId: string): Promise<AuthInfo>;
 export declare function sendVerificationEmail(userId: string): Promise<Verification>;
 export declare function verifyEmail(userId: string, token: string): Promise<void>;
 export declare function getPasskeys(userId: string): Promise<Passkey[]>;

package/dist/user.js

@@ -1,7 +1,8 @@
+import { UserRegistrationInit } from '@axium/core/user';
 import { startAuthentication, startRegistration } from '@simplewebauthn/browser';
 import * as z from 'zod';
-import { fetchAPI } from './requests.js';
 import Cache from './cache.js';
+import { fetchAPI } from './requests.js';
 export async function login(userId) {
     const options = await fetchAPI('PUT', 'users/:id/auth', { type: 'login' }, userId);
     const response = await startAuthentication({ optionsJSON: options });
@@ -15,11 +16,8 @@ export async function elevate(userId) {
     const response = await startAuthentication({ optionsJSON: options });
     await fetchAPI('POST', 'users/:id/auth', response, userId);
 }
-export async function loginByEmail(email) {
-    const { id: userId } = await fetchAPI('POST', 'user_id', {
-        using: 'email',
-        value: email,
-    });
+export async function loginByUsername(username) {
+    const { id: userId } = await fetchAPI('POST', 'user_id', { using: 'username', value: username });
     return await login(userId);
 }
 let _currentSession = null;
@@ -44,15 +42,10 @@ export async function logoutCurrentSession() {
     return await fetchAPI('DELETE', 'session');
 }
 export async function register(_data) {
-    const data = z.object({ name: z.string(), email: z.email() }).parse(_data);
+    const data = UserRegistrationInit.parse(_data);
     const { options, userId } = await fetchAPI('PUT', 'register', data);
     const response = await startRegistration({ optionsJSON: options });
-    await fetchAPI('POST', 'register', {
-        userId,
-        name: data.name,
-        email: data.email,
-        response,
-    });
+    await fetchAPI('POST', 'register', { userId, response, ...data });
 }
 function _checkId(userId) {
     try {
@@ -91,10 +84,12 @@ export async function deleteUser(userId, deletingId = userId) {
     userCache.invalidate(userId);
     return result;
 }
-export async function emailVerificationEnabled(userId) {
+/**
+ * Get which authentication-related features are available, e.g. account recovery methods.
+ */
+export async function getAuthInfo(userId) {
     _checkId(userId);
-    const { enabled } = await fetchAPI('OPTIONS', 'users/:id/verify/email', {}, userId);
-    return enabled;
+    return await fetchAPI('OPTIONS', 'users/:id/auth', {}, userId);
 }
 export async function sendVerificationEmail(userId) {
     _checkId(userId);

package/lib/AccessControlDialog.svelte

@@ -39,7 +39,7 @@
 	</div>
 
 	{#each acl as control, i (control.userId || control.role || control.tag)}
-		{@const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
+		{const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
 			try {
 				const updated = await updateACL(itemType, item.id, getTarget(control), { [key]: e.currentTarget.checked });
 				Object.assign(control, updated);
@@ -80,7 +80,7 @@
 			</div>
 			<div class="permissions">
 				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
-					{@const id = `${item.id}.${getTarget(control)}.${key}`}
+					{const id = $derived(`${item.id}.${getTarget(control)}.${key}`)}
 					<span class="icon-text">
 						{#if editable}
 							<input {id} type="checkbox" onchange={update(key)} />

package/lib/FormDialog.svelte

@@ -24,7 +24,7 @@
 		/** Change the text displayed for the submit button */
 		submitText?: string;
 		/** Called on submission, this should do the actual submission */
-		submit?(data: Record<string, FormDataEntryValue>): Promise<any>;
+		submit?(data: Record<string, FormDataEntryValue>): any;
 		/** Whether to display the dialog as a full-page form */
 		pageMode?: boolean;
 		submitDanger?: boolean;
@@ -47,7 +47,7 @@
 	function onsubmit(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
 		const data = Object.fromEntries(new FormData(e.currentTarget));
-		submit(data)
+		Promise.resolve(submit(data))
 			.then(result => {
 				if (!pageMode) dialog!.close();
 			})

package/lib/InlineEdit.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { prettifyError, type ZodType } from 'zod';
+	import Icon from './Icon.svelte';
+
+	let {
+		value,
+		commit,
+		close,
+		schema,
+		optional = false,
+		selectionRange,
+		placeholder,
+		confirmLabel = text('generic.change'),
+	}: {
+		/** The committed value being edited. */
+		value?: string | null;
+		/** Called with the new value when a change is confirmed. `null` means the value was cleared (only possible when `optional`). */
+		commit(value: string): unknown;
+		/** Called when editing ends, whether or not a change was committed. */
+		close(): void;
+		/** Validates the draft as the user types and before committing. Errors float above the input. */
+		schema?: ZodType;
+		/** Whether clearing the input commits `null` instead of closing without changes. */
+		optional?: boolean;
+		/** The range of the value to select when editing starts. Defaults to the entire value. */
+		selectionRange?: [number, number];
+		placeholder?: string;
+		confirmLabel?: string;
+	} = $props();
+
+	let draft = $state(value ?? ''),
+		error = $state<string>();
+
+	function validate(val: string | null): boolean {
+		const result = val === null && optional ? undefined : schema?.safeParse(val);
+		error = result?.error ? prettifyError(result.error) : undefined;
+		return !result || result.success;
+	}
+
+	function confirm() {
+		const newValue = draft.trim() || null;
+		if (newValue === (value ?? null) || (newValue === null && !optional)) return close();
+		if (!validate(newValue)) return;
+		commit(newValue!);
+		close();
+	}
+</script>
+
+<span
+	class="InlineEdit"
+	data-no-select
+	onclick={e => e.stopPropagation()}
+	{@attach span => {
+		const input = span.querySelector('input')!;
+		requestAnimationFrame(() => {
+			input.focus();
+			input.setSelectionRange(...(selectionRange ?? [0, draft.length]));
+		});
+		const onOutside = (e: PointerEvent) => !span.contains(e.target as Node) && close();
+		requestAnimationFrame(() => document.addEventListener('pointerdown', onOutside, true));
+		return () => document.removeEventListener('pointerdown', onOutside, true);
+	}}
+>
+	{#if error}<span class="InlineEdit-error">{error}</span>{/if}
+	<input
+		bind:value={draft}
+		{placeholder}
+		class={[error && 'error']}
+		oninput={() => validate(draft.trim() || null)}
+		onkeydown={e => {
+			if (e.key == 'Enter') confirm();
+			else if (e.key == 'Escape') close();
+		}}
+	/>
+	<button class="reset InlineEdit-confirm" aria-label={confirmLabel} onclick={confirm}>
+		<Icon i="check" />
+	</button>
+</span>
+
+<style>
+	.InlineEdit {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		min-width: 0;
+		anchor-scope: --inline-edit;
+	}
+
+	input {
+		background: var(--bg-normal);
+		border: var(--border-accent);
+		border-radius: 0.25em;
+		padding: 0.1em 0.25em;
+		margin: -0.1em 0;
+		font: inherit;
+		color: inherit;
+		min-width: 0;
+		flex: 1 1 auto;
+		anchor-name: --inline-edit;
+	}
+
+	.InlineEdit-error {
+		position: fixed;
+		position-anchor: --inline-edit;
+		bottom: calc(anchor(top) - 0.3em);
+		left: anchor(left);
+		color: var(--fg-error);
+	}
+
+	.InlineEdit-confirm {
+		display: inline-flex;
+		align-items: center;
+		flex: 0 0 auto;
+		cursor: pointer;
+	}
+</style>

package/lib/Login.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { loginByEmail, text } from '@axium/client';
+	import { loginByUsername, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 	import authRedirect from './auth_redirect.js';
 
 	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
 
-	async function submit(data: { email: string }) {
-		if (typeof data.email != 'string') {
-			throw 'Tried to upload a file for an email. Huh?!';
+	async function submit(data: { username: string }) {
+		if (typeof data.username != 'string') {
+			throw 'Tried to upload a file for a username. Huh?!';
 		}
 
-		await loginByEmail(data.email);
+		await loginByUsername(data.username);
 		const redirectAfter = await authRedirect();
 		if (fullPage && redirectAfter) location.href = redirectAfter;
 	}
@@ -18,8 +18,8 @@
 
 <FormDialog bind:dialog submitText={text('generic.login')} {submit} pageMode={fullPage}>
 	<div>
-		<label for="email">{text('Login.email')}</label>
-		<input name="email" type="email" required />
+		<label for="username">{text('generic.username')}</label>
+		<input name="username" type="text" required />
 	</div>
 	{#snippet footer()}
 		{#if fullPage}

package/lib/Register.svelte

@@ -14,12 +14,12 @@
 
 <FormDialog bind:dialog submitText={text('generic.register')} {submit} pageMode={fullPage}>
 	<div>
-		<label for="name">{text('Register.name')}</label>
+		<label for="name">{text('generic.user_display_name')}</label>
 		<input name="name" type="text" required />
 	</div>
 	<div>
-		<label for="email">{text('Register.email')}</label>
-		<input name="email" type="email" required />
+		<label for="username">{text('generic.username')}</label>
+		<input name="username" type="text" required />
 	</div>
 	{#snippet footer()}
 		{#if fullPage}

package/lib/Upload.svelte

@@ -11,7 +11,8 @@
 		...rest
 	}: HTMLInputAttributes & { input?: HTMLInputElement; progress?: [current: number, max: number][] } = $props();
 
-	const id = $props.id();
+	const defaultId = $props.id();
+	const id = rest.id || defaultId;
 </script>
 
 <div>

package/lib/index.ts

@@ -9,6 +9,7 @@ export { default as Discovery } from './Discovery.svelte';
 export * as discovery from './Discovery.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as InlineEdit } from './InlineEdit.svelte';
 export { default as LocationSelect } from './LocationSelect.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';

package/lib/toast.ts

@@ -1,4 +1,4 @@
-import { debug, errorText } from 'ioium';
+import { debug, errorText, useProgress } from 'ioium';
 import { text } from '@axium/client/locales';
 import { animate, onAnimationEnd } from '@axium/client/gui';
 import Icon from './Icon.svelte';
@@ -83,4 +83,74 @@ export async function toastStatus(promise: Promise<unknown>, successMessage: str
 	}
 }
 
+let progressToast: HTMLDivElement | undefined,
+	progressMain: HTMLSpanElement,
+	progressMessage: HTMLSpanElement,
+	progressBar: HTMLProgressElement,
+	progressCancelButton: HTMLButtonElement,
+	progressCancel: (() => void) | undefined;
+
+function warnBeforeUnload(e: BeforeUnloadEvent) {
+	e.preventDefault();
+}
+
+/**
+ * Register a callback used to cancel the operation shown in the progress toast.
+ * The toast's cancel button is only shown while a callback is registered.
+ */
+export function setProgressCancel(cancel?: () => void): void {
+	progressCancel = cancel;
+	if (progressToast) progressCancelButton.style.display = cancel ? '' : 'none';
+}
+
+useProgress({
+	start(message: string): void {
+		if (!progressToast) {
+			progressToast = document.createElement('div');
+			progressToast.classList.add('toast', 'progress');
+
+			const header = document.createElement('div');
+			header.classList.add('toast-header');
+			progressToast.appendChild(header);
+
+			progressMain = document.createElement('span');
+			header.appendChild(progressMain);
+
+			progressCancelButton = document.createElement('button');
+			progressCancelButton.classList.add('reset');
+			progressCancelButton.onclick = () => progressCancel?.();
+			mount(Icon, { target: progressCancelButton, props: { i: 'xmark-large' } });
+			header.appendChild(progressCancelButton);
+
+			progressMessage = document.createElement('span');
+			progressMessage.classList.add('subtle');
+			progressToast.appendChild(progressMessage);
+
+			progressBar = document.createElement('progress');
+			progressToast.appendChild(progressBar);
+
+			list.appendChild(progressToast);
+			addEventListener('beforeunload', warnBeforeUnload);
+		}
+		progressMain.textContent = message;
+		progressMessage.textContent = '';
+		progressCancelButton.style.display = progressCancel ? '' : 'none';
+		progressBar.removeAttribute('value');
+		progressBar.max = 1;
+	},
+	progress(value: number, max: number, message?: any): void {
+		if (!progressToast) return;
+		progressBar.value = value;
+		progressBar.max = max;
+		progressMessage.textContent = message == undefined ? '' : String(message);
+	},
+	done(): void {
+		if (!progressToast) return;
+		progressToast.remove();
+		progressToast = undefined;
+		progressCancel = undefined;
+		removeEventListener('beforeunload', warnBeforeUnload);
+	},
+});
+
 Object.assign(globalThis, { toast, toastStatus });

package/locales/en.json

@@ -23,7 +23,6 @@
 		"no_results": "No results"
 	},
 	"Login": {
-		"email": "Email",
 		"register": "Register instead"
 	},
 	"Logout": {
@@ -31,9 +30,7 @@
 		"question": "Are you sure you want to log out?"
 	},
 	"Register": {
-		"email": "Email",
-		"login": "Login instead",
-		"name": "Display Name"
+		"login": "Login instead"
 	},
 	"SessionList": {
 		"created": "Created {date}",
@@ -78,6 +75,8 @@
 		"none": "None",
 		"ok": "Okay",
 		"preferences": "Preferences",
+		"recovery": "Recovery",
+		"recovery_method_disabled": "This recovery method is disabled and can't be used.",
 		"register": "Register",
 		"rename": "Rename",
 		"sessions": "Sessions",
@@ -85,7 +84,7 @@
 		"success": "Success",
 		"unknown": "Unknown",
 		"unnamed": "Unnamed",
-		"user_display_name": "Name",
+		"user_display_name": "Display name",
 		"username": "Username",
 		"yes": "Yes"
 	},
@@ -121,8 +120,11 @@
 				"toast_updated": "Profile picture updated"
 			},
 			"preferences": "Preferences",
+			"remove_email": "Remove email",
+			"remove_email_confirm": "Are you sure you want to remove your recovery email?",
 			"sessions": "Sessions",
 			"title": "Your Account",
+			"toast_username_updated": "Username updated",
 			"user_id": "User ID",
 			"user_id_hint": "This is your UUID. It can't be changed.",
 			"verification_sent": "Verification email sent",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.33.5",
+	"version": "0.35.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -49,7 +49,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.36.1",
+		"@axium/core": ">=0.37.0",
 		"ioium": "^1.7.0",
 		"semver": "^7.7.4",
 		"svelte": "^5.36.0",

package/styles/account.css

@@ -41,7 +41,7 @@
 		margin-left: 1em;
 	}
 
-	> :nth-child(2) {
+	> :nth-child(2):not(.InlineEdit) {
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}