@axium/client 0.8.0 → 0.9.1

package/assets/styles.css

@@ -151,7 +151,8 @@ pre {
 	background-color: hsl(from var(--bg-menu) h s l / 95%);
 	border-radius: 0.5em;
 	padding: 0.25em;
-	inset: unset;
+	margin: 0;
+	inset: auto;
 	display: flex;
 	flex-direction: column;
 	gap: 0.1em;
@@ -166,3 +167,15 @@ pre {
 a:has(button, div) {
 	display: contents;
 }
+
+.version {
+	font-family: monospace;
+	font-size: 0.9em;
+	color: #aaa;
+	margin-left: 1em;
+}
+
+.version::before {
+	content: 'v';
+	color: #888;
+}

package/dist/access.js

@@ -1,7 +1,5 @@
 import { fetchAPI } from './requests.js';
 export async function setACL(itemType, itemId, data) {
-    if ('public' in data)
-        data.public = parseInt(data.public.toString());
     return await fetchAPI('POST', 'acl/:itemType/:itemId', data, itemType, itemId);
 }
 export async function getACL(itemType, itemId) {

package/lib/AccessControlDialog.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { getACL, setACL } from '@axium/client/access';
+	import { userInfo } from '@axium/client/user';
 	import type { AccessMap, User } from '@axium/core';
-	import { permissionNames, type AccessControllable, type AccessControl } from '@axium/core/access';
-	import type { Entries } from 'utilium';
+	import { pickPermissions, type AccessControl, type AccessControllable } from '@axium/core/access';
 	import FormDialog from './FormDialog.svelte';
 	import UserCard from './UserCard.svelte';
-	import { userInfo } from '@axium/client/user';
-	import { getACL, setACL } from '@axium/client/access';
+	import Icon from './Icon.svelte';
 
 	interface Props {
 		editable: boolean;
@@ -17,10 +17,6 @@
 	let { item = $bindable(), itemType, editable, dialog = $bindable(), acl = $bindable(item?.acl) }: Props = $props();
 
 	if (!acl && item) getACL(itemType, item.id).then(fetched => (acl = item.acl = fetched));
-
-	const permEntries = Object.entries(permissionNames) as any as Entries<typeof permissionNames>;
-
-	const publicPerm = $derived(permissionNames[item?.publicPermission || 0]);
 </script>
 
 <FormDialog
@@ -49,34 +45,33 @@
 
 	{#each acl ?? [] as control}
 		<div class="AccessControl">
-			{#if !control.user}<i>Unknown</i>
-			{:else}
+			{#if control.user}
 				<UserCard user={control.user} />
-				{#if editable}
-					<select name={control.userId}>
-						{#each permEntries as [key, name]}
-							<option value={key} selected={key == control.permission}>{name}</option>
-						{/each}
-					</select>
-				{:else}
-					<span>{permEntries[control.permission]}</span>
-				{/if}
+			{:else if control.role}
+				<span class="icon-text">
+					<Icon i="at" />
+					<span>{control.role}</span>
+				</span>
+				<!-- {:else if control.tag} -->
+			{:else}
+				<i>Unknown</i>
+			{/if}
+			{#if editable}
+				<select name={control.userId ?? (control.role ? '@' + control.role : 'public')} multiple>
+					{#each Object.entries(pickPermissions(control)) as [key, value]}
+						<option value={key} selected={!!value}>{key}</option>
+					{/each}
+				</select>
+			{:else}
+				<span
+					>{Object.entries(pickPermissions(control))
+						.filter(([, value]) => value)
+						.map(([key]) => key)
+						.join(', ')}</span
+				>
 			{/if}
 		</div>
 	{/each}
-
-	<div class="AccessControl public">
-		<strong>Public Access</strong>
-		{#if editable && item}
-			<select name="public">
-				{#each permEntries as [key, name]}
-					<option value={key} selected={key == item.publicPermission}>{name}</option>
-				{/each}
-			</select>
-		{:else}
-			<span>{publicPerm}</span>
-		{/if}
-	</div>
 </FormDialog>
 
 <style>

package/lib/Dialog.svelte

@@ -1,5 +1,7 @@
-<script>
-	let { children, dialog = $bindable(), ...rest } = $props();
+<script lang="ts">
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+
+	let { children, dialog = $bindable(), ...rest }: { children(): any; dialog?: HTMLDialogElement } & HTMLDialogAttributes = $props();
 </script>
 
 <dialog bind:this={dialog} {...rest}>

package/lib/FormDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Dialog from './Dialog.svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
 
 	let {
 		children,
@@ -26,7 +27,7 @@
 		submitDanger?: boolean;
 		header?(): any;
 		footer?(): any;
-	} = $props();
+	} & HTMLDialogAttributes = $props();
 
 	let error = $state<string>();
 
@@ -34,7 +35,7 @@
 		if (pageMode) dialog!.showModal();
 	});
 
-	function onclose(e: MouseEvent) {
+	function onclose(e: Event) {
 		e.preventDefault();
 		cancel();
 	}

package/lib/Login.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { loginByEmail } from '@axium/client/user';
 	import FormDialog from './FormDialog.svelte';
-	import redirectAfter from './auth_redirect.js';
+	import authRedirect from './auth_redirect.js';
 
 	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
 
@@ -11,6 +11,7 @@
 		}
 
 		await loginByEmail(data.email);
+		const redirectAfter = await authRedirect();
 		if (fullPage && redirectAfter) location.href = redirectAfter;
 	}
 </script>

package/lib/Logout.svelte

@@ -2,21 +2,22 @@
 	import { logoutCurrentSession } from '@axium/client/user';
 	import FormDialog from './FormDialog.svelte';
 
-	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
+	let { fullPage = false }: { fullPage?: boolean } = $props();
 </script>
 
 <FormDialog
 	pageMode={fullPage}
-	bind:dialog
+	id="logout"
 	submitText="Log Out"
 	submit={() => logoutCurrentSession().then(() => (window.location.href = '/'))}
 >
 	<p>Are you sure you want to log out?</p>
 	{#if fullPage}
 		<button
+			command="close"
+			commandfor="logout"
 			onclick={e => {
 				e.preventDefault();
-				dialog!.close();
 				history.back();
 			}}>Take me back</button
 		>

package/lib/Popover.svelte

@@ -6,7 +6,8 @@
 
 	function onclick(e: MouseEvent) {
 		e.stopPropagation();
-		popover?.togglePopover();
+		// @ts-expect-error 2345
+		popover?.togglePopover({ source: e.currentTarget });
 	}
 </script>
 
@@ -31,6 +32,11 @@
 		cursor: pointer;
 	}
 
+	.popover-toggle + [popover] {
+		position-area: bottom right;
+		position-try: most-width flip-inline;
+	}
+
 	[popover] :global(.menu-item) {
 		display: inline-flex;
 		align-items: center;

package/lib/Register.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { register } from '@axium/client/user';
 	import FormDialog from './FormDialog.svelte';
-	import redirectAfter from './auth_redirect.js';
+	import authRedirect from './auth_redirect.js';
 
 	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
 
 	async function submit(data: Record<string, FormDataEntryValue>) {
 		await register(data);
+		const redirectAfter = await authRedirect();
 		if (fullPage && redirectAfter) location.href = redirectAfter;
 	}
 </script>

package/lib/SessionList.svelte

@@ -10,8 +10,6 @@
 		user,
 		redirectAfterLogoutAll = false,
 	}: { sessions: Session[]; currentSession?: Session; user: User; redirectAfterLogoutAll?: boolean } = $props();
-
-	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 </script>
 
 {#each sessions as session}
@@ -27,15 +25,14 @@
 		</p>
 		<p>Created {session.created.toLocaleString()}</p>
 		<p>Expires {session.expires.toLocaleString()}</p>
-		<button style:display="contents" onclick={() => dialogs['logout#' + session.id].showModal()}>
+		<button style:display="contents" command="show-modal" commandfor={'logout-session:' + session.id}>
 			<Icon i="right-from-bracket" --size="16px" />
 		</button>
 	</div>
 	<FormDialog
-		bind:dialog={dialogs['logout#' + session.id]}
+		id={'logout-session:' + session.id}
 		submit={async () => {
 			await logout(user.id, session.id);
-			dialogs['logout#' + session.id].remove();
 			sessions.splice(sessions.indexOf(session), 1);
 			if (session.id == currentSession?.id) window.location.href = '/';
 		}}
@@ -45,10 +42,10 @@
 	</FormDialog>
 {/each}
 <span>
-	<button onclick={() => dialogs.logout_all.showModal()} class="danger">Logout All</button>
+	<button command="show-modal" commandfor="logout-all" class="danger">Logout All</button>
 </span>
 <FormDialog
-	bind:dialog={dialogs.logout_all}
+	id="logout-all"
 	submit={() => logoutAll(user.id).then(() => (redirectAfterLogoutAll ? (window.location.href = '/') : null))}
 	submitText="Logout All Sessions"
 	submitDanger

package/lib/UserMenu.svelte

@@ -7,8 +7,6 @@
 	import Logout from './Logout.svelte';
 
 	const { user }: { user: Partial<User> } = $props();
-
-	let logout = $state<HTMLDialogElement>()!;
 </script>
 
 <Popover>
@@ -52,13 +50,15 @@
 		<i>Couldn't load apps.</i>
 	{/await}
 
-	<span class="menu-item logout" onclick={() => logout.showModal()}>
-		<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
-		<span>Logout</span>
-	</span>
+	<button style:display="contents" command="show-modal" commandfor="logout">
+		<span class="menu-item logout">
+			<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
+			<span>Logout</span>
+		</span>
+	</button>
 </Popover>
 
-<Logout bind:dialog={logout} />
+<Logout />
 
 <style>
 	img {

package/lib/auth_redirect.ts

@@ -2,8 +2,11 @@ import { getCurrentSession } from '@axium/client/user';
 
 function resolveRedirect(): string | false {
 	const url = new URL(location.href);
+	if (!['/login', '/register'].includes(url.pathname)) {
+		console.warn('Not on login or register page, not redirecting:', url.pathname);
+		return false;
+	}
 	const maybe = url.searchParams.get('after');
-	if (!['/login', '/register'].includes(url.pathname)) return false;
 	if (!maybe || maybe == url.pathname) return '/';
 
 	if (maybe[0] != '/' || maybe[1] == '/') {
@@ -16,13 +19,13 @@ function resolveRedirect(): string | false {
 	return redirect.pathname + redirect.search || '/';
 }
 
-const redirect = resolveRedirect();
+export default async function authRedirect() {
+	const redirect = resolveRedirect();
 
-try {
-	if (!redirect) throw 'No redirect';
-	// Auto-redirect if already logged in.
-	const session = await getCurrentSession();
-	if (session) location.href = redirect;
-} catch {}
-
-export default redirect;
+	try {
+		if (!redirect) throw 'No redirect';
+		// Auto-redirect if already logged in.
+		const session = await getCurrentSession();
+		if (session) location.href = redirect;
+	} catch {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.8.0",
+	"version": "0.9.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.10.0",
+		"@axium/core": ">=0.12.0",
 		"utilium": "^2.3.8",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"