@riducms/admin 0.2.3 → 0.4.0

package/src/features/{auth → account}/account-route.svelte

@@ -1,65 +1,77 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { connectDocumentLiveValidation } from "@admin/core/forms/live-validation.svelte";
-	import { useNavigate } from "@hvniel/svelte-router";
 	import PaletteIcon from "~icons/lucide/palette";
 	import RotateCcwIcon from "~icons/lucide/rotate-ccw";
 	import UserRoundIcon from "~icons/lucide/user-round";
 
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button } from "@admin/components/ui/button";
+	import { Button } from "@riducms/ui";
 	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
 	import { Skeleton } from "@admin/components/ui/skeleton";
 	import { FormController, FormValidationError } from "@admin/core/forms/form-controller.svelte";
 	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
 	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime, type ThemePreference } from "@admin/core/runtime/admin-runtime.svelte";
+	import { getAdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
+	import type { SchemaField } from "@riducms/protocol";
 	import FieldLayout from "@admin/fields/field-layout.svelte";
-	import AccountNavigation from "@admin/features/auth/account-navigation.svelte";
+	import AccountNavigation from "@admin/features/account/account-navigation.svelte";
+	import { useLocation } from "@hvniel/svelte-router";
 
 	const runtime = getAdminRuntime();
+	const bootstrap = getAdminBootstrapCoordinator();
 	const notifications = getNotificationCenter();
-	const navigate = useNavigate();
+	const location = useLocation();
+
 	const form = new FormController({}, runtime.i18n);
 	connectDocumentLiveValidation(form, runtime.client);
-	$effect(() => () => form.disposeBindings());
+
+	let profileRequest: AbortController | undefined;
+	let activeProfileKey = "";
+
 	let loading = $state(true);
 	let error = $state<string>();
+
 	let profilePending = $state(false);
+
 	let pendingThemeWrites = $state(0);
 	const themePending = $derived(pendingThemeWrites > 0);
 	let languagePending = $state(false);
 	let timeZonePending = $state(false);
 	let resetPending = $state(false);
+
 	const collection = $derived(runtime.authCollection);
 	const user = $derived(runtime.session?.user);
-	const contentLocale = $derived(runtime.contentLocale);
+	const sessionID = $derived(runtime.session?.id);
+	const userID = $derived(runtime.session?.user.id);
+	const requestedLocale = $derived(new URLSearchParams(location.current.search).get("locale"));
+	const contentLocale = $derived(runtime.resolveContentLocale(requestedLocale));
+
 	const selectedLanguageLabel = $derived.by(() => {
 		const language = runtime.i18n.languages.find((item) => item.code === runtime.i18n.language);
+
 		return language === undefined
 			? runtime.i18n.language
 			: runtime.i18n.text(language.label, language.labelTranslations);
 	});
+
 	const selectedTimeZoneLabel = $derived.by(() => {
 		const timeZone = runtime.i18n.timeZones.find((item) => item.id === runtime.i18n.timeZone);
+
 		return timeZone === undefined
 			? runtime.i18n.timeZone
 			: runtime.i18n.text(timeZone.label, timeZone.labelTranslations);
 	});
-	const accountComponents = $derived(
-		runtime.accountComponents.filter((component) => component.surface === "profile")
-	);
-	const replacement = $derived(
-		accountComponents.find((component) => component.position === "replace")
-	);
-	const beforeComponents = $derived(
-		accountComponents.filter((component) => component.position === "before")
+
+	const accountComponents = runtime.config.extensions.account.filter(
+		(component) => component.surface === "profile"
 	);
-	const afterComponents = $derived(
-		accountComponents.filter(
-			(component) => component.position === undefined || component.position === "after"
-		)
+	const replacement = accountComponents.find((component) => component.position === "replace");
+	const beforeComponents = accountComponents.filter((component) => component.position === "before");
+	const afterComponents = accountComponents.filter(
+		(component) => component.position === undefined || component.position === "after"
 	);
+
 	const host = {
 		refreshUser,
 		logout,
@@ -67,69 +79,164 @@
 			notifications[tone]({ title, message }),
 	};
 
-	$effect(() => {
+	function adoptPreparedProfile(
+		slug: string,
+		id: string,
+		locale: string | undefined,
+		fields: readonly SchemaField[]
+	) {
+		// The coordinator binds this exact pathname and query to the current runtime context. The
+		// effect's owner key prevents a retained account route from reusing it after a session change.
+		const route = bootstrap.routeData(location.current.pathname, location.current.search);
+		if (route?.kind !== "account") return false;
+
+		const { document, access } = route.document;
+		profileRequest?.abort();
+		profileRequest = undefined;
+		profilePending = false;
+		loading = false;
+		error = undefined;
+		form.setResource({ collection: slug, id });
+		form.setLocalization(locale);
+		if (document.error !== undefined || access.error !== undefined) {
+			form.reset({}, fields);
+			form.setAccess(undefined, "update");
+			error = (document.error ?? access.error)?.message;
+
+			return true;
+		}
+
+		form.reset(document.value, fields);
+		form.setLocalization(locale, document.value._localization?.sources);
+		form.setAccess(access.value, "update");
+
+		return true;
+	}
+
+	$effect.pre(() => {
 		const slug = collection?.slug;
-		const id = user?.id;
+		const owner = sessionID;
+		const id = userID;
 		const locale = contentLocale;
-		if (slug === undefined || id === undefined) return;
-		const abort = new AbortController();
-		untrack(() => load(slug, id, locale, abort.signal));
-		return () => abort.abort();
+		const fields = collection?.fields;
+		if (slug === undefined || owner === undefined || id === undefined || fields === undefined)
+			return;
+
+		const key = `${runtime.manifestRevision}:${slug}:${owner}:${id}:${locale ?? "default"}`;
+		if (key === activeProfileKey) return;
+
+		activeProfileKey = key;
+		if (adoptPreparedProfile(slug, id, locale, fields)) return;
+
+		const request = beginProfileRequest();
+		profilePending = false;
+		load(slug, owner, id, locale, request);
 	});
 
-	$effect(() => runtime.registerContentLocaleBlocker(() => form.dirty || form.submitting));
+	$effect(() => {
+		const unregisterBlocker = runtime.registerContentLocaleBlocker(
+			() => form.dirty || form.submitting
+		);
 
-	async function load(slug: string, id: string, locale: string | undefined, signal: AbortSignal) {
+		return () => {
+			unregisterBlocker();
+			profileRequest?.abort();
+			form.disposeBindings();
+		};
+	});
+
+	function beginProfileRequest() {
+		profileRequest?.abort();
+		const request = new AbortController();
+		profileRequest = request;
+
+		return request;
+	}
+
+	function ownsProfileRequest(request: AbortController, owner: string) {
+		return profileRequest === request && !request.signal.aborted && runtime.session?.id === owner;
+	}
+
+	async function load(
+		slug: string,
+		owner: string,
+		id: string,
+		locale: string | undefined,
+		request: AbortController
+	) {
 		form.setResource({ collection: slug, id });
 		form.setLocalization(locale);
 		loading = true;
 		error = undefined;
+
 		try {
 			const [document, access] = await Promise.all([
-				runtime.client.find(slug, id, { signal, locale }),
-				runtime.client.collectionAccess(slug, { id, signal, locale }),
+				runtime.client.find(slug, id, { signal: request.signal, locale }),
+				runtime.client.collectionAccess(slug, { id, signal: request.signal, locale }),
 			]);
-			if (signal.aborted) return;
+			if (!ownsProfileRequest(request, owner)) return;
+
 			form.reset(document, collection?.fields ?? []);
 			form.setLocalization(locale, document._localization?.sources);
 			form.setAccess(access, "update");
 		} catch (cause) {
-			if (!signal.aborted) {
+			if (ownsProfileRequest(request, owner)) {
 				error =
 					cause instanceof Error ? cause.message : runtime.i18n.t("account:profileLoadFailed");
 			}
 		} finally {
-			if (!signal.aborted) loading = false;
+			if (ownsProfileRequest(request, owner)) loading = false;
+
+			if (profileRequest === request) profileRequest = undefined;
 		}
 	}
 
 	async function saveProfile(event: SubmitEvent) {
 		event.preventDefault();
 		if (collection === undefined || user === undefined) return;
+
+		const slug = collection.slug;
+		const owner = runtime.session?.id;
+		const id = user.id;
+		if (owner === undefined) return;
+
+		const locale = contentLocale;
+		const fields = collection.fields;
+		const request = beginProfileRequest();
+		loading = false;
 		profilePending = true;
 		error = undefined;
+
 		try {
-			const updated = await form.submit(collection.fields, false, (values) =>
-				runtime.client.update(collection.slug, user.id, values, { locale: contentLocale })
+			const updated = await form.submit(fields, false, (values) =>
+				runtime.client.update(slug, id, values, { locale, signal: request.signal })
 			);
+			if (!ownsProfileRequest(request, owner)) return;
+
+			const activeSession = runtime.session;
+			if (activeSession === undefined) return;
+
 			form.reset(updated);
-			form.setLocalization(contentLocale, updated._localization?.sources);
-			if (runtime.session !== undefined) runtime.session = { ...runtime.session, user: updated };
+			form.setLocalization(locale, updated._localization?.sources);
+			runtime.session = { ...activeSession, user: updated };
 			runtime.documentsChanged();
 			notifications.success({ title: runtime.i18n.t("account:profileUpdated") });
 		} catch (cause) {
-			if (!(cause instanceof FormValidationError)) {
+			if (ownsProfileRequest(request, owner) && !(cause instanceof FormValidationError)) {
 				error =
 					cause instanceof Error ? cause.message : runtime.i18n.t("account:profileSaveFailed");
 			}
 		} finally {
-			profilePending = false;
+			if (ownsProfileRequest(request, owner)) profilePending = false;
+
+			if (profileRequest === request) profileRequest = undefined;
 		}
 	}
 
 	async function updateTheme(preference: ThemePreference) {
 		pendingThemeWrites += 1;
 		error = undefined;
+
 		try {
 			await runtime.setTheme(preference);
 			notifications.success({ title: runtime.i18n.t("account:themeSaved") });
@@ -142,8 +249,10 @@
 
 	async function updateLanguage(language: string) {
 		if (!runtime.i18n.languages.some((item) => item.code === language)) return;
+
 		languagePending = true;
 		error = undefined;
+
 		try {
 			await runtime.i18n.setLanguage(language);
 			notifications.success({ title: runtime.i18n.t("account:languageSaved") });
@@ -156,8 +265,10 @@
 
 	async function updateTimeZone(timeZone: string) {
 		if (!runtime.i18n.timeZones.some((item) => item.id === timeZone)) return;
+
 		timeZonePending = true;
 		error = undefined;
+
 		try {
 			await runtime.i18n.setTimeZone(timeZone);
 			notifications.success({ title: runtime.i18n.t("account:timeZoneSaved") });
@@ -171,6 +282,7 @@
 	async function resetPreferences() {
 		resetPending = true;
 		error = undefined;
+
 		try {
 			await runtime.resetPreferences();
 			notifications.success({ title: runtime.i18n.t("account:preferencesReset") });
@@ -183,18 +295,58 @@
 	}
 
 	async function refreshUser() {
-		if (collection === undefined || user === undefined) return undefined;
-		const document = await runtime.client.find(collection.slug, user.id, { locale: contentLocale });
-		if (runtime.session !== undefined) runtime.session = { ...runtime.session, user: document };
-		form.reset(document);
-		form.setLocalization(contentLocale, document._localization?.sources);
-		return document;
+		if (collection === undefined || user === undefined || form.submitting) return undefined;
+
+		const owner = runtime.session?.id;
+		const id = user.id;
+		if (owner === undefined) return undefined;
+
+		const locale = contentLocale;
+		const request = beginProfileRequest();
+
+		try {
+			const document = await runtime.client.find(collection.slug, id, {
+				locale,
+				signal: request.signal,
+			});
+			if (!ownsProfileRequest(request, owner)) return undefined;
+
+			const activeSession = runtime.session;
+			if (activeSession === undefined) return undefined;
+
+			runtime.session = { ...activeSession, user: document };
+			form.reset(document);
+			form.setLocalization(locale, document._localization?.sources);
+			loading = false;
+
+			return document;
+		} catch (cause) {
+			if (!ownsProfileRequest(request, owner)) return undefined;
+
+			throw cause;
+		} finally {
+			if (profileRequest === request) profileRequest = undefined;
+		}
 	}
 
 	async function logout() {
-		await runtime.client.logout();
-		runtime.session = undefined;
-		navigate(adminRoutePatterns.login, { replace: true });
+		const owner = runtime.session?.id;
+		if (owner === undefined) return;
+
+		const request = beginProfileRequest();
+
+		try {
+			await runtime.client.auth.logout({ signal: request.signal });
+			if (!ownsProfileRequest(request, owner)) return;
+
+			await runtime.hardNavigate(adminRoutePatterns.login);
+		} catch (cause) {
+			if (!ownsProfileRequest(request, owner)) return;
+
+			throw cause;
+		} finally {
+			if (profileRequest === request) profileRequest = undefined;
+		}
 	}
 </script>
 
@@ -227,7 +379,9 @@
 
 		<AccountNavigation active="profile" />
 
-		{#if error !== undefined}<Banner tone="destructive">{error}</Banner>{/if}
+		{#if error !== undefined}
+			<Banner tone="destructive">{error}</Banner>
+		{/if}
 
 		<section class="grid gap-4" aria-labelledby="profile-heading">
 			<header class="flex items-center gap-3">
@@ -242,7 +396,10 @@
 				</div>
 			</header>
 			{#if loading}
-				<div class="grid gap-4 rounded-[4px] border border-control-border bg-control p-5">
+				<div
+					class="grid gap-4 rounded-[4px] border border-control-border bg-control p-5"
+					data-ridu-loading-surface="account"
+				>
 					<Skeleton class="h-10 w-full" /><Skeleton class="h-24 w-full" />
 				</div>
 			{:else if collection !== undefined}

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

@@ -0,0 +1,159 @@
+import type { APIKey, APIKeyInfo, AuthSessionInfo, AdminSecurityDataV1 } 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;
+	#operationRequest?: AbortController;
+	#generation = 0;
+
+	constructor(
+		private readonly client: AdminClient,
+		readonly apiKeysEnabled: boolean,
+		private readonly translate: AdminI18n["t"]
+	) {}
+
+	load = async (initial?: AdminSecurityDataV1) => {
+		this.#request?.abort();
+		this.#operationRequest?.abort();
+		this.#operationRequest = undefined;
+		this.operation = undefined;
+		this.sessions = [];
+		this.apiKeys = [];
+		this.createdAPIKey = undefined;
+		if (initial !== undefined) {
+			this.#generation += 1;
+			this.#request = undefined;
+			this.error = initial.sessions.error?.message ?? initial.apiKeys.error?.message;
+			this.sessions = initial.sessions.value ?? [];
+			this.apiKeys = initial.apiKeys.value ?? [];
+			this.status = this.error === undefined ? "ready" : "error";
+			return;
+		}
+		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.auth.sessions({ signal: request.signal }),
+				this.apiKeysEnabled
+					? this.client.auth.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,
+			(signal) => this.client.auth.revokeSession(id, { signal }),
+			() => (this.sessions = this.sessions.filter((session) => session.id !== id))
+		);
+	};
+
+	logoutAll = async () => {
+		return this.#run(
+			"logout-all",
+			(signal) => this.client.auth.logoutAll({ signal }),
+			() => (this.sessions = [])
+		);
+	};
+
+	createAPIKey = async (name: string, expiresAt?: string) => {
+		return this.#run(
+			"api-key:create",
+			(signal) => this.client.auth.createAPIKey({ name, expiresAt }, { signal }),
+			(created) => {
+				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,
+			(signal) => this.client.auth.revokeAPIKey(id, { signal }),
+			() => {
+				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", (signal) =>
+			this.client.auth.changePassword({ currentPassword, password }, { signal })
+		);
+	};
+
+	destroy() {
+		this.#generation += 1;
+		this.#request?.abort();
+		this.#operationRequest?.abort();
+	}
+
+	async #run<Result>(
+		name: string,
+		operation: (signal: AbortSignal) => Promise<Result>,
+		apply?: (result: Result) => void
+	) {
+		if (this.operation !== undefined) return false;
+		const request = new AbortController();
+		const generation = this.#generation;
+		this.#operationRequest = request;
+		this.operation = name;
+		this.error = undefined;
+		try {
+			const result = await operation(request.signal);
+			if (request.signal.aborted || generation !== this.#generation) return false;
+			apply?.(result);
+			return true;
+		} catch (cause) {
+			if (request.signal.aborted || generation !== this.#generation) return false;
+			this.error = messageFrom(cause, this.translate("account:securityOperationFailed"));
+			return false;
+		} finally {
+			if (this.#operationRequest === request) {
+				this.#operationRequest = undefined;
+				this.operation = undefined;
+			}
+		}
+	}
+}
+
+function messageFrom(cause: unknown, fallback: string) {
+	return cause instanceof RiduError || cause instanceof Error ? cause.message : fallback;
+}