@riducms/admin 0.2.3 → 0.3.0

package/src/features/auth/account-menu.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { Link, useNavigate } from "@hvniel/svelte-router";
-	import LogOutIcon from "~icons/lucide/log-out";
-	import SettingsIcon from "~icons/lucide/settings";
-	import UserRoundIcon from "~icons/lucide/user-round";
-
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
-	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-
-	const runtime = getAdminRuntime();
-	let { compact = false }: { compact?: boolean } = $props();
-	const navigate = useNavigate();
-	let open = $state(false);
-	let pending = $state(false);
-	let error = $state<string>();
-	const authCollection = $derived(runtime.authCollection);
-	const user = $derived(runtime.session?.user);
-	const logoutHost = { logout };
-	const accountAvatar = $derived(
-		runtime.brandComponents.find((component) => component.surface === "accountAvatar")
-	);
-	const settingsComponents = $derived(
-		runtime.shellComponents.filter((component) => component.position === "settingsMenu")
-	);
-	const displayName = $derived.by(() => {
-		const candidate = user?.name;
-		if (typeof candidate === "string" && candidate.trim().length > 0) return candidate;
-		const identityField = authCollection?.authSettings?.identityField;
-		const identity = identityField === undefined ? undefined : user?.[identityField];
-		if (typeof identity === "string" && identity.trim().length > 0) return identity;
-		return runtime.i18n.t("account:signedInUser");
-	});
-	const identity = $derived.by(() => {
-		const identityField = authCollection?.authSettings?.identityField;
-		const value = identityField === undefined ? undefined : user?.[identityField];
-		return typeof value === "string" && value !== displayName ? value : undefined;
-	});
-	const initials = $derived(
-		displayName
-			.split(/\s+/)
-			.filter(Boolean)
-			.slice(0, 2)
-			.map((part) => part.slice(0, 1).toLocaleUpperCase(runtime.i18n.language))
-			.join("") || "Z"
-	);
-
-	async function logout() {
-		pending = true;
-		error = undefined;
-		try {
-			await runtime.client.logout();
-			runtime.session = undefined;
-			open = false;
-			navigate(adminRoutePatterns.login, { replace: true });
-		} catch (cause) {
-			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:signOutFailed");
-		} finally {
-			pending = false;
-		}
-	}
-</script>
-
-<Popover bind:open>
-	<PopoverTrigger
-		class={[
-			"flex items-center rounded-full text-left transition-colors hover:text-foreground focus-visible:outline-primary/60",
-			compact ? "size-7 justify-center" : "w-full gap-2.25 px-0.5 py-0",
-		]}
-		aria-label={runtime.i18n.t("account:accountMenuLabel", { name: displayName })}
-	>
-		{#if accountAvatar !== undefined && runtime.manifest !== undefined}
-			<accountAvatar.component
-				manifest={runtime.manifest}
-				{user}
-				surface="accountAvatar"
-				i18n={runtime.i18n}
-			/>
-		{:else}
-			<span
-				class="font-mono grid size-6 shrink-0 place-items-center rounded-full bg-sidebar-accent text-[8.5px] font-semibold tracking-[0.04em] text-sidebar-accent-foreground"
-				aria-hidden="true"
-			>
-				{initials}
-			</span>
-		{/if}
-		{#if !compact}
-			<span class="min-w-0 flex-1">
-				<span class="block truncate text-[12.5px] text-foreground">{displayName}</span>
-				<span class="block truncate text-[10.5px] text-foreground-sub">
-					{runtime.i18n.t("account:adminRole")}
-				</span>
-			</span>
-			<SettingsIcon class="size-3.5 shrink-0 text-foreground-faint" aria-hidden="true" />
-		{/if}
-	</PopoverTrigger>
-	<PopoverContent side="top" align="start" sideOffset={8} class="w-[212px] gap-1 p-2">
-		<div class="border-b border-control-border px-2.5 py-2 pb-3">
-			<p class="truncate text-[13px] font-medium text-foreground">{displayName}</p>
-			{#if identity !== undefined}
-				<p class="mt-0.5 truncate text-[10.5px] text-foreground-faint">{identity}</p>
-			{/if}
-		</div>
-		{#if error !== undefined}
-			<p class="px-2.5 py-2 text-[11.5px] leading-4 text-destructive" role="alert">{error}</p>
-		{/if}
-		<Link
-			to={adminRoutePatterns.account}
-			class={buttonVariants({
-				variant: "ghost",
-				class: "h-9 w-full justify-start gap-2 px-2.5 text-[12.5px]",
-			})}
-			onclick={() => (open = false)}
-		>
-			<UserRoundIcon class="size-3.5" aria-hidden="true" />
-			{runtime.i18n.t("account:profileAndPreferences")}
-		</Link>
-		<Link
-			to={adminRoutePatterns.accountSecurity}
-			class={buttonVariants({
-				variant: "ghost",
-				class: "h-9 w-full justify-start gap-2 px-2.5 text-[12.5px]",
-			})}
-			onclick={() => (open = false)}
-		>
-			<SettingsIcon class="size-3.5" aria-hidden="true" />
-			{runtime.i18n.t("account:accountSecurity")}
-		</Link>
-		{#if runtime.manifest !== undefined}
-			{#each settingsComponents as component (component.key)}
-				<component.component
-					manifest={runtime.manifest}
-					{user}
-					position="settingsMenu"
-					i18n={runtime.i18n}
-				/>
-			{/each}
-		{/if}
-		{#if runtime.logoutButton !== undefined && runtime.manifest !== undefined}
-			<runtime.logoutButton.component
-				manifest={runtime.manifest}
-				{user}
-				host={logoutHost}
-				i18n={runtime.i18n}
-			/>
-		{:else}
-			<Button
-				variant="ghost"
-				class="h-9 w-full justify-start gap-2 px-2.5 text-[12.5px]"
-				disabled={pending}
-				onclick={logout}
-			>
-				<LogOutIcon class="size-3.5" aria-hidden="true" />
-				{pending ? runtime.i18n.t("account:signingOut") : runtime.i18n.t("auth:logout")}
-			</Button>
-		{/if}
-	</PopoverContent>
-</Popover>

package/src/features/auth/account-security-controller.svelte.ts

@@ -1,119 +0,0 @@
-import type { APIKey, APIKeyInfo, AuthSessionInfo } from "@riducms/protocol";
-import { RiduError } from "@riducms/sdk";
-import type { AdminI18n } from "@riducms/translations";
-
-import type { AdminClient } from "@admin/core/api/admin-client";
-
-export type AccountSecurityStatus = "idle" | "loading" | "ready" | "error";
-
-export class AccountSecurityController {
-	status = $state<AccountSecurityStatus>("idle");
-	error = $state<string>();
-	operation = $state<string>();
-	sessions = $state.raw<readonly AuthSessionInfo[]>([]);
-	apiKeys = $state.raw<readonly APIKeyInfo[]>([]);
-	createdAPIKey = $state.raw<APIKey>();
-	#request?: AbortController;
-	#generation = 0;
-
-	constructor(
-		private readonly client: AdminClient,
-		readonly apiKeysEnabled: boolean,
-		private readonly translate: AdminI18n["t"]
-	) {}
-
-	load = async () => {
-		this.#request?.abort();
-		const request = new AbortController();
-		this.#request = request;
-		const generation = ++this.#generation;
-		this.status = "loading";
-		this.error = undefined;
-		try {
-			const [sessions, apiKeys] = await Promise.all([
-				this.client.sessions({ signal: request.signal }),
-				this.apiKeysEnabled ? this.client.apiKeys({ signal: request.signal }) : Promise.resolve([]),
-			]);
-			if (request.signal.aborted || generation !== this.#generation) return;
-			this.sessions = sessions;
-			this.apiKeys = apiKeys;
-			this.status = "ready";
-		} catch (cause) {
-			if (request.signal.aborted || generation !== this.#generation) return;
-			this.error = messageFrom(cause, this.translate("account:securityLoadFailed"));
-			this.status = "error";
-		}
-	};
-
-	revokeSession = async (id: string) => {
-		return this.#run("session:" + id, async () => {
-			await this.client.revokeSession(id);
-			this.sessions = this.sessions.filter((session) => session.id !== id);
-		});
-	};
-
-	logoutAll = async () => {
-		return this.#run("logout-all", async () => {
-			await this.client.logoutAll();
-			this.sessions = [];
-		});
-	};
-
-	createAPIKey = async (name: string, expiresAt?: string) => {
-		return this.#run("api-key:create", async () => {
-			const created = await this.client.createAPIKey({ name, expiresAt });
-			this.createdAPIKey = created;
-			this.apiKeys = [
-				{
-					id: created.id,
-					name: created.name,
-					createdAt: created.createdAt,
-					expiresAt: created.expiresAt,
-				},
-				...this.apiKeys,
-			];
-		});
-	};
-
-	dismissCreatedAPIKey = () => {
-		this.createdAPIKey = undefined;
-	};
-
-	revokeAPIKey = async (id: string) => {
-		return this.#run("api-key:" + id, async () => {
-			await this.client.revokeAPIKey(id);
-			this.apiKeys = this.apiKeys.filter((key) => key.id !== id);
-			if (this.createdAPIKey?.id === id) this.createdAPIKey = undefined;
-		});
-	};
-
-	changePassword = async (currentPassword: string, password: string) => {
-		return this.#run("password", async () => {
-			await this.client.changePassword(currentPassword, password);
-		});
-	};
-
-	destroy() {
-		this.#generation += 1;
-		this.#request?.abort();
-	}
-
-	async #run(name: string, operation: () => Promise<void>) {
-		if (this.operation !== undefined) return false;
-		this.operation = name;
-		this.error = undefined;
-		try {
-			await operation();
-			return true;
-		} catch (cause) {
-			this.error = messageFrom(cause, this.translate("account:securityOperationFailed"));
-			return false;
-		} finally {
-			this.operation = undefined;
-		}
-	}
-}
-
-function messageFrom(cause: unknown, fallback: string) {
-	return cause instanceof RiduError || cause instanceof Error ? cause.message : fallback;
-}

package/src/features/collections/collection-list-bulk-actions.svelte

@@ -1,143 +0,0 @@
-<script lang="ts">
-	import type { AdminI18n } from "@riducms/plugin";
-
-	import { BulkActionBar } from "@admin/components/ui/bulk-action-bar";
-	import { Button } from "@admin/components/ui/button";
-	import type { CollectionListController } from "@admin/features/collections/collection-list-controller.svelte";
-
-	let {
-		i18n,
-		controller,
-		trashOnly,
-		versioned,
-		hasBulkEditableFields,
-		onEdit,
-		onRequestDelete,
-		onRequestRestore,
-		onRequestDeletePermanent,
-		onOpenDocument,
-	}: {
-		i18n: AdminI18n;
-		controller: CollectionListController;
-		trashOnly: boolean;
-		versioned: boolean;
-		hasBulkEditableFields: boolean;
-		onEdit: () => void;
-		onRequestDelete: () => void;
-		onRequestRestore: () => void;
-		onRequestDeletePermanent: () => void;
-		onOpenDocument: (id: string) => void;
-	} = $props();
-
-	const {
-		bulkPending,
-		canBulkDelete,
-		canBulkDeletePermanent,
-		canBulkPublish,
-		canBulkRestore,
-		canBulkUnpublish,
-		canBulkUpdate,
-		canSelectAllMatches,
-		pagination,
-		selectedIDs,
-		selectionLimitExceeded,
-		selectionPending,
-		showSelectAllMatches,
-	} = $derived(controller);
-</script>
-
-<BulkActionBar
-	count={selectedIDs.size}
-	onClear={controller.clearSelection}
-	label={i18n.t("collections:bulkActions")}
-	selectionLabel={i18n.t("collections:selected", { count: selectedIDs.size })}
-	clearLabel={i18n.t("collections:clearSelection")}
->
-	{#if showSelectAllMatches}
-		<Button
-			variant="ghost"
-			size="sm"
-			aria-disabled={selectionPending || selectionLimitExceeded || !canSelectAllMatches}
-			title={selectionLimitExceeded
-				? i18n.t("collections:selectionLimitDescription", {
-						maximum: i18n.formatNumber(100),
-					})
-				: undefined}
-			onclick={controller.selectAllMatches}
-		>
-			{selectionPending
-				? i18n.t("collections:selecting")
-				: selectionLimitExceeded
-					? i18n.t("collections:selectAllUnavailable", {
-							maximum: i18n.formatNumber(100),
-						})
-					: canSelectAllMatches
-						? i18n.t("collections:selectAll", {
-								count: i18n.formatNumber(pagination.totalDocs),
-							})
-						: i18n.t("collections:allSelected", {
-								count: i18n.formatNumber(pagination.totalDocs),
-							})}
-		</Button>
-	{/if}
-	{#if trashOnly && canBulkRestore}
-		<Button
-			variant="ghost"
-			size="sm"
-			disabled={bulkPending || selectionPending}
-			onclick={onRequestRestore}
-		>
-			{i18n.t("documents:restore")}
-		</Button>
-	{/if}
-	{#if trashOnly && canBulkDeletePermanent}
-		<Button
-			variant="destructive"
-			size="sm"
-			disabled={bulkPending || selectionPending}
-			onclick={onRequestDeletePermanent}
-		>
-			{i18n.t("collections:deletePermanently")}
-		</Button>
-	{/if}
-	{#if !trashOnly && hasBulkEditableFields && canBulkUpdate}
-		<Button variant="ghost" size="sm" disabled={bulkPending || selectionPending} onclick={onEdit}>
-			{i18n.t("general:edit")}
-		</Button>
-	{/if}
-	{#if !trashOnly && versioned && canBulkPublish}
-		<Button
-			variant="ghost"
-			size="sm"
-			disabled={bulkPending || selectionPending}
-			onclick={controller.bulkPublish}
-		>
-			{i18n.t("documents:publish")}
-		</Button>
-	{/if}
-	{#if !trashOnly && versioned && canBulkUnpublish}
-		<Button
-			variant="ghost"
-			size="sm"
-			disabled={bulkPending || selectionPending}
-			onclick={controller.bulkUnpublish}
-		>
-			{i18n.t("documents:unpublish")}
-		</Button>
-	{/if}
-	{#if !trashOnly && canBulkDelete}
-		<Button
-			variant="ghost"
-			size="sm"
-			disabled={bulkPending || selectionPending}
-			onclick={onRequestDelete}
-		>
-			{i18n.t("general:delete")}
-		</Button>
-	{/if}
-	{#if !trashOnly && selectedIDs.size === 1}
-		<Button variant="ghost" size="sm" onclick={() => onOpenDocument([...selectedIDs][0] ?? "")}>
-			{i18n.t("collections:openDocument")}
-		</Button>
-	{/if}
-</BulkActionBar>

package/src/features/collections/collection-list-bulk-editor.svelte

@@ -1,157 +0,0 @@
-<script lang="ts">
-	import type { SchemaField } from "@riducms/protocol";
-
-	import { Button } from "@admin/components/ui/button";
-	import { DateValueControl } from "@admin/components/ui/date-value-control";
-	import {
-		Dialog,
-		DialogContent,
-		DialogDescription,
-		DialogFooter,
-		DialogHeader,
-		DialogTitle,
-	} from "@admin/components/ui/dialog";
-	import { Input } from "@admin/components/ui/input";
-	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
-	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-
-	const runtime = getAdminRuntime();
-
-	let {
-		open = $bindable(false),
-		selectedCount,
-		fields,
-		pending = false,
-		onApply,
-	}: {
-		open?: boolean;
-		selectedCount: number;
-		fields: readonly SchemaField[];
-		pending?: boolean;
-		onApply: (field: SchemaField, value: unknown) => Promise<boolean>;
-	} = $props();
-
-	let fieldName = $state("");
-	let value = $state("");
-	let wasOpen = $state(false);
-	const field = $derived(fields.find((candidate) => candidate.name === fieldName));
-	const fieldLabel = $derived(field?.admin.label ?? runtime.i18n.t("collections:chooseField"));
-	const selectedOptionLabel = $derived(
-		field?.select?.options.find((option) => option.value === value)?.label ??
-			(value === "" ? runtime.i18n.t("collections:clearValue") : value)
-	);
-
-	$effect(() => {
-		if (open && !wasOpen) {
-			fieldName = fields[0]?.name ?? "";
-			value = "";
-		}
-		if (fieldName !== "" && !fields.some((candidate) => candidate.name === fieldName)) {
-			fieldName = fields[0]?.name ?? "";
-			value = "";
-		}
-		wasOpen = open;
-	});
-
-	function selectField(next: string) {
-		fieldName = next;
-		value = "";
-	}
-
-	async function submit() {
-		if (field === undefined) return;
-		let next: unknown = value;
-		if (field.type === "number") {
-			next = Number(value);
-			if (!Number.isFinite(next)) return;
-		} else if (field.type === "checkbox") {
-			next = value === "true";
-		}
-		if (await onApply(field, next)) open = false;
-	}
-</script>
-
-<Dialog bind:open>
-	<DialogContent>
-		<DialogHeader>
-			<DialogTitle class="font-serif text-[28px] leading-tight font-normal">
-				{runtime.i18n.t("collections:bulkEditSelected", {
-					count: selectedCount,
-					formattedCount: runtime.i18n.formatNumber(selectedCount),
-				})}
-			</DialogTitle>
-			<DialogDescription>
-				{runtime.i18n.t("collections:bulkEditDescription")}
-			</DialogDescription>
-		</DialogHeader>
-		<div class="grid gap-4 py-2">
-			<label class="grid gap-1.5 text-[12px] text-foreground-muted">
-				{runtime.i18n.t("collections:field")}
-				<Select type="single" value={fieldName} onValueChange={selectField}>
-					<SelectTrigger class="w-full" aria-label={runtime.i18n.t("collections:field")}>
-						{fieldLabel}
-					</SelectTrigger>
-					<SelectContent>
-						{#each fields as candidate (candidate.id)}
-							<SelectItem value={candidate.name} label={candidate.admin.label} />
-						{/each}
-					</SelectContent>
-				</Select>
-			</label>
-			<label class="grid gap-1.5 text-[12px] text-foreground-muted">
-				{runtime.i18n.t("collections:value")}
-				{#if field?.type === "select" || field?.type === "radio"}
-					<Select type="single" {value} onValueChange={(next) => (value = next)}>
-						<SelectTrigger class="w-full" aria-label={runtime.i18n.t("collections:value")}>
-							<span class={value === "" ? "text-foreground-placeholder" : undefined}>
-								{selectedOptionLabel}
-							</span>
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="" label={runtime.i18n.t("collections:clearValue")} />
-							{#each field.select?.options ?? [] as option (option.value)}
-								<SelectItem value={option.value} label={option.label} />
-							{/each}
-						</SelectContent>
-					</Select>
-				{:else if field?.type === "checkbox"}
-					<Select type="single" {value} onValueChange={(next) => (value = next)}>
-						<SelectTrigger class="w-full" aria-label={runtime.i18n.t("collections:value")}>
-							{value === "true"
-								? runtime.i18n.t("collections:enabled")
-								: runtime.i18n.t("collections:disabled")}
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="false" label={runtime.i18n.t("collections:disabled")} />
-							<SelectItem value="true" label={runtime.i18n.t("collections:enabled")} />
-						</SelectContent>
-					</Select>
-				{:else if field?.type === "date"}
-					<DateValueControl
-						id={`bulk-edit-${field.id}`}
-						appearance={field.date?.format}
-						{value}
-						label={runtime.i18n.t("collections:value")}
-						onValueChange={(next) => (value = next)}
-					/>
-				{:else}
-					<Input
-						aria-label={runtime.i18n.t("collections:value")}
-						type={field?.type === "number" ? "number" : "text"}
-						bind:value
-					/>
-				{/if}
-			</label>
-		</div>
-		<DialogFooter>
-			<Button variant="outline" onclick={() => (open = false)}>
-				{runtime.i18n.t("general:cancel")}
-			</Button>
-			<Button disabled={pending || field === undefined} onclick={submit}>
-				{pending
-					? runtime.i18n.t("collections:applying")
-					: runtime.i18n.t("collections:applyChange")}
-			</Button>
-		</DialogFooter>
-	</DialogContent>
-</Dialog>