@riducms/admin 0.2.2 → 0.3.0

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

@@ -1,42 +1,44 @@
 <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 { Button } from "@riducms/ui";
 	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 AuthField from "@admin/features/auth/auth-field.svelte";
 	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
 
 	const runtime = getAdminRuntime();
+	const extensions = runtime.config.extensions;
 	const notifications = getNotificationCenter();
-	const location = $derived(useLocation());
-	const postLoginPath = $derived(adminRedirectFromSearch(location.search));
+	const location = useLocation();
+
+	const postLoginPath = $derived(adminRedirectFromSearch(location.current.search));
+	const setupNotice = $derived(new URLSearchParams(location.current.search).get("setup"));
+	const setupMessage = $derived(
+		setupNotice === "created"
+			? "auth:accountReady"
+			: setupNotice === "completed"
+				? "auth:firstAccountExists"
+				: setupNotice === "denied"
+					? "auth:firstAccountNoAdminAccess"
+					: undefined
+	);
+
 	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 replacement = extensions.login.find((component) => component.position === "replace");
+	const loginLogo = extensions.branding.find((component) => component.surface === "loginLogo");
+	const beforeComponents = extensions.login.filter((component) => component.position === "before");
+	const afterComponents = extensions.login.filter(
+		(component) => component.position === undefined || component.position === "after"
 	);
+
 	const host = {
 		login: signIn,
 		notify: (tone: "success" | "error", title: string, message?: string) =>
@@ -47,7 +49,8 @@
 		if (authCollection === undefined) {
 			throw new Error(runtime.i18n.t("auth:configuredCollectionUnavailable"));
 		}
-		const session = await runtime.client.login(authCollection.slug, credentials);
+
+		await runtime.client.login(authCollection.slug, credentials);
 		const destinationLocale = runtime.contentLocaleForPath(postLoginPath);
 		const destinationAccessAuthoritative = await runtime.refreshAccess(
 			destinationLocale ?? runtime.contentLocale
@@ -63,52 +66,23 @@
 			}
 			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.
+
+		await runtime.hardNavigate(postLoginPath);
 	}
 
-	async function login() {
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
 		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");
+			const message = cause instanceof Error ? cause.message : runtime.i18n.t("auth:loginFailed");
+			notifications.error({ title: message });
 		} finally {
 			pending = false;
 		}
 	}
-
-	async function handleSubmit(event: SubmitEvent) {
-		event.preventDefault();
-		await login();
-	}
 </script>
 
 {#snippet brand()}
@@ -132,74 +106,52 @@
 			{/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
+		<form class="ridu-auth__form" onsubmit={handleSubmit}>
+			<h1 class="ridu-auth__sr-only">{runtime.i18n.t("auth:login")}</h1>
+
+			{#if setupMessage !== undefined}
+				<Banner tone={setupNotice === "denied" ? "destructive" : "neutral"}>
+					{runtime.i18n.t(setupMessage)}
+				</Banner>
+			{/if}
+
+			<AuthField
+				disabled={pending}
+				id="ridu-login-email"
+				label={runtime.i18n.t("auth:email")}
+				autocomplete="email"
+				bind:value={email}
+			/>
+
+			<div class="ridu-auth__field">
+				<AuthField
+					disabled={pending}
+					id="ridu-login-password"
+					label={runtime.i18n.t("auth:password")}
+					type="password"
+					autocomplete="current-password"
+					bind:value={password}
 				/>
-			</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}
-					>
+					<Link class="ridu-auth__link" 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}>
+			<Button
+				class="ridu-auth__submit"
+				type="submit"
+				size="lg"
+				disabled={pending}
+				aria-busy={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"
+					class="ridu-auth__link ridu-auth__secondary-link"
 					to={adminRoutePatterns.requestVerification}
 				>
 					{runtime.i18n.t("auth:requestVerification")}

package/src/features/auth/logout-button.scss

@@ -0,0 +1,34 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-logout {
+		display: grid;
+		place-items: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--foreground);
+		cursor: pointer;
+
+		svg {
+			width: 20px;
+			height: 20px;
+			stroke-width: 1;
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: wait;
+		}
+	}
+	.ridu-logout__error {
+		color: var(--destructive);
+		margin: 0;
+	}
+}

package/src/features/auth/logout-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import LogOutIcon from "~icons/lucide/log-out";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import "@admin/features/auth/logout-button.scss";
+
+	const runtime = getAdminRuntime();
+	const replacement = runtime.config.extensions.logoutButton;
+	const host = { logout };
+
+	let pending = $state(false);
+	let error = $state<string>();
+
+	async function logout() {
+		if (pending) return;
+
+		pending = true;
+		error = undefined;
+
+		try {
+			await runtime.client.logout();
+			await runtime.hardNavigate(adminRoutePatterns.login);
+		} catch (cause) {
+			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:signOutFailed");
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+{#if replacement !== undefined && runtime.manifest !== undefined}
+	<replacement.component
+		manifest={runtime.manifest}
+		user={runtime.session?.user}
+		{host}
+		i18n={runtime.i18n}
+	/>
+{:else}
+	<button
+		type="button"
+		class="ridu-logout"
+		disabled={pending}
+		onclick={logout}
+		aria-label={pending ? runtime.i18n.t("account:signingOut") : runtime.i18n.t("auth:logout")}
+		title={runtime.i18n.t("auth:logout")}
+	>
+		<LogOutIcon aria-hidden="true" />
+	</button>
+{/if}
+{#if error !== undefined}
+	<p class="ridu-logout__error" role="alert">{error}</p>
+{/if}

package/src/features/auth/request-verification-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.requestVerification(authCollection.slug, email);
 			sent = true;
@@ -36,35 +39,37 @@
 </script>
 
 <AuthFrame>
-	<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: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}
-			>
+			<Link class="ridu-auth__link" 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">
+			<form class="ridu-auth__form" onsubmit={submit}>
+				<p class="ridu-auth__description">
 					{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}>
+				<AuthField
+					disabled={pending}
+					id="verification-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:sendVerificationLink")}
 				</Button>
 			</form>

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

@@ -1,50 +1,107 @@
 <script lang="ts">
+	import { tick } from "svelte";
 	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 { 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 location = $derived(useLocation());
-	const token = $derived(new URLSearchParams(location.search).get("token") ?? "");
+	const location = useLocation();
+
+	const token = $derived(new URLSearchParams(location.current.search).get("token") ?? "");
 	const authCollection = $derived(runtime.authCollection);
+	const owner = $derived(JSON.stringify([authCollection?.id, authCollection?.slug, token]));
+
 	let password = $state("");
 	let confirmation = $state("");
 	let pending = $state(false);
 	let complete = $state(false);
 	let error = $state<string>();
+	let confirmationError = $state<string>();
+	let passwordErrors = $state<string[]>([]);
+	let request: AbortController | undefined;
+	let ownerGeneration = 0;
+
+	$effect.pre(() => {
+		// A retained route must clear credentials and outcomes before rendering a new token owner.
+		owner;
+		password = "";
+		confirmation = "";
+		pending = false;
+		complete = false;
+		error = undefined;
+		confirmationError = undefined;
+		passwordErrors = [];
+		return () => {
+			ownerGeneration += 1;
+			request?.abort();
+			request = undefined;
+		};
+	});
 
 	async function submit(event: SubmitEvent) {
 		event.preventDefault();
-		if (authCollection === undefined || token === "") return;
+		if (authCollection === undefined || token === "" || pending || complete) return;
+		const generation = ownerGeneration;
+		const requestOwner = owner;
+
+		error = undefined;
+		passwordErrors = [];
+		confirmationError = undefined;
 		if (password !== confirmation) {
-			error = runtime.i18n.t("auth:passwordMismatch");
+			confirmationError = runtime.i18n.t("auth:passwordMismatch");
+			await tick();
+			if (generation === ownerGeneration && requestOwner === owner)
+				document.getElementById("reset-confirm")?.focus();
 			return;
 		}
+
+		const activeRequest = new AbortController();
+		request = activeRequest;
+		const current = () => request === activeRequest && requestOwner === owner;
 		pending = true;
-		error = undefined;
+
 		try {
-			await runtime.client.resetPassword(authCollection.slug, token, password);
+			await runtime.client.resetPassword(authCollection.slug, token, password, {
+				signal: activeRequest.signal,
+			});
+			if (!current()) return;
 			complete = true;
 			password = "";
 			confirmation = "";
 		} catch (cause) {
-			error =
-				cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:passwordResetFailed");
+			if (!current()) return;
+			if (cause instanceof RiduError) {
+				passwordErrors = cause.issues
+					.filter((issue) => issue.path === "password")
+					.map((issue) => issue.message);
+			}
+
+			if (passwordErrors.length === 0) {
+				error =
+					cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:passwordResetFailed");
+			}
 		} finally {
-			pending = false;
+			if (current()) {
+				pending = false;
+				if (passwordErrors.length > 0) {
+					await tick();
+					if (current()) document.getElementById("reset-password")?.focus();
+				}
+				if (request === activeRequest) request = undefined;
+			}
 		}
 	}
 </script>
 
 <AuthFrame>
-	<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:chooseNewPassword")}
 		</h1>
 		{const terminalState = $derived(
@@ -66,37 +123,47 @@
 
 		{#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}
-			>
+			<Link class="ridu-auth__link" 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}>
+			<form class="ridu-auth__form" onsubmit={submit}>
+				<AuthField
+					disabled={pending}
+					id="reset-password"
+					label={runtime.i18n.t("account:newPassword")}
+					type="password"
+					autocomplete="new-password"
+					minlength={authCollection?.authSettings?.passwordMinLength ?? 8}
+					bind:value={password}
+					errors={passwordErrors}
+					oninput={() => {
+						passwordErrors = [];
+						confirmationError = undefined;
+					}}
+				/>
+				<AuthField
+					disabled={pending}
+					id="reset-confirm"
+					label={runtime.i18n.t("auth:confirmPassword")}
+					type="password"
+					autocomplete="new-password"
+					bind:value={confirmation}
+					errors={confirmationError === undefined ? [] : [confirmationError]}
+					oninput={() => (confirmationError = undefined)}
+					showLabel={runtime.i18n.t("auth:showPasswordConfirmation")}
+					hideLabel={runtime.i18n.t("auth:hidePasswordConfirmation")}
+				/>
+				{#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:resettingPassword")
 						: runtime.i18n.t("auth:resetPassword")}