@riducms/admin 0.2.2 → 0.3.0

package/src/features/documents/document-credentials.scss

@@ -0,0 +1,37 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-document-credentials {
+		display: grid;
+		gap: 20px;
+		min-inline-size: 0;
+		margin: 0;
+		border: 0;
+		padding: 0;
+	}
+
+	.ridu-document-credentials__heading {
+		margin-block-end: 10px;
+		padding: 0;
+		font-size: 20px;
+		font-weight: 500;
+	}
+
+	.ridu-document-credentials__fields {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 20px;
+	}
+
+	.ridu-document-credentials__field {
+		display: grid;
+		gap: 5px;
+		min-inline-size: 0;
+	}
+
+	@media (max-width: ui.$small) {
+		.ridu-document-credentials__fields {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+}

package/src/features/documents/document-credentials.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Input } from "@riducms/ui";
+	import "@admin/features/documents/document-credentials.scss";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import type { AuthCreateCredentials } from "@admin/features/documents/document-credentials";
+
+	const runtime = getAdminRuntime();
+
+	let {
+		credentials = $bindable(),
+		issue = $bindable(),
+		minimumLength,
+	}: {
+		credentials: AuthCreateCredentials;
+		issue?: string;
+		minimumLength?: number;
+	} = $props();
+</script>
+
+<fieldset class="ridu-document-credentials">
+	<legend class="ridu-document-credentials__heading">
+		{runtime.i18n.t("documents:credentials")}
+	</legend>
+	<p class="ridu-field-help">
+		{runtime.i18n.t("documents:credentialsDescription")}
+	</p>
+	<div class="ridu-document-credentials__fields">
+		<label class="ridu-document-credentials__field" for="ridu-new-user-password">
+			<span class="ridu-field-label">
+				{runtime.i18n.t("documents:password")}
+				<span class="ridu-field-required" aria-hidden="true">*</span>
+			</span>
+			<Input
+				id="ridu-new-user-password"
+				type="password"
+				autocomplete="new-password"
+				minlength={minimumLength}
+				required
+				aria-invalid={issue !== undefined}
+				aria-describedby="ridu-new-user-password-help"
+				bind:value={credentials.password}
+				oninput={() => (issue = undefined)}
+			/>
+		</label>
+		<label class="ridu-document-credentials__field" for="ridu-new-user-password-confirmation">
+			<span class="ridu-field-label">
+				{runtime.i18n.t("documents:confirmPassword")}
+				<span class="ridu-field-required" aria-hidden="true">*</span>
+			</span>
+			<Input
+				id="ridu-new-user-password-confirmation"
+				type="password"
+				autocomplete="new-password"
+				required
+				aria-invalid={issue !== undefined}
+				aria-describedby="ridu-new-user-password-help"
+				bind:value={credentials.passwordConfirmation}
+				oninput={() => (issue = undefined)}
+			/>
+		</label>
+	</div>
+	<p
+		id="ridu-new-user-password-help"
+		class={issue === undefined ? "ridu-field-help" : "ridu-field-error"}
+		role={issue === undefined ? undefined : "alert"}
+	>
+		{issue ??
+			runtime.i18n.t("documents:passwordMinimum", {
+				minimum: runtime.i18n.formatNumber(minimumLength ?? 8),
+			})}
+	</p>
+</fieldset>

package/src/features/documents/{document-route-dirty.ts → document-credentials.ts}

@@ -1,3 +1,6 @@
+import type { AdminI18n } from "@riducms/plugin";
+import type { SchemaCollection } from "@riducms/protocol";
+
 export interface DocumentRouteDirtyInput {
 	documentValuesDirty: boolean;
 	creatingAuthUser: boolean;
@@ -41,3 +44,25 @@ export async function saveAuthCreateWithClearedCredentials(
 		throw cause;
 	}
 }
+
+export function validateNewUserCredentials(
+	credentials: AuthCreateCredentials,
+	settings: SchemaCollection["authSettings"],
+	i18n: AdminI18n
+) {
+	if (settings === undefined) return undefined;
+	if (credentials.password === "") return i18n.t("documents:enterNewAccountPassword");
+	if (Array.from(credentials.password).length < settings.passwordMinLength) {
+		return i18n.t("documents:passwordTooShort", {
+			minimum: i18n.formatNumber(settings.passwordMinLength),
+		});
+	}
+	if (new TextEncoder().encode(credentials.password).length > settings.passwordMaxBytes) {
+		return i18n.t("documents:passwordTooLong", {
+			maximum: i18n.formatNumber(settings.passwordMaxBytes),
+		});
+	}
+	if (credentials.password !== credentials.passwordConfirmation)
+		return i18n.t("documents:passwordsDoNotMatch");
+	return undefined;
+}

package/src/features/documents/document-field-sections.scss

@@ -0,0 +1,39 @@
+@layer ridu.components {
+	// Only document-level tabs cross the page gutters; nested field tabs stay contained.
+	:is(.ridu-document-form > fieldset, .ridu-reference-form)
+		> .ridu-field-grid
+		> .ridu-field-tabs
+		> .ridu-field-tabs__list {
+		margin-inline: calc(-1 * var(--admin-gutter));
+		padding-inline: var(--admin-gutter);
+		border-bottom-color: var(--border);
+	}
+
+	.ridu-document-sections {
+		display: grid;
+		min-width: 0;
+		gap: 30px;
+	}
+	.ridu-document-sections__main,
+	.ridu-document-sections__sidebar {
+		min-width: 0;
+	}
+	.ridu-document-sections__sidebar {
+		border-top: 1px solid var(--control-border);
+		padding-top: 30px;
+	}
+	@media (min-width: 1100px) {
+		.ridu-document-sections--sidebar {
+			grid-template-columns: minmax(0, 2fr) minmax(265px, 1fr);
+			gap: 40px;
+			min-height: calc(100vh - 220px);
+			.ridu-document-sections__sidebar {
+				grid-column: 2;
+				border-top: 0;
+				border-inline-start: 1px solid var(--control-border);
+				padding-top: 0;
+				padding-inline-start: 40px;
+			}
+		}
+	}
+}

package/src/features/documents/document-field-sections.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "@admin/features/documents/document-field-sections.scss";
 	import type { SchemaField } from "@riducms/protocol";
 
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
@@ -21,25 +22,15 @@
 	<FieldLayout fields={partition.content} {form} />
 {:else}
 	<div
-		class={[
-			"grid min-w-0 gap-8",
-			!stacked && "xl:grid-cols-[minmax(0,1fr)_minmax(260px,340px)] xl:items-start",
-		]}
+		class={["ridu-document-sections", !stacked && "ridu-document-sections--sidebar"]}
 		data-document-field-columns
 	>
 		{#if partition.content.length > 0}
-			<div class="min-w-0" data-document-main-fields>
+			<div class="ridu-document-sections__main" data-document-main-fields>
 				<FieldLayout fields={partition.content} {form} />
 			</div>
 		{/if}
-		<aside
-			class={[
-				"min-w-0 border-t border-control-border pt-7",
-				!stacked && "xl:border-t-0 xl:border-s xl:pt-0 xl:ps-7",
-				!stacked && partition.content.length === 0 && "xl:col-start-2",
-			]}
-			data-document-sidebar-fields
-		>
+		<aside class="ridu-document-sections__sidebar" data-document-sidebar-fields>
 			<FieldLayout fields={partition.sidebar} {form} />
 		</aside>
 	</div>

package/src/features/documents/document-loading.scss

@@ -0,0 +1,24 @@
+@layer ridu.components {
+	.ridu-document-module {
+		display: grid;
+		place-content: center;
+		justify-items: center;
+		gap: 20px;
+		min-block-size: 288px;
+		padding: 20px;
+		color: var(--foreground-muted);
+		font-size: var(--font-size-body);
+
+		&--upload {
+			min-block-size: 192px;
+		}
+
+		&--error {
+			color: var(--destructive);
+		}
+	}
+
+	.ridu-document-module__message {
+		margin: 0;
+	}
+}

package/src/features/documents/document-lock-controller.svelte.ts

@@ -0,0 +1,187 @@
+import type { DocumentLockEnvelope } from "@riducms/protocol";
+
+import type { FormController } from "@admin/core/forms/form-controller.svelte";
+import type { NotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+interface DocumentLockControllerOptions {
+	runtime: AdminRuntime;
+	notifications: NotificationCenter;
+	form: FormController;
+}
+
+interface DocumentLockOwner {
+	collection: string;
+	documentID: string;
+	durationSeconds: number;
+}
+
+export class DocumentLockController {
+	#current = $state.raw<DocumentLockEnvelope>();
+	#operation = $state(false);
+	#error = $state<string>();
+	#owner?: DocumentLockOwner;
+	#request?: AbortController;
+	#refreshTimer?: number;
+
+	constructor(private readonly options: DocumentLockControllerOptions) {}
+
+	get operation() {
+		return this.#operation;
+	}
+	get error() {
+		return this.#error;
+	}
+
+	get lockedByAnotherEditor() {
+		return this.#current?.lock !== null && this.#current?.owned === false;
+	}
+
+	get ownerLabel() {
+		return this.#current?.lock?.ownerLabel;
+	}
+
+	get updatedAt() {
+		return this.#current?.lock?.updatedAt;
+	}
+
+	get canTakeOver() {
+		return this.lockedByAnotherEditor && this.#current?.canTakeOver === true;
+	}
+
+	async acquire(collection: string, documentID: string, durationSeconds = 120) {
+		let owner = this.#owner;
+		if (owner?.collection !== collection || owner.documentID !== documentID) {
+			this.release();
+			owner = { collection, documentID, durationSeconds };
+			this.#owner = owner;
+		} else {
+			owner.durationSeconds = durationSeconds;
+		}
+		this.options.form.writeBlocked = true;
+		this.#error = undefined;
+		this.#operation = true;
+		try {
+			await this.#requestLock(owner, false);
+		} catch (cause) {
+			if (this.#owner === owner) {
+				this.#error =
+					cause instanceof Error
+						? cause.message
+						: this.options.runtime.i18n.t("documents:loadFailed");
+				this.options.form.writeBlocked = true;
+			}
+		} finally {
+			if (this.#owner === owner) this.#operation = false;
+		}
+	}
+
+	retry = async () => {
+		const owner = this.#owner;
+		if (owner === undefined || this.#operation) return;
+		await this.acquire(owner.collection, owner.documentID, owner.durationSeconds);
+	};
+
+	takeOver = async () => {
+		const owner = this.#owner;
+		if (owner === undefined || !this.canTakeOver || this.#operation) return false;
+		this.#operation = true;
+		try {
+			const state = await this.#requestLock(owner, true);
+			if (state === undefined) return false;
+			this.options.notifications.success({
+				title: this.options.runtime.i18n.t("documents:lockTakenOver"),
+			});
+			return state.owned;
+		} catch (cause) {
+			if (this.#owner !== owner) return false;
+			this.options.notifications.error({
+				title: this.options.runtime.i18n.t("documents:lockTakeoverFailed"),
+				message: cause instanceof Error ? cause.message : undefined,
+			});
+			return false;
+		} finally {
+			if (this.#owner === owner) this.#operation = false;
+		}
+	};
+
+	releaseUnless(collection: string, documentID: string | undefined) {
+		if (
+			documentID === undefined ||
+			this.#owner?.collection !== collection ||
+			this.#owner.documentID !== documentID
+		) {
+			this.release();
+		}
+	}
+
+	pause() {
+		this.#request?.abort();
+		this.#request = undefined;
+		this.#operation = false;
+		if (this.#refreshTimer !== undefined) {
+			window.clearInterval(this.#refreshTimer);
+			this.#refreshTimer = undefined;
+		}
+	}
+
+	release() {
+		this.pause();
+		const owner = this.#owner;
+		const owned = this.#current?.owned === true;
+		this.#owner = undefined;
+		this.#current = undefined;
+		this.#error = undefined;
+		this.options.form.writeBlocked = false;
+		if (owner !== undefined && owned) {
+			this.options.runtime.client
+				.releaseDocumentLock(owner.collection, owner.documentID, { keepalive: true })
+				.catch(() => {});
+		}
+	}
+
+	async #requestLock(owner: DocumentLockOwner, takeOver: boolean) {
+		this.#request?.abort();
+		const request = new AbortController();
+		this.#request = request;
+		try {
+			const state = await this.options.runtime.client.acquireDocumentLock(
+				owner.collection,
+				owner.documentID,
+				takeOver,
+				{ signal: request.signal }
+			);
+			if (request.signal.aborted || this.#owner !== owner) return;
+			this.#apply(state);
+			return state;
+		} catch (cause) {
+			if (request.signal.aborted || this.#owner !== owner) return;
+			throw cause;
+		} finally {
+			if (this.#request === request) this.#request = undefined;
+		}
+	}
+
+	#apply(state: DocumentLockEnvelope) {
+		this.#current = state;
+		this.options.form.writeBlocked = state.lock !== null && !state.owned;
+		if (!state.owned && this.#refreshTimer !== undefined) {
+			window.clearInterval(this.#refreshTimer);
+			this.#refreshTimer = undefined;
+		} else if (state.owned && this.#refreshTimer === undefined && this.#owner !== undefined) {
+			this.#startRefresh(this.#owner);
+		}
+	}
+
+	#startRefresh(owner: DocumentLockOwner) {
+		const interval = Math.max(5, Math.floor(owner.durationSeconds / 3));
+		this.#refreshTimer = window.setInterval(async () => {
+			if (this.#owner !== owner || this.#request !== undefined) return;
+			try {
+				await this.#requestLock(owner, false);
+			} catch {
+				// Retry on the next tick; saves still enforce the server's current lock.
+			}
+		}, interval * 1_000);
+	}
+}

package/src/features/documents/document-operation-dialogs.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import {
+		Button,
+		buttonVariants,
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle,
+	} from "@riducms/ui";
+	import { collectionPath } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import type { DocumentController } from "@admin/features/documents/document-controller.svelte";
+	const runtime = getAdminRuntime();
+	let { controller }: { controller: DocumentController } = $props();
+	let dismissedLock = $state<string>();
+	const lockKey = $derived(
+		controller.lock.lockedByAnotherEditor
+			? `${controller.collectionSlug}:${controller.documentID ?? ""}:${controller.lock.ownerLabel ?? ""}:${controller.lock.updatedAt ?? ""}`
+			: undefined
+	);
+</script>
+
+{#if !controller.globalResource && controller.canDelete}
+	{const deleteConfirmation = $derived(
+		controller.collection?.capabilities.trash === true
+			? {
+					title: runtime.i18n.t("documents:moveToTrashQuestion"),
+					description: runtime.i18n.t("documents:moveToTrashDescription", {
+						label: controller.documentHeading,
+					}),
+					action: runtime.i18n.t("documents:moveToTrash"),
+				}
+			: {
+					title: runtime.i18n.t("documents:deleteQuestion"),
+					description: runtime.i18n.t("documents:deleteDescription", {
+						label: controller.documentHeading,
+					}),
+					action: runtime.i18n.t("documents:deleteDocument"),
+				}
+	)}
+
+	<Dialog bind:open={controller.deleteDialogOpen}>
+		<DialogContent variant="confirmation">
+			<DialogHeader>
+				<DialogTitle>
+					{deleteConfirmation.title}
+				</DialogTitle>
+				<DialogDescription>
+					{deleteConfirmation.description}
+				</DialogDescription>
+			</DialogHeader>
+			<DialogFooter>
+				<Button variant="outline" onclick={() => (controller.deleteDialogOpen = false)}>
+					{runtime.i18n.t("documents:cancel")}
+				</Button>
+				<Button onclick={controller.remove}>
+					{deleteConfirmation.action}
+				</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+{/if}
+
+<Dialog
+	open={lockKey !== undefined && dismissedLock !== lockKey}
+	onOpenChange={(open) => {
+		if (!open) dismissedLock = lockKey;
+	}}
+>
+	<DialogContent variant="confirmation">
+		<DialogHeader>
+			<DialogTitle>
+				{runtime.i18n.t("documents:currentlyEditing", {
+					owner: controller.lock.ownerLabel ?? runtime.i18n.t("documents:anotherEditor"),
+				})}
+			</DialogTitle>
+			<DialogDescription>
+				{controller.lock.updatedAt === undefined
+					? runtime.i18n.t("documents:editingLeaseActive")
+					: runtime.i18n.t("documents:editedSince", {
+							date: controller.documentDate(controller.lock.updatedAt),
+						})}
+				{controller.lock.canTakeOver
+					? runtime.i18n.t("documents:lockOptionsWithTakeover")
+					: runtime.i18n.t("documents:lockOptionsReadOnly")}
+			</DialogDescription>
+		</DialogHeader>
+		<DialogFooter>
+			<Link
+				class={buttonVariants({ variant: "ghost" })}
+				to={collectionPath(controller.collectionSlug)}
+			>
+				{runtime.i18n.t("documents:goBack")}
+			</Link>
+			<Button variant="outline" onclick={() => (dismissedLock = lockKey)}>
+				{runtime.i18n.t("documents:viewReadOnly")}
+			</Button>
+			{#if controller.lock.canTakeOver}
+				<Button disabled={controller.lock.operation} onclick={controller.lock.takeOver}>
+					{controller.lock.operation
+						? runtime.i18n.t("documents:takingOver")
+						: runtime.i18n.t("documents:takeOver")}
+				</Button>
+			{/if}
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

package/src/features/documents/document-route-loader.svelte

@@ -1,22 +1,34 @@
 <script lang="ts">
 	import { getAdminI18n } from "@riducms/plugin";
 
+	import { Button } from "@riducms/ui";
+	import { preparedAdminModule } from "@admin/core/bootstrap/admin-route-modules";
+	import { registerAdminScrollPage } from "@admin/core/routing/admin-scroll.svelte";
+
+	registerAdminScrollPage({ ready: () => false });
 	const i18n = getAdminI18n();
-	const route = import("@admin/features/documents/document-route.svelte");
+	const route =
+		preparedAdminModule<typeof import("@admin/features/documents/document-route.svelte")>(
+			"document"
+		) ?? import("@admin/features/documents/document-route.svelte");
+
+	import "@admin/features/documents/document-loading.scss";
 </script>
 
 {#await route}
 	<section
-		class="grid min-h-72 place-items-center"
+		class="ridu-document-module"
+		data-ridu-loading-surface="document-module"
 		aria-busy="true"
 		aria-label={i18n.t("documents:loadingDocument")}
 	>
-		<p class="text-[12px] text-foreground-faint">{i18n.t("documents:loadingDocument")}</p>
+		<p class="ridu-document-module__message">{i18n.t("documents:loadingDocument")}</p>
 	</section>
 {:then { default: DocumentRoute }}
 	<DocumentRoute />
 {:catch}
-	<section class="grid min-h-72 place-items-center" role="alert">
-		<p class="text-[12px] text-destructive">{i18n.t("documents:workspaceLoadFailed")}</p>
+	<section class="ridu-document-module ridu-document-module--error" role="alert">
+		<p class="ridu-document-module__message">{i18n.t("documents:workspaceLoadFailed")}</p>
+		<Button onclick={() => window.location.reload()}>{i18n.t("general:reloadPage")}</Button>
 	</section>
 {/await}