ResetPassword

Ask for a reset by email, then set a new password.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { AuthDone, MagicLinkSent, ResetPassword } from '@weft-js/warp'export function Steps() {  const stage = state<'request' | 'sent' | 'password' | 'done'>('request')  return (    <>      {stage.value === 'request' && <ResetPassword heading="h3" onSubmit={() => (stage.value = 'sent')} onBack={() => {}} />}      {stage.value === 'sent' && <MagicLinkSent heading="h3" title="Check your inbox" email="priya@weft.dev" lede="Press Resend link to stand in for the email." onResend={() => (stage.value = 'password')} resendIn={0} onChangeEmail={() => (stage.value = 'request')} />}      {stage.value === 'password' && <ResetPassword heading="h3" stage="password" onSubmit={() => (stage.value = 'done')} />}      {stage.value === 'done' && <AuthDone heading="h3" title="Password changed" lede="Use the new one next time." delay={2400} onContinue={() => (stage.value = 'request')} />}    </>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { ResetPassword } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`stage`	`"request" \| "password"`	—	`request` asks for the email. `password` sets the new one.
`title`	`unknown`	—	The heading.
`lede`	`unknown`	—	One line under it.
`form`	`FormLike`	—	What `<Form of={mutation}>` gives you. The screen then renders no form of its own.
`errors`	`Record<string, string>`	—	Messages by field name.
`error`	`unknown`	—	The failure: a string, or a typed error it can map to the right place.
`errorOptions`	`FlowErrorOptions`	—	Words by error code.
`pending`	`boolean`	`false`	Shows progress on the submit button.
`heading`	`Heading`	—	The title's level. An auth step is usually the whole page, so `h1`.

Event	Type	Default	Description
`onBack`	`(() => void)`	—	Shows Back.
`onSubmit`	`((values: ResetValues, e: SubmitEvent) => void)`	—	Called with the values once the screen's own checks pass.
`onRetry`	`(() => void)`	—	The Retry on a network failure's toast.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="reset-password"] [data-part="lede"]

lede

RelatedMagic link sent Password meter