@riducms/admin 0.2.2 → 0.3.0

package/src/features/auth/auth-frame.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import "@admin/features/auth/auth.scss";
 
-	let {
-		brand,
-		children,
-		wide = false,
-	}: { brand?: Snippet; children: Snippet; wide?: boolean } = $props();
+	let { brand, children }: { brand?: Snippet; children: Snippet } = $props();
 </script>
 
-<main class="grid min-h-screen place-items-center bg-background px-5 py-12 sm:px-8">
-	<section class={["w-full", wide ? "max-w-180" : "max-w-120"]}>
+<main class="ridu-auth">
+	<section class="ridu-auth__content">
 		{#if brand !== undefined}
-			<header class="mb-10 flex items-center">{@render brand()}</header>
+			<header class="ridu-auth__brand">{@render brand()}</header>
 		{/if}
 		{@render children()}
 	</section>

package/src/features/auth/auth.scss

@@ -0,0 +1,122 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-auth {
+		--auth-width: 480px;
+		--auth-padding-block: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 100svh;
+		padding: var(--auth-padding-block) var(--space-base);
+		background: var(--background);
+		color: var(--foreground);
+		font-family: var(--font-sans);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-auth__content {
+		width: 100%;
+		max-width: var(--auth-width);
+		min-width: 0;
+	}
+	.ridu-auth__brand {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		margin-block-end: calc(var(--space-base) * 2);
+	}
+	.ridu-auth__logo {
+		display: inline-flex;
+		color: var(--foreground);
+	}
+	.ridu-auth__logo-mark {
+		height: 40px;
+	}
+	.ridu-auth__heading {
+		margin: 0;
+		font-size: 32px;
+		font-weight: 500;
+		line-height: 36px;
+		letter-spacing: normal;
+	}
+	.ridu-auth__description {
+		margin: 0;
+	}
+	.ridu-auth__header,
+	.ridu-auth__stack,
+	.ridu-auth__form,
+	.ridu-auth__fields {
+		display: grid;
+		gap: var(--space-base);
+		min-width: 0;
+	}
+	.ridu-auth__header {
+		gap: 8px;
+	}
+	.ridu-auth__fields {
+		margin-block-end: 5px;
+	}
+	.ridu-auth__field {
+		display: grid;
+		gap: 5px;
+		min-width: 0;
+	}
+	.ridu-auth__link {
+		width: fit-content;
+		text-decoration: underline;
+
+		&:focus {
+			outline: none;
+			&:not(:focus-visible) {
+				opacity: 0.8;
+			}
+		}
+
+		&:active {
+			opacity: 0.7;
+		}
+	}
+	.ridu-auth__submit {
+		width: 100%;
+		margin-block: 4px 24px;
+	}
+	.ridu-auth__secondary-link {
+		justify-self: center;
+		color: var(--foreground-muted);
+	}
+	.ridu-auth__credentials {
+		display: grid;
+		gap: var(--space-base);
+		border: 0;
+		padding: 0;
+		margin: 0;
+		min-width: 0;
+	}
+	.ridu-auth__fieldset {
+		display: contents;
+	}
+	.ridu-auth__sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+	@media (max-width: ui.$medium) {
+		.ridu-auth {
+			--font-size-body: 12px;
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-auth__heading {
+			font-size: 25px;
+			letter-spacing: -0.5px;
+		}
+	}
+}

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

@@ -3,16 +3,11 @@ 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 {
@@ -21,7 +16,7 @@ export class CreateFirstUserController {
 	passwordConfirmation = $state("");
 	pending = $state(false);
 	error = $state<string>();
-	credentialIssue = $state<string>();
+	credentialIssue = $state<{ path: "password" | "passwordConfirmation"; message: string }>();
 	#request?: AbortController;
 	#generation = 0;
 
@@ -62,8 +57,16 @@ export class CreateFirstUserController {
 			this.error = this.options.runtime.i18n.t("auth:configuredCollectionUnavailable");
 			return undefined;
 		}
-		this.credentialIssue = this.#validatePassword(collection);
-		if (this.credentialIssue !== undefined) return "password";
+		const passwordMessage = this.#validatePassword(collection);
+		this.credentialIssue =
+			passwordMessage === undefined ? undefined : { path: "password", message: passwordMessage };
+		if (this.credentialIssue === undefined && this.password !== this.passwordConfirmation) {
+			this.credentialIssue = {
+				path: "passwordConfirmation",
+				message: this.options.runtime.i18n.t("auth:passwordMismatch"),
+			};
+		}
+		if (this.credentialIssue !== undefined) return this.credentialIssue.path;
 
 		const generation = ++this.#generation;
 		const request = new AbortController();
@@ -85,7 +88,7 @@ export class CreateFirstUserController {
 			if (typeof identity !== "string" || identity.trim() === "") {
 				throw new Error(this.options.runtime.i18n.t("auth:firstAccountIdentityUnavailable"));
 			}
-			const session = await this.options.runtime.client.login(
+			await this.options.runtime.client.login(
 				collection.slug,
 				{ email: identity, password: this.password },
 				{ signal: request.signal }
@@ -102,43 +105,17 @@ export class CreateFirstUserController {
 				} catch {
 					// The setup route remains closed even if cookie cleanup fails.
 				}
-				throw new Error(this.options.runtime.i18n.t("auth:firstAccountNoAdminAccess"));
+				if (!this.#current(generation, request)) return undefined;
+				await this.#continueToLogin("denied");
 			}
 
-			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 });
+			await this.options.runtime.hardNavigate(adminRoutePatterns.home);
 			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")
-				);
+				await this.#continueToLogin("created");
 				return undefined;
 			}
 			if (cause instanceof FormValidationError) {
@@ -148,7 +125,7 @@ export class CreateFirstUserController {
 			if (cause instanceof RiduError) {
 				const passwordIssue = cause.issues.find((issue) => issue.path === "password");
 				if (passwordIssue !== undefined) {
-					this.credentialIssue = passwordIssue.message;
+					this.credentialIssue = { path: "password", message: passwordIssue.message };
 					this.form.issues = this.form.issues.filter((issue) => issue.path !== "password");
 					this.error = this.options.runtime.i18n.t("auth:correctInvalidFields");
 					return "password";
@@ -161,10 +138,7 @@ export class CreateFirstUserController {
 				});
 				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")
-					);
+					await this.#continueToLogin("completed");
 					return undefined;
 				}
 			} catch {
@@ -189,10 +163,8 @@ export class CreateFirstUserController {
 		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;
+	async #continueToLogin(notice: "created" | "completed" | "denied") {
+		await this.options.runtime.hardNavigate(`${adminRoutePatterns.login}?setup=${notice}`);
 	}
 
 	#current(generation: number, request: AbortController) {
@@ -212,9 +184,6 @@ export class CreateFirstUserController {
 				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

@@ -1,29 +1,22 @@
 <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 { adminApplicationName } from "@admin/app-meta";
 	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 { Button } from "@riducms/ui";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-	import AuthBrand from "@admin/features/auth/auth-brand.svelte";
+	import AuthField from "@admin/features/auth/auth-field.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 controller = new CreateFirstUserController({ runtime });
+
 	const { form, fields } = $derived(controller);
 	const applicationName = $derived(
-		runtime.manifest?.application.name ?? runtime.i18n.t("general:riduApplication")
+		adminApplicationName(runtime.manifest, runtime.i18n, runtime.i18n.t("general:riduApplication"))
 	);
-	let passwordVisible = $state(false);
-	let confirmationVisible = $state(false);
 
 	$effect(() => () => controller.destroy());
 
@@ -31,16 +24,23 @@
 		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();
+		if (path === "password" || path === "passwordConfirmation") {
+			document
+				.getElementById(
+					path === "password" ? "ridu-first-user-password" : "ridu-first-user-password-confirmation"
+				)
+				?.focus();
 			return;
 		}
+
 		const segments = path.split(".");
+
 		while (segments.length > 0) {
 			const candidate = segments.join(".");
 			const container = document.querySelector<HTMLElement>(
@@ -53,122 +53,83 @@
 					?.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>
+<AuthFrame>
+	<div class="ridu-auth__stack">
+		<header class="ridu-auth__header">
+			<h1 class="ridu-auth__heading">
+				{runtime.i18n.t("auth:welcome", { application: applicationName })}
+			</h1>
+			<p class="ridu-auth__description">
+				{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>
+		<form class="ridu-auth__form" onsubmit={handleSubmit} novalidate>
+			<fieldset
+				class="ridu-auth__fieldset"
+				disabled={controller.pending}
+				aria-busy={controller.pending}
+			>
+				<FieldLayout {fields} {form} />
 
-					<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>
+				<fieldset class="ridu-auth__credentials">
+					<legend class="ridu-auth__sr-only">
+						{runtime.i18n.t("auth:credentials")}
+					</legend>
+					<div class="ridu-auth__fields">
+						<AuthField
+							id="ridu-first-user-password"
+							label={runtime.i18n.t("auth:password")}
+							type="password"
+							autocomplete="new-password"
+							bind:value={controller.password}
+							description={controller.passwordHelp}
+							errors={controller.credentialIssue?.path === "password"
+								? [controller.credentialIssue.message]
+								: []}
+							oninput={() => (controller.credentialIssue = undefined)}
+						/>
+						<AuthField
+							id="ridu-first-user-password-confirmation"
+							label={runtime.i18n.t("auth:confirmPassword")}
+							type="password"
+							autocomplete="new-password"
+							bind:value={controller.passwordConfirmation}
+							errors={controller.credentialIssue?.path === "passwordConfirmation"
+								? [controller.credentialIssue.message]
+								: []}
+							oninput={() => {
+								if (controller.credentialIssue?.path === "passwordConfirmation")
+									controller.credentialIssue = undefined;
+							}}
+							showLabel={runtime.i18n.t("auth:showPasswordConfirmation")}
+							hideLabel={runtime.i18n.t("auth:hidePasswordConfirmation")}
+						/>
 					</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>
-		</fieldset>
 
-		{#if controller.error !== undefined}
-			<Banner tone="destructive">{controller.error}</Banner>
-		{/if}
+			{#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>
+			<Button
+				class="ridu-auth__submit"
+				type="submit"
+				size="lg"
+				disabled={controller.pending}
+				aria-busy={controller.pending}
+			>
+				{controller.pending
+					? runtime.i18n.t("auth:creatingAccount")
+					: runtime.i18n.t("auth:createAccount")}
+			</Button>
+		</form>
+	</div>
 </AuthFrame>

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

@@ -3,14 +3,15 @@
 	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 { Button } from "@riducms/ui";
 	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AuthField from "@admin/features/auth/auth-field.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);
@@ -19,8 +20,10 @@
 	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;
@@ -35,42 +38,47 @@
 
 <AuthFrame>
 	{#if sent}
-		<div class="grid gap-5">
-			<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+		<div class="ridu-auth__stack">
+			<h1 class="ridu-auth__heading">
 				{runtime.i18n.t("auth:emailSent")}
 			</h1>
-			<p class="max-w-112 text-[13.5px] leading-5.5 text-foreground-muted">
+			<p class="ridu-auth__description">
 				{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}
-			>
+			<Link class="ridu-auth__link" 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">
+		<form class="ridu-auth__form" onsubmit={submit}>
+			<div class="ridu-auth__header">
+				<h1 class="ridu-auth__heading">
 					{runtime.i18n.t("auth:forgotPassword")}
 				</h1>
-				<p class="mt-2 text-[13.5px] leading-5.5 text-foreground-muted">
+				<p class="ridu-auth__description">
 					{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}>
+			<AuthField
+				disabled={pending}
+				id="reset-email"
+				label={runtime.i18n.t("auth:email")}
+				autocomplete="email"
+				bind:value={email}
+			/>
+			{#if error !== undefined}
+				<Banner tone="destructive">{error}</Banner>
+			{/if}
+			<Button
+				class="ridu-auth__submit"
+				type="submit"
+				size="lg"
+				disabled={pending}
+				aria-busy={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}
-			>
+			<Link class="ridu-auth__link" to={adminRoutePatterns.login}>
 				{runtime.i18n.t("auth:backToLogin")}
 			</Link>
 		</form>