@fuzdev/fuz_app 0.1.0

package/dist/ui/AccountSessions.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import {auth_state_context} from './auth_state.svelte.js';
+	import {AccountSessionsState} from './account_sessions_state.svelte.js';
+	import {format_relative_time, format_datetime_local, truncate_uuid} from './ui_format.js';
+	import Datatable from './Datatable.svelte';
+	import type {DatatableColumn} from './datatable.js';
+	import type {AuthSession} from '../auth/account_schema.js';
+
+	const auth_state = auth_state_context.get();
+	const account_sessions = new AccountSessionsState();
+
+	void account_sessions.fetch();
+
+	const handle_revoke_all = async (): Promise<void> => {
+		await account_sessions.revoke_all();
+		if (!account_sessions.error) {
+			auth_state.verified = false;
+		}
+	};
+
+	const columns: Array<DatatableColumn<AuthSession>> = [
+		{key: 'id', label: 'session', width: 140},
+		{key: 'created_at', label: 'created', width: 120},
+		{key: 'last_seen_at', label: 'last seen', width: 120},
+		{key: 'expires_at', label: 'expires', width: 120},
+		{key: 'account_id', label: '', width: 100},
+	];
+</script>
+
+<section>
+	<h2>
+		sessions
+		{#if account_sessions.active_count > 0}
+			<span class="chip color_a">{account_sessions.active_count} active</span>
+		{/if}
+	</h2>
+
+	{#if account_sessions.loading}
+		<p class="text_50">loading sessions...</p>
+	{:else if account_sessions.error}
+		<p class="color_c_50">{account_sessions.error}</p>
+	{:else}
+		{#if account_sessions.active_count > 1}
+			<div class="mb_md">
+				<button type="button" onclick={() => handle_revoke_all()}>revoke all</button>
+			</div>
+		{/if}
+		<Datatable {columns} rows={account_sessions.sessions} height="300px">
+			{#snippet cell(column, row)}
+				{#if column.key === 'id'}
+					<span class="chip color_b">active</span>
+					<code class="text_50">{truncate_uuid(row.id)}</code>
+				{:else if column.key === 'created_at'}
+					<span title={format_datetime_local(row.created_at)}>
+						{format_relative_time(row.created_at)}
+					</span>
+				{:else if column.key === 'last_seen_at'}
+					<span title={format_datetime_local(row.last_seen_at)}>
+						{format_relative_time(row.last_seen_at)}
+					</span>
+				{:else if column.key === 'expires_at'}
+					<span title={format_datetime_local(row.expires_at)}>
+						{format_relative_time(row.expires_at)}
+					</span>
+				{:else if column.key === 'account_id'}
+					<button type="button" onclick={() => account_sessions.revoke(row.id)}>revoke</button>
+				{:else if column.format}
+					{column.format(row[column.key], row)}
+				{:else}
+					{row[column.key]}
+				{/if}
+			{/snippet}
+		</Datatable>
+	{/if}
+</section>

package/dist/ui/AccountSessions.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AccountSessions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AccountSessions = InstanceType<typeof AccountSessions>;
+export default AccountSessions;
+//# sourceMappingURL=AccountSessions.svelte.d.ts.map

package/dist/ui/AccountSessions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSessions.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AccountSessions.svelte"],"names":[],"mappings":"AAwFA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;;kBAA+E,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/ui/AdminAccounts.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import {AdminAccountsState} from './admin_accounts_state.svelte.js';
+	import ConfirmButton from './ConfirmButton.svelte';
+	import Datatable from './Datatable.svelte';
+	import type {DatatableColumn} from './datatable.js';
+	import type {AdminAccountEntryJson} from '../auth/account_schema.js';
+	import {format_relative_time, format_datetime_local} from './ui_format.js';
+
+	const admin_accounts = new AdminAccountsState();
+
+	void admin_accounts.fetch();
+
+	const columns: Array<DatatableColumn<AdminAccountEntryJson>> = [
+		{key: 'account', label: 'username', width: 180},
+		{key: 'permits', label: 'permits', width: 240},
+		{key: 'actor', label: 'grant', width: 200},
+	];
+</script>
+
+<section>
+	<h1>accounts</h1>
+	{#if admin_accounts.account_count > 0}
+		<p>
+			<span class="chip color_a"
+				>{admin_accounts.account_count} account{admin_accounts.account_count === 1 ? '' : 's'}</span
+			>
+		</p>
+	{/if}
+
+	{#if admin_accounts.loading}
+		<p class="text_50">loading accounts...</p>
+	{:else if admin_accounts.error}
+		<p class="color_c_50">{admin_accounts.error}</p>
+	{:else}
+		<Datatable {columns} rows={admin_accounts.accounts} height="400px">
+			{#snippet cell(column, row)}
+				{#if column.key === 'account'}
+					<strong>{row.account.username}</strong>
+					{#if row.account.email}
+						<span class="text_50 font_size_sm">
+							{row.account.email}
+							{#if row.account.email_verified}
+								<span class="chip font_size_sm color_b">verified</span>
+							{:else}
+								<span class="chip font_size_sm">unverified</span>
+							{/if}
+						</span>
+					{/if}
+					<div class="text_50 font_size_sm" title={format_datetime_local(row.account.created_at)}>
+						joined {format_relative_time(row.account.created_at)}
+					</div>
+					{#if row.account.updated_at !== row.account.created_at}
+						<div class="text_50 font_size_sm" title={format_datetime_local(row.account.updated_at)}>
+							updated {format_relative_time(row.account.updated_at)}
+						</div>
+					{/if}
+				{:else if column.key === 'permits'}
+					{#each row.permits as permit (permit.id)}
+						<div class="row">
+							<span class="chip color_b">{permit.role}</span>
+							{#if permit.expires_at}
+								<span class="text_50 font_size_sm" title={format_datetime_local(permit.expires_at)}>
+									expires {format_relative_time(permit.expires_at)}
+								</span>
+							{/if}
+							<ConfirmButton
+								onconfirm={() => admin_accounts.revoke_permit(row.account.id, permit.id)}
+								title="revoke {permit.role}"
+								class="sm"
+								disabled={admin_accounts.revoking_ids.has(permit.id)}
+							>
+								{#snippet children(_popover, _confirm)}
+									{admin_accounts.revoking_ids.has(permit.id) ? 'revoking…' : 'revoke'}
+								{/snippet}
+							</ConfirmButton>
+						</div>
+					{/each}
+					{#if row.permits.length === 0}
+						<span class="text_50">none</span>
+					{/if}
+				{:else if column.key === 'actor'}
+					{#each admin_accounts.grantable_roles as role (role)}
+						{#if !row.permits.some((p) => p.role === role)}
+							<ConfirmButton
+								onconfirm={() => admin_accounts.grant_permit(row.account.id, role)}
+								title="grant {role}"
+								class="sm"
+								disabled={admin_accounts.granting_keys.has(`${row.account.id}:${role}`)}
+							>
+								{#snippet children(_popover, _confirm)}
+									{admin_accounts.granting_keys.has(`${row.account.id}:${role}`)
+										? 'granting…'
+										: `+ ${role}`}
+								{/snippet}
+								{#snippet popover_content(_popover, do_confirm)}
+									<button type="button" class="color_b bg_100" onclick={() => do_confirm()}>
+										<span class="py_sm">grant '{role}' to @{row.account.username}</span>
+									</button>
+								{/snippet}
+							</ConfirmButton>
+						{/if}
+					{/each}
+				{/if}
+			{/snippet}
+		</Datatable>
+	{/if}
+</section>

package/dist/ui/AdminAccounts.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AdminAccounts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AdminAccounts = InstanceType<typeof AdminAccounts>;
+export default AdminAccounts;
+//# sourceMappingURL=AdminAccounts.svelte.d.ts.map

package/dist/ui/AdminAccounts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAccounts.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminAccounts.svelte"],"names":[],"mappings":"AA4GA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/ui/AdminAuditLog.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import {onDestroy} from 'svelte';
+
+	import {AuditLogState} from './audit_log_state.svelte.js';
+	import {
+		AUDIT_EVENT_TYPES,
+		type AuditLogEventWithUsernamesJson,
+	} from '../auth/audit_log_schema.js';
+	import {
+		format_relative_time,
+		format_datetime_local,
+		format_audit_metadata,
+		truncate_uuid,
+	} from './ui_format.js';
+	import Datatable from './Datatable.svelte';
+	import type {DatatableColumn} from './datatable.js';
+
+	const audit_log = new AuditLogState();
+
+	let filter_event_type: string = $state('');
+	let streaming = $state(false);
+
+	const load = (): void => {
+		void audit_log.fetch(filter_event_type ? {event_type: filter_event_type} : undefined);
+	};
+
+	load();
+
+	let disconnect: (() => void) | null = null;
+
+	const toggle_streaming = (): void => {
+		if (streaming) {
+			disconnect?.();
+			disconnect = null;
+			streaming = false;
+		} else {
+			disconnect = audit_log.subscribe();
+			streaming = true;
+		}
+	};
+
+	onDestroy(() => {
+		disconnect?.();
+	});
+
+	const handle_filter_change = (): void => {
+		load();
+	};
+
+	const columns: Array<DatatableColumn<AuditLogEventWithUsernamesJson>> = [
+		{key: 'created_at', label: 'time', width: 100},
+		{key: 'event_type', label: 'event', width: 200},
+		{key: 'outcome', label: 'outcome', width: 100},
+		{key: 'account_id', label: 'account', width: 130},
+		{key: 'target_account_id', label: 'target', width: 130},
+		{key: 'ip', label: 'ip', width: 130},
+		{key: 'metadata', label: 'metadata', width: 200},
+	];
+</script>
+
+<section>
+	<h1>audit log</h1>
+
+	<div class="row mb_md" style:gap="var(--space_md)" style:align-items="center">
+		<label class="mb_0">
+			<div class="title">filter</div>
+			<select bind:value={filter_event_type} onchange={handle_filter_change}>
+				<option value="">all events</option>
+				{#each AUDIT_EVENT_TYPES as event_type (event_type)}
+					<option value={event_type}>{event_type}</option>
+				{/each}
+			</select>
+		</label>
+		<button type="button" onclick={load}>refresh</button>
+		<button type="button" onclick={toggle_streaming} class:color_b={streaming}>
+			{streaming ? 'stop' : 'stream'}
+		</button>
+		{#if streaming}
+			<span class="text_50" style:font-size="var(--font_size_sm)">
+				{audit_log.connected ? 'connected' : 'reconnecting...'}
+			</span>
+		{/if}
+	</div>
+
+	{#if audit_log.loading}
+		<p class="text_50">loading audit log...</p>
+	{:else if audit_log.error}
+		<p class="color_c_50">{audit_log.error}</p>
+	{:else}
+		<Datatable {columns} rows={audit_log.events} height="500px">
+			{#snippet cell(column, row)}
+				{#if column.key === 'created_at'}
+					<span title={format_datetime_local(row.created_at)}>
+						{format_relative_time(row.created_at)}
+					</span>
+				{:else if column.key === 'event_type'}
+					<code>{row.event_type}</code>
+				{:else if column.key === 'outcome'}
+					<span
+						class="chip"
+						class:color_b={row.outcome === 'success'}
+						class:color_c={row.outcome === 'failure'}
+					>
+						{row.outcome}
+					</span>
+				{:else if column.key === 'account_id'}
+					<span class="text_50">
+						{#if row.username}
+							{row.username}
+						{:else if row.account_id}
+							{truncate_uuid(row.account_id)}
+						{:else}
+							-
+						{/if}
+					</span>
+				{:else if column.key === 'target_account_id'}
+					<span class="text_50">
+						{#if row.target_username}
+							{row.target_username}
+						{:else if row.target_account_id}
+							{truncate_uuid(row.target_account_id)}
+						{:else}
+							-
+						{/if}
+					</span>
+				{:else if column.key === 'ip'}
+					<span class="text_50">{row.ip ?? '-'}</span>
+				{:else if column.key === 'metadata'}
+					<span class="text_50">
+						{#if row.metadata}
+							{format_audit_metadata(row.event_type, row.metadata) || '-'}
+						{:else}
+							-
+						{/if}
+					</span>
+				{:else if column.format}
+					{column.format(row[column.key], row)}
+				{:else}
+					{row[column.key]}
+				{/if}
+			{/snippet}
+		</Datatable>
+	{/if}
+</section>

package/dist/ui/AdminAuditLog.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const AdminAuditLog: import("svelte").Component<Record<string, never>, {}, "">;
+type AdminAuditLog = ReturnType<typeof AdminAuditLog>;
+export default AdminAuditLog;
+//# sourceMappingURL=AdminAuditLog.svelte.d.ts.map

package/dist/ui/AdminAuditLog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAuditLog.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminAuditLog.svelte"],"names":[],"mappings":"AAoJA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/AdminInvites.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';
+
+	import {AdminInvitesState} from './admin_invites_state.svelte.js';
+	import ConfirmButton from './ConfirmButton.svelte';
+	import Datatable from './Datatable.svelte';
+	import type {DatatableColumn} from './datatable.js';
+	import type {InviteWithUsernamesJson} from '../auth/invite_schema.js';
+	import {format_relative_time, format_datetime_local, truncate_uuid} from './ui_format.js';
+	import OpenSignupToggle from './OpenSignupToggle.svelte';
+
+	const admin_invites = new AdminInvitesState();
+
+	let invite_email = $state('');
+	let invite_username = $state('');
+
+	const can_create = $derived(
+		(invite_email.trim() || invite_username.trim()) && !admin_invites.creating,
+	);
+
+	const handle_create = async (): Promise<void> => {
+		if (!can_create) return;
+		const success = await admin_invites.create_invite(
+			invite_email.trim() || undefined,
+			invite_username.trim() || undefined,
+		);
+		if (success) {
+			invite_email = '';
+			invite_username = '';
+		}
+	};
+
+	void admin_invites.fetch();
+
+	const columns: Array<DatatableColumn<InviteWithUsernamesJson>> = [
+		{key: 'email', label: 'email', width: 180, format: (v) => v ?? '-'},
+		{key: 'username', label: 'username', width: 140, format: (v) => v ?? '-'},
+		{key: 'claimed_at', label: 'status', width: 160},
+		{key: 'created_at', label: 'created', width: 100},
+		{key: 'created_by', label: 'created by', width: 120},
+		{key: 'id', label: 'actions', width: 100},
+	];
+</script>
+
+<section>
+	<h1>invites</h1>
+	<section>
+		<OpenSignupToggle />
+	</section>
+	{#if admin_invites.invite_count > 0}
+		<p>
+			<span class="chip color_a"
+				>{admin_invites.unclaimed_count} unclaimed / {admin_invites.invite_count} total</span
+			>
+		</p>
+	{/if}
+
+	<form
+		class="width_atmost_md mb_lg"
+		onsubmit={(e) => {
+			e.preventDefault();
+			void handle_create();
+		}}
+	>
+		<div class="row gap_sm mb_sm">
+			<label class="grow">
+				<span class="text_50 font_size_sm">email</span>
+				<input
+					type="email"
+					bind:value={invite_email}
+					placeholder="email (optional)"
+					disabled={admin_invites.creating}
+				/>
+			</label>
+			<label class="grow">
+				<span class="text_50 font_size_sm">username</span>
+				<input
+					type="text"
+					bind:value={invite_username}
+					placeholder="username (optional)"
+					disabled={admin_invites.creating}
+				/>
+			</label>
+		</div>
+		<PendingButton pending={admin_invites.creating} disabled={!can_create} onclick={handle_create}>
+			create invite
+		</PendingButton>
+	</form>
+
+	{#if admin_invites.error}
+		<p class="color_c_50">{admin_invites.error}</p>
+	{/if}
+
+	{#if admin_invites.loading}
+		<p class="text_50">loading invites...</p>
+	{:else}
+		<Datatable {columns} rows={admin_invites.invites} height="400px">
+			{#snippet cell(column, row)}
+				{#if column.key === 'claimed_at'}
+					{#if row.claimed_at}
+						<span class="chip color_b">claimed</span>
+						<span class="text_50 font_size_sm" title={format_datetime_local(row.claimed_at)}>
+							{#if row.claimed_by_username}
+								by {row.claimed_by_username}
+							{/if}
+							{format_relative_time(row.claimed_at)}
+						</span>
+					{:else}
+						<span class="chip">unclaimed</span>
+					{/if}
+				{:else if column.key === 'created_at'}
+					<span title={format_datetime_local(row.created_at)}>
+						{format_relative_time(row.created_at)}
+					</span>
+				{:else if column.key === 'created_by'}
+					<span class="text_50">
+						{row.created_by_username ?? (row.created_by ? truncate_uuid(row.created_by) : '-')}
+					</span>
+				{:else if column.key === 'id'}
+					{#if !row.claimed_at}
+						<ConfirmButton
+							onconfirm={() => admin_invites.delete_invite(row.id)}
+							title="delete invite"
+							class="sm"
+							disabled={admin_invites.deleting_ids.has(row.id)}
+						>
+							{#snippet children(_popover, _confirm)}
+								{admin_invites.deleting_ids.has(row.id) ? 'deleting...' : 'delete'}
+							{/snippet}
+						</ConfirmButton>
+					{:else}
+						<span class="text_50">-</span>
+					{/if}
+				{:else if column.format}
+					{column.format(row[column.key], row)}
+				{:else}
+					{row[column.key]}
+				{/if}
+			{/snippet}
+		</Datatable>
+	{/if}
+</section>

package/dist/ui/AdminInvites.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const AdminInvites: import("svelte").Component<Record<string, never>, {}, "">;
+type AdminInvites = ReturnType<typeof AdminInvites>;
+export default AdminInvites;
+//# sourceMappingURL=AdminInvites.svelte.d.ts.map

package/dist/ui/AdminInvites.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminInvites.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminInvites.svelte"],"names":[],"mappings":"AAyIA,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}