@riducms/admin 0.1.0

package/src/features/auth/request-verification-route.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import { RiduError } from "@riducms/sdk";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
+
+	const runtime = getAdminRuntime();
+	const authCollection = $derived(runtime.authCollection);
+	let email = $state("");
+	let pending = $state(false);
+	let sent = $state(false);
+	let error = $state<string>();
+
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		if (authCollection === undefined) return;
+		pending = true;
+		error = undefined;
+		try {
+			await runtime.client.requestVerification(authCollection.slug, email);
+			sent = true;
+		} catch (cause) {
+			error =
+				cause instanceof RiduError
+					? cause.message
+					: runtime.i18n.t("auth:verificationRequestFailed");
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AuthFrame>
+	<div class="grid gap-5">
+		<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+			{runtime.i18n.t("auth:verifyYourEmail")}
+		</h1>
+		{#if sent}
+			<Banner>{runtime.i18n.t("auth:verificationSent")}</Banner>
+			<Link
+				class="w-fit text-[12.5px] text-foreground underline underline-offset-2 hover:text-foreground-muted"
+				to={adminRoutePatterns.login}
+			>
+				{runtime.i18n.t("auth:backToLogin")}
+			</Link>
+		{:else}
+			<form class="grid gap-4" onsubmit={submit}>
+				<p class="text-[13px] leading-5 text-foreground-muted">
+					{runtime.i18n.t("auth:verificationDescription")}
+				</p>
+				<label class="grid gap-2" for="verification-email">
+					<span class="ridu-field-label">{runtime.i18n.t("auth:email")}</span>
+					<Input
+						id="verification-email"
+						type="email"
+						autocomplete="email"
+						bind:value={email}
+						required
+					/>
+				</label>
+				{#if error !== undefined}<Banner tone="destructive">{error}</Banner>{/if}
+				<Button class="h-10 w-full" type="submit" size="lg" disabled={pending}>
+					{pending ? runtime.i18n.t("auth:sending") : runtime.i18n.t("auth:sendVerificationLink")}
+				</Button>
+			</form>
+		{/if}
+	</div>
+</AuthFrame>

package/src/features/auth/reset-password-route.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { Link, useLocation } from "@hvniel/svelte-router";
+	import { RiduError } from "@riducms/sdk";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
+
+	const runtime = getAdminRuntime();
+	const location = $derived(useLocation());
+	const token = $derived(new URLSearchParams(location.search).get("token") ?? "");
+	const authCollection = $derived(runtime.authCollection);
+	let password = $state("");
+	let confirmation = $state("");
+	let pending = $state(false);
+	let complete = $state(false);
+	let error = $state<string>();
+
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		if (authCollection === undefined || token === "") return;
+		if (password !== confirmation) {
+			error = runtime.i18n.t("auth:passwordMismatch");
+			return;
+		}
+		pending = true;
+		error = undefined;
+		try {
+			await runtime.client.resetPassword(authCollection.slug, token, password);
+			complete = true;
+			password = "";
+			confirmation = "";
+		} catch (cause) {
+			error =
+				cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:passwordResetFailed");
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AuthFrame>
+	<div class="grid gap-5">
+		<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+			{runtime.i18n.t("auth:chooseNewPassword")}
+		</h1>
+		{const terminalState = $derived(
+			complete
+				? {
+						message: runtime.i18n.t("auth:passwordResetSuccess"),
+						to: adminRoutePatterns.login,
+						action: runtime.i18n.t("auth:backToLogin"),
+					}
+				: token === ""
+					? {
+							message: runtime.i18n.t("auth:missingResetToken"),
+							tone: "destructive" as const,
+							to: adminRoutePatterns.forgotPassword,
+							action: runtime.i18n.t("auth:requestAnotherLink"),
+						}
+					: undefined
+		)}
+
+		{#if terminalState !== undefined}
+			<Banner tone={terminalState.tone}>{terminalState.message}</Banner>
+			<Link
+				class="w-fit text-[12.5px] text-foreground underline underline-offset-2 hover:text-foreground-muted"
+				to={terminalState.to}
+			>
+				{terminalState.action}
+			</Link>
+		{:else}
+			<form class="grid gap-4" onsubmit={submit}>
+				<label class="grid gap-2" for="reset-password">
+					<span class="ridu-field-label">{runtime.i18n.t("account:newPassword")}</span>
+					<Input
+						id="reset-password"
+						type="password"
+						autocomplete="new-password"
+						minlength={authCollection?.authSettings?.passwordMinLength ?? 8}
+						bind:value={password}
+						required
+					/>
+				</label>
+				<label class="grid gap-2" for="reset-confirm">
+					<span class="ridu-field-label">{runtime.i18n.t("auth:confirmPassword")}</span>
+					<Input
+						id="reset-confirm"
+						type="password"
+						autocomplete="new-password"
+						bind:value={confirmation}
+						required
+					/>
+				</label>
+				{#if error !== undefined}<Banner tone="destructive">{error}</Banner>{/if}
+				<Button class="h-10 w-full" type="submit" size="lg" disabled={pending}>
+					{pending
+						? runtime.i18n.t("auth:resettingPassword")
+						: runtime.i18n.t("auth:resetPassword")}
+				</Button>
+			</form>
+		{/if}
+	</div>
+</AuthFrame>

package/src/features/auth/verify-email-route.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Link, useLocation } from "@hvniel/svelte-router";
+	import { RiduError } from "@riducms/sdk";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
+
+	const runtime = getAdminRuntime();
+	const location = $derived(useLocation());
+	const token = $derived(new URLSearchParams(location.search).get("token") ?? "");
+	const authCollection = $derived(runtime.authCollection);
+	let pending = $state(false);
+	let complete = $state(false);
+	let error = $state<string>();
+
+	async function verify() {
+		if (authCollection === undefined || token === "") return;
+		pending = true;
+		error = undefined;
+		try {
+			await runtime.client.verifyEmail(authCollection.slug, token);
+			complete = true;
+		} catch (cause) {
+			error =
+				cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:emailVerificationFailed");
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AuthFrame>
+	<div class="grid gap-5">
+		<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+			{runtime.i18n.t("auth:verifyYourEmail")}
+		</h1>
+		{#if complete}
+			<Banner>{runtime.i18n.t("auth:emailVerified")}</Banner>
+			<Link
+				class="w-fit text-[12.5px] text-foreground underline underline-offset-2 hover:text-foreground-muted"
+				to={adminRoutePatterns.login}
+			>
+				{runtime.i18n.t("auth:backToLogin")}
+			</Link>
+		{:else if token === ""}
+			<Banner tone="destructive">{runtime.i18n.t("auth:missingVerificationToken")}</Banner>
+		{:else}
+			<p class="text-[13.5px] leading-5.5 text-foreground-muted">
+				{runtime.i18n.t("auth:verifyDescription")}
+			</p>
+			{#if error !== undefined}<Banner tone="destructive">{error}</Banner>{/if}
+			<Button class="h-10 w-full" size="lg" onclick={verify} disabled={pending}>
+				{pending ? runtime.i18n.t("auth:verifying") : runtime.i18n.t("auth:verifyEmail")}
+			</Button>
+		{/if}
+	</div>
+</AuthFrame>

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

@@ -0,0 +1,143 @@
+<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

@@ -0,0 +1,157 @@
+<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 selectedChoiceLabel = $derived(
+		field?.select?.choices.find((choice) => choice.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}>
+								{selectedChoiceLabel}
+							</span>
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="" label={runtime.i18n.t("collections:clearValue")} />
+							{#each field.select?.choices ?? [] as choice (choice.value)}
+								<SelectItem value={choice.value} label={choice.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?.pickerAppearance}
+						{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>