ForgotPasswordPage

A form that requests a password-reset email.

01 Usage

Basic

Forgot password

Enter your email address and we will send you a link to reset your password.

<script lang="ts">
  import { ForgotPasswordPage } from '@urbicon-ui/auth';
</script>

<ForgotPasswordPage />

02 Accessibility

Both outcomes are announced

Two regions below the heading are always mounted: failures land in the assertive role="alert" one, and the confirmation that replaces the form in the polite role="status" one. The outcome reaches the reader on either path, urgently only where it has to be, and focus stays where the user left it. The success screen appears whether or not the address has an account, so the page never reveals which emails are registered.

A single labelled field

The one input is type="email", required, and autoComplete="email". The Input primitive renders a real <label for> tied to the field id, so clicking the label focuses the field and the reader announces the two together.

Submit reports its own busy state

While the request is in flight the button is both disabled and aria-busy (blocks' Button sets the latter from loading). A user who hears nothing after pressing Enter can still query the button and learn that the request is running.

03 API Reference

12 props

Prop	Type	Default	Description
`apiPath`	`string`	`'/api/auth/forgot-password'`	API endpoint for the reset-request.
`class`	`string`	—	Extra classes on the root element.
`csrf`	`CsrfClientOptions`	—	CSRF cookie/header names. Only needed when the server overrides the defaults via `config.csrf`. Mutating requests echo the token automatically.
`fetcher`	`typeof globalThis.fetch`	—	Custom fetch implementation for all API calls. Defaults to the global `fetch`. Useful for mock backends in demos/tests or custom retry/auth layers.
`footer`	`Snippet`	—	Content rendered below the form, above links.
`header`	`Snippet`	—	Content rendered between the heading and the form.
`links`	`Snippet`	—	Replaces the link area below the form.
`loginUrl`	`string`	`'/auth/login'`	URL for the login page link.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ ForgotPasswordPage: { … } }}>`. Resolves after the provider defaults and before this instance's own `slotClasses`, so a project-wide look lives in one place instead of being repeated at every usage site.
`slotClasses`	`AuthPageSlotClasses`	—	Per-slot class overrides. Keys: `root`, `card`, `title`, `form`, `field`, `submit`, `error`, `success`, `links`.
`t`	`PartialAuthLocale`	—	Locale overrides, deep-merged over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it. Pass any subset, from a single string to a whole tree.
`unstyled`	`boolean`	—	Strip all default styling.

04 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
ForgotPasswordPageProps	interface	props	0	—
PartialAuthLocale	type	helper	1	Consumer-facing locale input: any subset of `AuthLocale`. Components accept this as their `t` prop and deep-merge it over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so overriding a single string never silently blanks the rest.
CsrfClientOptions	interface	helper	1	—
AuthPageSlotClasses	interface	helper	1	Per-slot CSS class overrides for auth page components (LoginPage, RegisterPage, etc.). Each key targets a specific visual area of the page. Only the slots you override are affected.
DeepPartial	type	helper	0	Recursive partial: every branch and leaf becomes optional.
AuthLocale	interface	helper	0	The complete auth locale bundle. Every key is required: the bundles this package ships (`en`, `de`) satisfy the full shape, and consumer overrides enter as `PartialAuthLocale`, deep-merged by `mergeAuthLocale` over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so component markup reads keys directly, without per-key `?? '…'` fallback literals. Placeholder convention: dynamic values use single-brace tokens (`{n}`, `{name}`, `{email}`) that the consuming component substitutes itself via `String.replace('{token}', value)`. There is deliberately no `{{…}}` runtime interpolator in this package. The key-based translator twin (`authT`/`at`) was removed, so `{{…}}` here would render verbatim.

05 Installation

Import

import { ForgotPasswordPage } from '@urbicon-ui/auth';

llm.txt