@riducms/admin 0.1.0

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

@@ -0,0 +1,159 @@
+<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-navigation.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+
+	import { buttonVariants } from "@admin/components/ui/button";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	const runtime = getAdminRuntime();
+	let { active }: { active: "profile" | "security" } = $props();
+</script>
+
+<nav
+	class="flex gap-1 border-b border-control-border"
+	aria-label={runtime.i18n.t("account:accountMenu")}
+>
+	<Link
+		to={adminRoutePatterns.account}
+		class={buttonVariants({
+			variant: "ghost",
+			class: [
+				"rounded-b-none border-b-2 px-3",
+				active === "profile"
+					? "border-primary text-foreground-strong"
+					: "border-transparent text-foreground-muted hover:bg-control",
+			],
+		})}
+	>
+		{runtime.i18n.t("account:profileAndPreferences")}
+	</Link>
+	<Link
+		to={adminRoutePatterns.accountSecurity}
+		class={buttonVariants({
+			variant: "ghost",
+			class: [
+				"rounded-b-none border-b-2 px-3",
+				active === "security"
+					? "border-primary text-foreground-strong"
+					: "border-transparent text-foreground-muted hover:bg-control",
+			],
+		})}
+	>
+		{runtime.i18n.t("account:security")}
+	</Link>
+</nav>

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

@@ -0,0 +1,395 @@
+<script lang="ts">
+	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 { 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 FieldLayout from "@admin/fields/field-layout.svelte";
+	import AccountNavigation from "@admin/features/auth/account-navigation.svelte";
+
+	const runtime = getAdminRuntime();
+	const notifications = getNotificationCenter();
+	const navigate = useNavigate();
+	const form = new FormController({}, runtime.i18n);
+	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 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 afterComponents = $derived(
+		accountComponents.filter(
+			(component) => component.position === undefined || component.position === "after"
+		)
+	);
+	const host = {
+		refreshUser,
+		logout,
+		notify: (tone: "success" | "error", title: string, message?: string) =>
+			notifications[tone]({ title, message }),
+	};
+
+	$effect(() => {
+		const slug = collection?.slug;
+		const id = user?.id;
+		const locale = contentLocale;
+		if (slug === undefined || id === undefined) return;
+		const abort = new AbortController();
+		void load(slug, id, locale, abort.signal);
+		return () => abort.abort();
+	});
+
+	$effect(() => runtime.registerContentLocaleBlocker(() => form.dirty || form.submitting));
+
+	async function load(slug: string, id: string, locale: string | undefined, signal: AbortSignal) {
+		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 }),
+			]);
+			if (signal.aborted) return;
+			form.reset(document);
+			form.setLocalization(locale, document._localization?.sources);
+			form.setAccess(access, "update");
+		} catch (cause) {
+			if (!signal.aborted) {
+				error =
+					cause instanceof Error ? cause.message : runtime.i18n.t("account:profileLoadFailed");
+			}
+		} finally {
+			if (!signal.aborted) loading = false;
+		}
+	}
+
+	async function saveProfile(event: SubmitEvent) {
+		event.preventDefault();
+		if (collection === undefined || user === undefined) return;
+		profilePending = true;
+		error = undefined;
+		try {
+			const updated = await form.submit(collection.fields, false, (values) =>
+				runtime.client.update(collection.slug, user.id, values, { locale: contentLocale })
+			);
+			form.reset(updated);
+			form.setLocalization(contentLocale, updated._localization?.sources);
+			if (runtime.session !== undefined) runtime.session = { ...runtime.session, user: updated };
+			runtime.documentsChanged();
+			notifications.success({ title: runtime.i18n.t("account:profileUpdated") });
+		} catch (cause) {
+			if (!(cause instanceof FormValidationError)) {
+				error =
+					cause instanceof Error ? cause.message : runtime.i18n.t("account:profileSaveFailed");
+			}
+		} finally {
+			profilePending = false;
+		}
+	}
+
+	async function updateTheme(preference: ThemePreference) {
+		pendingThemeWrites += 1;
+		error = undefined;
+		try {
+			await runtime.setTheme(preference);
+			notifications.success({ title: runtime.i18n.t("account:themeSaved") });
+		} catch (cause) {
+			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:themeSaveFailed");
+		} finally {
+			pendingThemeWrites -= 1;
+		}
+	}
+
+	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") });
+		} catch (cause) {
+			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:languageSaveFailed");
+		} finally {
+			languagePending = false;
+		}
+	}
+
+	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") });
+		} catch (cause) {
+			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:timeZoneSaveFailed");
+		} finally {
+			timeZonePending = false;
+		}
+	}
+
+	async function resetPreferences() {
+		resetPending = true;
+		error = undefined;
+		try {
+			await runtime.resetPreferences();
+			notifications.success({ title: runtime.i18n.t("account:preferencesReset") });
+		} catch (cause) {
+			error =
+				cause instanceof Error ? cause.message : runtime.i18n.t("account:preferencesResetFailed");
+		} finally {
+			resetPending = false;
+		}
+	}
+
+	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;
+	}
+
+	async function logout() {
+		await runtime.client.logout();
+		runtime.session = undefined;
+		navigate(adminRoutePatterns.login, { replace: true });
+	}
+</script>
+
+{#snippet defaultView()}
+	<div class="mx-auto grid w-full max-w-[820px] gap-8 px-5 py-8 sm:px-8 sm:py-11">
+		<header class="grid gap-2">
+			<p class="font-mono text-[9.5px] tracking-[0.16em] text-foreground-faint uppercase">
+				{runtime.i18n.t("account:account")}
+			</p>
+			<h1 class="text-[28px] leading-tight font-semibold tracking-[-0.015em] text-foreground">
+				{runtime.i18n.t("account:profileAndPreferences")}
+			</h1>
+			<p class="max-w-[590px] text-[13.5px] leading-5.5 text-foreground-muted">
+				{runtime.i18n.t("account:profileDescription")}
+			</p>
+		</header>
+
+		{#if runtime.manifest !== undefined}
+			{#each beforeComponents as component (component.key)}
+				<component.component
+					manifest={runtime.manifest}
+					user={runtime.session?.user}
+					surface="profile"
+					{defaultView}
+					{host}
+					i18n={runtime.i18n}
+				/>
+			{/each}
+		{/if}
+
+		<AccountNavigation active="profile" />
+
+		{#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">
+				<UserRoundIcon class="size-4 text-foreground-sub" aria-hidden="true" />
+				<div>
+					<h2 id="profile-heading" class="text-[15px] font-semibold text-foreground">
+						{runtime.i18n.t("account:profile")}
+					</h2>
+					<p class="text-[12px] text-foreground-faint">
+						{runtime.i18n.t("account:profileRules")}
+					</p>
+				</div>
+			</header>
+			{#if loading}
+				<div class="grid gap-4 rounded-[4px] border border-control-border bg-control p-5">
+					<Skeleton class="h-10 w-full" /><Skeleton class="h-24 w-full" />
+				</div>
+			{:else if collection !== undefined}
+				<form
+					class="grid gap-6 rounded-[4px] border border-control-border bg-control p-5"
+					onsubmit={saveProfile}
+				>
+					<FieldLayout fields={collection.fields} {form} />
+					<Button
+						class="justify-self-start"
+						type="submit"
+						disabled={profilePending || !form.dirty || form.access?.operations.update !== true}
+					>
+						{profilePending
+							? runtime.i18n.t("account:savingProfile")
+							: runtime.i18n.t("account:saveProfile")}
+					</Button>
+				</form>
+			{/if}
+		</section>
+
+		<section class="grid gap-4" aria-labelledby="appearance-heading">
+			<header class="flex items-center gap-3">
+				<PaletteIcon class="size-4 text-foreground-sub" aria-hidden="true" />
+				<div>
+					<h2 id="appearance-heading" class="text-[15px] font-semibold text-foreground">
+						{runtime.i18n.t("account:appearance")}
+					</h2>
+					<p class="text-[12px] text-foreground-faint">
+						{runtime.i18n.t("account:preferencesStored")}
+					</p>
+				</div>
+			</header>
+			<div
+				class="grid gap-5 rounded-[4px] border border-control-border bg-control p-5 sm:grid-cols-[1fr_auto] sm:items-end"
+			>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<label class="grid gap-2" for="account-theme">
+						<span class="ridu-field-label">{runtime.i18n.t("account:theme")}</span>
+						<Select
+							type="single"
+							value={runtime.themePreference}
+							disabled={resetPending}
+							onValueChange={(preference) => void updateTheme(preference as ThemePreference)}
+						>
+							<SelectTrigger
+								id="account-theme"
+								class="w-full"
+								aria-label={runtime.i18n.t("account:theme")}
+								aria-busy={themePending || undefined}
+							>
+								{runtime.themePreference === "system"
+									? runtime.i18n.t("account:systemTheme")
+									: runtime.themePreference === "light"
+										? runtime.i18n.t("account:lightTheme")
+										: runtime.i18n.t("account:darkTheme")}
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="system" label={runtime.i18n.t("account:systemTheme")} />
+								<SelectItem value="light" label={runtime.i18n.t("account:lightTheme")} />
+								<SelectItem value="dark" label={runtime.i18n.t("account:darkTheme")} />
+							</SelectContent>
+						</Select>
+					</label>
+					{#if runtime.i18n.languages.length > 1}
+						<label class="grid gap-2" for="account-language">
+							<span class="ridu-field-label">{runtime.i18n.t("account:interfaceLanguage")}</span>
+							<Select
+								type="single"
+								value={runtime.i18n.language}
+								disabled={resetPending || languagePending}
+								onValueChange={(language) => void updateLanguage(language)}
+							>
+								<SelectTrigger
+									id="account-language"
+									class="w-full"
+									aria-label={runtime.i18n.t("account:interfaceLanguage")}
+									aria-busy={languagePending || undefined}
+								>
+									{selectedLanguageLabel}
+								</SelectTrigger>
+								<SelectContent>
+									{#each runtime.i18n.languages as language (language.code)}
+										<SelectItem
+											value={language.code}
+											label={runtime.i18n.text(language.label, language.labelTranslations)}
+										/>
+									{/each}
+								</SelectContent>
+							</Select>
+						</label>
+					{/if}
+					{#if runtime.i18n.timeZones.length > 0}
+						<label class="grid gap-2" for="account-timezone">
+							<span class="ridu-field-label">{runtime.i18n.t("account:timeZone")}</span>
+							<Select
+								type="single"
+								value={runtime.i18n.timeZone}
+								disabled={resetPending || timeZonePending}
+								onValueChange={(timeZone) => void updateTimeZone(timeZone)}
+							>
+								<SelectTrigger
+									id="account-timezone"
+									class="w-full"
+									aria-label={runtime.i18n.t("account:timeZone")}
+									aria-busy={timeZonePending || undefined}
+								>
+									{selectedTimeZoneLabel}
+								</SelectTrigger>
+								<SelectContent>
+									{#each runtime.i18n.timeZones as timeZone (timeZone.id)}
+										<SelectItem
+											value={timeZone.id}
+											label={runtime.i18n.text(timeZone.label, timeZone.labelTranslations)}
+										/>
+									{/each}
+								</SelectContent>
+							</Select>
+						</label>
+					{/if}
+				</div>
+				<Button variant="outline" disabled={resetPending} onclick={resetPreferences}>
+					<RotateCcwIcon class="size-3.5" aria-hidden="true" />
+					{resetPending
+						? runtime.i18n.t("account:resettingPreferences")
+						: runtime.i18n.t("account:resetAllPreferences")}
+				</Button>
+			</div>
+		</section>
+		{#if runtime.manifest !== undefined}
+			{#each afterComponents as component (component.key)}
+				<component.component
+					manifest={runtime.manifest}
+					user={runtime.session?.user}
+					surface="profile"
+					{defaultView}
+					{host}
+					i18n={runtime.i18n}
+				/>
+			{/each}
+		{/if}
+	</div>
+{/snippet}
+
+{#if runtime.manifest !== undefined && replacement !== undefined}
+	<replacement.component
+		manifest={runtime.manifest}
+		user={runtime.session?.user}
+		surface="profile"
+		{defaultView}
+		{host}
+		i18n={runtime.i18n}
+	/>
+{:else}
+	{@render defaultView()}
+{/if}