@riducms/admin 0.1.0

package/src/features/auth/create-first-user-controller.svelte.ts

@@ -0,0 +1,220 @@
+import type { SchemaCollection } from "@riducms/protocol";
+import { RiduError } from "@riducms/sdk";
+
+import { FormController, FormValidationError } from "@admin/core/forms/form-controller.svelte";
+import { initialFormValues } from "@admin/core/forms/form-schema";
+import type { NotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+type Navigate = (to: string, options?: { replace?: boolean }) => void;
+
+interface CreateFirstUserControllerOptions {
+	runtime: AdminRuntime;
+	notifications: NotificationCenter;
+	navigate: Navigate;
+}
+
+export class CreateFirstUserController {
+	readonly form: FormController;
+	password = $state("");
+	passwordConfirmation = $state("");
+	pending = $state(false);
+	error = $state<string>();
+	credentialIssue = $state<string>();
+	#request?: AbortController;
+	#generation = 0;
+
+	constructor(readonly options: CreateFirstUserControllerOptions) {
+		this.form = new FormController({}, options.runtime.i18n);
+		this.form.reset(initialFormValues(this.fields));
+		this.form.setAccess(undefined, "create");
+		if (this.collection !== undefined) {
+			this.form.setResource({ collection: this.collection.slug });
+		}
+	}
+
+	get collection(): SchemaCollection | undefined {
+		return this.options.runtime.authCollection;
+	}
+
+	get fields() {
+		return this.collection?.fields ?? [];
+	}
+
+	get passwordHelp() {
+		const minimum = this.collection?.authSettings?.passwordMinLength ?? 8;
+		const maximum = this.collection?.authSettings?.passwordMaxBytes;
+		return maximum === undefined
+			? this.options.runtime.i18n.t("auth:passwordMinimum", {
+					minimum: this.options.runtime.i18n.formatNumber(minimum),
+				})
+			: this.options.runtime.i18n.t("auth:passwordRange", {
+					minimum: this.options.runtime.i18n.formatNumber(minimum),
+					maximum: this.options.runtime.i18n.formatNumber(maximum),
+				});
+	}
+
+	submit = async () => {
+		if (this.pending) return undefined;
+		const collection = this.collection;
+		if (collection === undefined) {
+			this.error = this.options.runtime.i18n.t("auth:configuredCollectionUnavailable");
+			return undefined;
+		}
+		this.credentialIssue = this.#validatePassword(collection);
+		if (this.credentialIssue !== undefined) return "password";
+
+		const generation = ++this.#generation;
+		const request = new AbortController();
+		this.#request?.abort();
+		this.#request = request;
+		this.pending = true;
+		this.error = undefined;
+		let accountCreated = false;
+		try {
+			await this.form.submit(this.fields, true, (values) =>
+				this.options.runtime.client.createAuthUser(collection.slug, values, this.password, {
+					signal: request.signal,
+				})
+			);
+			accountCreated = true;
+			if (!this.#current(generation, request)) return undefined;
+
+			const identity = this.form.get(collection.authSettings?.identityField ?? "email");
+			if (typeof identity !== "string" || identity.trim() === "") {
+				throw new Error(this.options.runtime.i18n.t("auth:firstAccountIdentityUnavailable"));
+			}
+			const session = await this.options.runtime.client.login(
+				collection.slug,
+				{ email: identity, password: this.password },
+				{ signal: request.signal }
+			);
+			if (!this.#current(generation, request)) return undefined;
+			const initialAccessAuthoritative = await this.options.runtime.refreshAccess();
+			if (!this.#current(generation, request)) return undefined;
+			if (
+				initialAccessAuthoritative &&
+				this.options.runtime.collectionOperations[collection.slug]?.admin !== true
+			) {
+				try {
+					await this.options.runtime.client.logout({ signal: request.signal });
+				} catch {
+					// The setup route remains closed even if cookie cleanup fails.
+				}
+				throw new Error(this.options.runtime.i18n.t("auth:firstAccountNoAdminAccess"));
+			}
+
+			this.options.runtime.authBootstrapAvailable = false;
+			this.options.runtime.session = session;
+			await Promise.all([
+				this.options.runtime.loadTheme(),
+				this.options.runtime.loadContentLocale(),
+				this.options.runtime.i18n.loadPreferences(),
+			]);
+			const preferredAccessAuthoritative = await this.options.runtime.refreshAccess(
+				this.options.runtime.contentLocale
+			);
+			if (
+				preferredAccessAuthoritative &&
+				this.options.runtime.collectionOperations[collection.slug]?.admin !== true
+			) {
+				try {
+					await this.options.runtime.client.logout({ signal: request.signal });
+				} catch {
+					// The setup route remains closed even if cookie cleanup fails.
+				}
+				this.options.runtime.session = undefined;
+				throw new Error(this.options.runtime.i18n.t("auth:firstAccountNoAdminAccess"));
+			}
+			if (!this.#current(generation, request)) return undefined;
+			this.options.navigate(adminRoutePatterns.home, { replace: true });
+			return undefined;
+		} catch (cause) {
+			if (!this.#current(generation, request)) return undefined;
+			if (accountCreated) {
+				this.#continueToLogin(
+					this.options.runtime.i18n.t("auth:accountCreated"),
+					cause instanceof Error
+						? this.options.runtime.i18n.t("auth:autoSignInFailed", { message: cause.message })
+						: this.options.runtime.i18n.t("auth:accountReady")
+				);
+				return undefined;
+			}
+			if (cause instanceof FormValidationError) {
+				this.error = cause.message;
+				return this.form.issues[0]?.path;
+			}
+			if (cause instanceof RiduError) {
+				const passwordIssue = cause.issues.find((issue) => issue.path === "password");
+				if (passwordIssue !== undefined) {
+					this.credentialIssue = passwordIssue.message;
+					this.form.issues = this.form.issues.filter((issue) => issue.path !== "password");
+					this.error = this.options.runtime.i18n.t("auth:correctInvalidFields");
+					return "password";
+				}
+			}
+
+			try {
+				const bootstrap = await this.options.runtime.client.authBootstrap(collection.slug, {
+					signal: request.signal,
+				});
+				if (!this.#current(generation, request)) return undefined;
+				if (!bootstrap.available) {
+					this.#continueToLogin(
+						this.options.runtime.i18n.t("auth:setupCompleted"),
+						this.options.runtime.i18n.t("auth:firstAccountExists")
+					);
+					return undefined;
+				}
+			} catch {
+				if (!this.#current(generation, request)) return undefined;
+			}
+			this.error =
+				cause instanceof Error
+					? cause.message
+					: this.options.runtime.i18n.t("auth:firstAccountCreateFailed");
+			return this.form.issues[0]?.path;
+		} finally {
+			if (this.#current(generation, request)) {
+				this.pending = false;
+				this.#request = undefined;
+			}
+		}
+	};
+
+	destroy() {
+		this.#generation += 1;
+		this.#request?.abort();
+		this.#request = undefined;
+	}
+
+	#continueToLogin(title: string, message: string) {
+		this.options.notifications.error({ title, message });
+		this.options.navigate(adminRoutePatterns.login, { replace: true });
+		this.options.runtime.authBootstrapAvailable = false;
+	}
+
+	#current(generation: number, request: AbortController) {
+		return generation === this.#generation && !request.signal.aborted;
+	}
+
+	#validatePassword(collection: SchemaCollection) {
+		const settings = collection.authSettings;
+		if (this.password === "") return this.options.runtime.i18n.t("auth:enterPassword");
+		if (Array.from(this.password).length < (settings?.passwordMinLength ?? 8)) {
+			return this.options.runtime.i18n.t("auth:passwordTooShort", {
+				minimum: this.options.runtime.i18n.formatNumber(settings?.passwordMinLength ?? 8),
+			});
+		}
+		if (new TextEncoder().encode(this.password).length > (settings?.passwordMaxBytes ?? 72)) {
+			return this.options.runtime.i18n.t("auth:passwordTooLong", {
+				maximum: this.options.runtime.i18n.formatNumber(settings?.passwordMaxBytes ?? 72),
+			});
+		}
+		if (this.password !== this.passwordConfirmation) {
+			return this.options.runtime.i18n.t("auth:passwordMismatch");
+		}
+		return undefined;
+	}
+}

package/src/features/auth/create-first-user-route.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { useNavigate } from "@hvniel/svelte-router";
+	import EyeIcon from "~icons/lucide/eye";
+	import EyeOffIcon from "~icons/lucide/eye-off";
+	import { tick } from "svelte";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthBrand from "@admin/features/auth/auth-brand.svelte";
+	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
+	import { CreateFirstUserController } from "@admin/features/auth/create-first-user-controller.svelte";
+	import FieldLayout from "@admin/fields/field-layout.svelte";
+
+	const runtime = getAdminRuntime();
+	const notifications = getNotificationCenter();
+	const navigate = useNavigate();
+	const controller = new CreateFirstUserController({ runtime, notifications, navigate });
+	const { form, fields } = $derived(controller);
+	const applicationName = $derived(
+		runtime.manifest?.application.name ?? runtime.i18n.t("general:riduApplication")
+	);
+	let passwordVisible = $state(false);
+	let confirmationVisible = $state(false);
+
+	$effect(() => () => controller.destroy());
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		const issuePath = await controller.submit();
+		if (issuePath === undefined) return;
+		await tick();
+		focusIssue(issuePath);
+	}
+
+	function focusIssue(path: string) {
+		if (path === "password") {
+			document.getElementById("ridu-first-user-password")?.focus();
+			return;
+		}
+		const segments = path.split(".");
+		while (segments.length > 0) {
+			const candidate = segments.join(".");
+			const container = document.querySelector<HTMLElement>(
+				`[data-field-path="${CSS.escape(candidate)}"]`
+			);
+			if (container !== null) {
+				container.scrollIntoView({ behavior: "smooth", block: "center" });
+				container
+					.querySelector<HTMLElement>("input, textarea, button, [tabindex]:not([tabindex='-1'])")
+					?.focus({ preventScroll: true });
+				return;
+			}
+			segments.pop();
+		}
+	}
+</script>
+
+{#snippet brand()}
+	<AuthBrand />
+{/snippet}
+
+<AuthFrame {brand} wide>
+	<header class="grid gap-2">
+		<h1 class="text-[28px] leading-tight font-semibold tracking-[-0.015em] text-foreground">
+			{runtime.i18n.t("auth:welcome", { application: applicationName })}
+		</h1>
+		<p class="max-w-[590px] text-[13.5px] leading-5.5 text-foreground-muted">
+			{runtime.i18n.t("auth:firstUserDescription")}
+		</p>
+	</header>
+
+	<form class="mt-8 grid gap-7" onsubmit={handleSubmit}>
+		<fieldset class="contents" disabled={controller.pending}>
+			<FieldLayout {fields} {form} />
+
+			<fieldset class="grid gap-4 rounded-[4px] border border-control-border bg-control p-4.5">
+				<legend class="px-1 text-[13px] font-semibold text-foreground">
+					{runtime.i18n.t("auth:credentials")}
+				</legend>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<div class="grid gap-2">
+						<label class="ridu-field-label" for="ridu-first-user-password">
+							{runtime.i18n.t("auth:password")}
+							<span class="ridu-field-required" aria-hidden="true">*</span>
+						</label>
+						<span class="relative block">
+							<Input
+								id="ridu-first-user-password"
+								class="pe-11"
+								type={passwordVisible ? "text" : "password"}
+								autocomplete="new-password"
+								required
+								aria-invalid={controller.credentialIssue !== undefined}
+								aria-describedby="ridu-first-user-password-help"
+								bind:value={controller.password}
+								oninput={() => (controller.credentialIssue = undefined)}
+							/>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								class="absolute top-1/2 end-2.5 -translate-y-1/2"
+								onclick={() => (passwordVisible = !passwordVisible)}
+								aria-label={passwordVisible
+									? runtime.i18n.t("auth:hidePassword")
+									: runtime.i18n.t("auth:showPassword")}
+							>
+								{#if passwordVisible}
+									<EyeOffIcon class="size-3.5" />
+								{:else}
+									<EyeIcon class="size-3.5" />
+								{/if}
+							</Button>
+						</span>
+					</div>
+
+					<div class="grid gap-2">
+						<label class="ridu-field-label" for="ridu-first-user-password-confirmation">
+							{runtime.i18n.t("auth:confirmPassword")}
+							<span class="ridu-field-required" aria-hidden="true">*</span>
+						</label>
+						<span class="relative block">
+							<Input
+								id="ridu-first-user-password-confirmation"
+								class="pe-11"
+								type={confirmationVisible ? "text" : "password"}
+								autocomplete="new-password"
+								required
+								aria-invalid={controller.credentialIssue !== undefined}
+								aria-describedby="ridu-first-user-password-help"
+								bind:value={controller.passwordConfirmation}
+								oninput={() => (controller.credentialIssue = undefined)}
+							/>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								class="absolute top-1/2 end-2.5 -translate-y-1/2"
+								onclick={() => (confirmationVisible = !confirmationVisible)}
+								aria-label={confirmationVisible
+									? runtime.i18n.t("auth:hidePasswordConfirmation")
+									: runtime.i18n.t("auth:showPasswordConfirmation")}
+							>
+								{#if confirmationVisible}
+									<EyeOffIcon class="size-3.5" />
+								{:else}
+									<EyeIcon class="size-3.5" />
+								{/if}
+							</Button>
+						</span>
+					</div>
+				</div>
+				<p
+					id="ridu-first-user-password-help"
+					class={controller.credentialIssue === undefined ? "ridu-field-help" : "ridu-field-error"}
+					role={controller.credentialIssue === undefined ? undefined : "alert"}
+				>
+					{controller.credentialIssue ?? controller.passwordHelp}
+				</p>
+			</fieldset>
+		</fieldset>
+
+		{#if controller.error !== undefined}
+			<Banner tone="destructive">{controller.error}</Banner>
+		{/if}
+
+		<Button class="h-10 w-full" type="submit" size="lg" disabled={controller.pending}>
+			{controller.pending
+				? runtime.i18n.t("auth:creatingAccount")
+				: runtime.i18n.t("auth:createAccount")}
+		</Button>
+	</form>
+</AuthFrame>

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

@@ -0,0 +1,78 @@
+<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.requestPasswordReset(authCollection.slug, email);
+			sent = true;
+		} catch (cause) {
+			error =
+				cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:resetRequestFailed");
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AuthFrame>
+	{#if sent}
+		<div class="grid gap-5">
+			<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+				{runtime.i18n.t("auth:emailSent")}
+			</h1>
+			<p class="max-w-112 text-[13.5px] leading-5.5 text-foreground-muted">
+				{runtime.i18n.t("auth:passwordResetSent")}
+			</p>
+			<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>
+		</div>
+	{:else}
+		<form class="grid gap-5" onsubmit={submit}>
+			<div>
+				<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+					{runtime.i18n.t("auth:forgotPassword")}
+				</h1>
+				<p class="mt-2 text-[13.5px] leading-5.5 text-foreground-muted">
+					{runtime.i18n.t("auth:forgotPasswordDescription")}
+				</p>
+			</div>
+			<label class="grid gap-2" for="reset-email">
+				<span class="ridu-field-label">{runtime.i18n.t("auth:email")}</span>
+				<Input id="reset-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:sendResetLink")}
+			</Button>
+			<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>
+		</form>
+	{/if}
+</AuthFrame>

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

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { Link, useLocation } from "@hvniel/svelte-router";
+	import { RiduError } from "@riducms/sdk";
+	import EyeIcon from "~icons/lucide/eye";
+	import EyeOffIcon from "~icons/lucide/eye-off";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import { adminRedirectFromSearch, adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthBrand from "@admin/features/auth/auth-brand.svelte";
+	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
+
+	const runtime = getAdminRuntime();
+	const notifications = getNotificationCenter();
+	const location = $derived(useLocation());
+	const postLoginPath = $derived(adminRedirectFromSearch(location.search));
+	let email = $state("");
+	let password = $state("");
+	let passwordVisible = $state(false);
+	let pending = $state(false);
+	let error = $state<string>();
+	const authCollection = $derived(runtime.authCollection);
+	const replacement = $derived(
+		runtime.loginComponents.find((component) => component.position === "replace")
+	);
+	const loginLogo = $derived(
+		runtime.brandComponents.find((component) => component.surface === "loginLogo")
+	);
+	const beforeComponents = $derived(
+		runtime.loginComponents.filter((component) => component.position === "before")
+	);
+	const afterComponents = $derived(
+		runtime.loginComponents.filter(
+			(component) => component.position === undefined || component.position === "after"
+		)
+	);
+	const host = {
+		login: signIn,
+		notify: (tone: "success" | "error", title: string, message?: string) =>
+			notifications[tone]({ title, message }),
+	};
+
+	async function signIn(credentials: { email: string; password: string }) {
+		if (authCollection === undefined) {
+			throw new Error(runtime.i18n.t("auth:configuredCollectionUnavailable"));
+		}
+		const session = await runtime.client.login(authCollection.slug, credentials);
+		const destinationLocale = runtime.contentLocaleForPath(postLoginPath);
+		const destinationAccessAuthoritative = await runtime.refreshAccess(
+			destinationLocale ?? runtime.contentLocale
+		);
+		if (
+			destinationAccessAuthoritative &&
+			runtime.collectionOperations[authCollection.slug]?.admin !== true
+		) {
+			try {
+				await runtime.client.logout();
+			} catch {
+				// The shell remains denied even if server cleanup fails.
+			}
+			throw new Error(runtime.i18n.t("auth:adminAccessDenied"));
+		}
+		// Keep this route mounted until access and the destination are ready.
+		// Assigning the session before the await swaps the route tree and leaves
+		// this component's navigate function inactive.
+		runtime.session = session;
+		await Promise.all([
+			runtime.loadTheme(),
+			runtime.loadContentLocale(destinationLocale),
+			runtime.i18n.loadPreferences(),
+		]);
+		const preferredAccessAuthoritative = await runtime.refreshAccess(runtime.contentLocale);
+		if (
+			preferredAccessAuthoritative &&
+			runtime.collectionOperations[authCollection.slug]?.admin !== true
+		) {
+			try {
+				await runtime.client.logout();
+			} catch {
+				// The shell remains denied even if server cleanup fails.
+			}
+			runtime.session = undefined;
+			throw new Error(runtime.i18n.t("auth:adminAccessDenied"));
+		}
+		// Assigning the authenticated session swaps this route for the authenticated
+		// route tree. Its /login route owns the deferred redirect so this component
+		// never reads route-owned derived state after it has been destroyed.
+	}
+
+	async function login() {
+		pending = true;
+		error = undefined;
+		try {
+			await signIn({ email, password });
+		} catch (cause) {
+			error =
+				cause instanceof RiduError || cause instanceof Error
+					? cause.message
+					: runtime.i18n.t("auth:loginFailed");
+		} finally {
+			pending = false;
+		}
+	}
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		await login();
+	}
+</script>
+
+{#snippet brand()}
+	{#if loginLogo !== undefined && runtime.manifest !== undefined}
+		<loginLogo.component
+			manifest={runtime.manifest}
+			user={runtime.session?.user}
+			surface="loginLogo"
+			i18n={runtime.i18n}
+		/>
+	{:else}
+		<AuthBrand />
+	{/if}
+{/snippet}
+
+{#snippet defaultView()}
+	<AuthFrame {brand}>
+		{#if runtime.manifest !== undefined}
+			{#each beforeComponents as component (component.key)}
+				<component.component manifest={runtime.manifest} {defaultView} {host} i18n={runtime.i18n} />
+			{/each}
+		{/if}
+
+		<form class="grid gap-5" onsubmit={handleSubmit}>
+			<h1 class="sr-only">{runtime.i18n.t("auth:login")}</h1>
+
+			<label class="grid gap-2" for="ridu-login-email">
+				<span class="ridu-field-label text-foreground-body">{runtime.i18n.t("auth:email")}</span>
+				<Input
+					id="ridu-login-email"
+					type="email"
+					bind:value={email}
+					autocomplete="email"
+					placeholder={runtime.i18n.t("auth:emailPlaceholder")}
+					required
+				/>
+			</label>
+
+			<div class="grid gap-2">
+				<label class="ridu-field-label text-foreground-body" for="ridu-login-password">
+					{runtime.i18n.t("auth:password")}
+				</label>
+				<span class="relative block">
+					<Input
+						id="ridu-login-password"
+						class="pe-11"
+						type={passwordVisible ? "text" : "password"}
+						bind:value={password}
+						autocomplete="current-password"
+						placeholder={runtime.i18n.t("auth:passwordPlaceholder")}
+						required
+					/>
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						class="absolute top-1/2 end-2.5 -translate-y-1/2"
+						onclick={() => (passwordVisible = !passwordVisible)}
+						aria-label={passwordVisible
+							? runtime.i18n.t("auth:hidePassword")
+							: runtime.i18n.t("auth:showPassword")}
+					>
+						{#if passwordVisible}
+							<EyeOffIcon class="size-3.5" />
+						{:else}
+							<EyeIcon class="size-3.5" />
+						{/if}
+					</Button>
+				</span>
+				{#if authCollection?.authSettings?.passwordReset}
+					<Link
+						class="w-fit text-[12px] text-foreground underline underline-offset-2 hover:text-foreground-muted"
+						to={adminRoutePatterns.forgotPassword}
+					>
+						{runtime.i18n.t("auth:forgotPassword")}
+					</Link>
+				{/if}
+			</div>
+
+			{#if error !== undefined}
+				<Banner tone="destructive">
+					<span class="size-2 shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
+					{error}
+				</Banner>
+			{/if}
+
+			<Button class="mt-1 h-10 w-full" type="submit" size="lg" disabled={pending}>
+				{pending ? runtime.i18n.t("auth:signingIn") : runtime.i18n.t("auth:login")}
+			</Button>
+			{#if authCollection?.authSettings?.verifyEmail}
+				<Link
+					class="text-center text-[11.5px] text-foreground-muted hover:text-primary"
+					to={adminRoutePatterns.requestVerification}
+				>
+					{runtime.i18n.t("auth:requestVerification")}
+				</Link>
+			{/if}
+		</form>
+		{#if runtime.manifest !== undefined}
+			{#each afterComponents as component (component.key)}
+				<component.component manifest={runtime.manifest} {defaultView} {host} i18n={runtime.i18n} />
+			{/each}
+		{/if}
+	</AuthFrame>
+{/snippet}
+
+{#if runtime.manifest !== undefined && replacement !== undefined}
+	<replacement.component manifest={runtime.manifest} {defaultView} {host} i18n={runtime.i18n} />
+{:else}
+	{@render defaultView()}
+{/if}