ResetPassword

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  AuthDone,  MagicLinkSent,  ResetPassword} from '@kerf-js/veneer'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@kerf.dev"          lede={resendLede}          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')}        />      )}    </>  )}const resendLede =  'Press Resend link to stand in for the email.'

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ResetPassword } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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