Reset Password Block

ResetPassword is a controlled two-step reset flow (request and confirm_password) built on MUI.

Installation

npm

npm install @nodeblocks/frontend-reset-password-block

yarn

yarn add @nodeblocks/frontend-reset-password-block

pnpm

pnpm add @nodeblocks/frontend-reset-password-block

bun

bun add @nodeblocks/frontend-reset-password-block

What You Need

Item	Why it matters
data	Single source of truth for form state
onDataChange	Receives updated state + metadata on field changes
view	Switches between email request and password confirmation UI
onSendRequest	Called when the request form is submitted (view="request")
onResetPassword	Called when the confirm form is submitted (view="confirm_password")
errors (optional)	Displays field-level error feedback

Controlled component and view

ResetPassword does not own form state. Keep state in your app and pass it through data. Use view="request" with { email } data, or view="confirm_password" with { password, confirmPassword } data.

Code Examples

Quick Start

Live Editor

function Example() {
  const [view] = React.useState('request');
  const [data, setData] = React.useState({email: ''});

  return (
    <ResetPassword
      view={view}
      data={data}
      onDataChange={setData}
      onSendRequest={formData => {
        alert(`Send request:\n${JSON.stringify(formData, null, 2)}`);
      }}
      onResetPassword={formData => {
        alert(`Reset password:\n${JSON.stringify(formData, null, 2)}`);
      }}
    />
  );
}

Result

Loading...

Labels and URLs

Customize title, description, labels, placeholders, and the active view.

Live Editor

function Example() {
  const [view] = React.useState('confirm_password');
  const [data, setData] = React.useState({password: '', confirmPassword: ''});

  return (
    <ResetPassword
      view={view}
      data={data}
      description={null}
      resetPasswordTitle="Set a new password"
      labels={{
        passwordField: 'New password',
        confirmPasswordField: 'Confirm password',
        resetPasswordButton: 'Update password',
      }}
      placeholders={{
        passwordField: 'Enter a new password',
        confirmPasswordField: 'Re-enter your password',
      }}
      errors={{
        password: 'Use at least 8 characters.',
        confirmPassword: 'Passwords do not match.',
      }}
      onDataChange={setData}
      onSendRequest={formData => {
        alert(`Send request:\n${JSON.stringify(formData, null, 2)}`);
      }}
      onResetPassword={formData => {
        alert(`Reset password:\n${JSON.stringify(formData, null, 2)}`);
      }}
    />
  );
}

Result

Loading...

Title, description, and fields

Pass resetPasswordTitle and description on the root. Use labels and placeholders for field and button copy, or override via subcomponent props (see Compound Components tab). Set description={null} to hide the description block on the confirm step.

Compound Components

Use child blocks to customize layout while keeping controlled state behavior. Fields render based on view (EmailField for request; password fields for confirm_password).

Live Editor

function Example() {
  const [view] = React.useState('request');
  const [data, setData] = React.useState({email: ''});

  return (
    <ResetPassword
      view={view}
      data={data}
      onDataChange={setData}
      onSendRequest={formData => {
        alert(`Send request:\n${JSON.stringify(formData, null, 2)}`);
      }}
      onResetPassword={formData => {
        alert(`Reset password:\n${JSON.stringify(formData, null, 2)}`);
      }}
    >
      <ResetPassword.Title>Reset Your Password</ResetPassword.Title>
      <ResetPassword.Description>Enter your email to receive reset instructions</ResetPassword.Description>
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField view={view} label="Email Address" placeholder="Enter your email" />
        <ResetPassword.Form.PasswordField view={view} label="New Password" placeholder="Enter new password" />
        <ResetPassword.Form.ConfirmPasswordField
          view={view}
          label="Confirm Password"
          placeholder="Confirm new password"
        />
        <ResetPassword.Form.ResetPasswordButton>Reset Password</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
    </ResetPassword>
  );
}

Result

Loading...

Block Override

Use function children to override default blocks and order.

Live Editor

function Example() {
  const [view] = React.useState('request');
  const [data, setData] = React.useState({email: ''});

  return (
    <ResetPassword
      view={view}
      data={data}
      onDataChange={setData}
      onSendRequest={formData => {
        alert(`Send request:\n${JSON.stringify(formData, null, 2)}`);
      }}
      onResetPassword={formData => {
        alert(`Reset password:\n${JSON.stringify(formData, null, 2)}`);
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          ...defaultBlocks,
          customBlock: (
            <div
              style={{
                background: '#eef4ff',
                border: '1px solid #cddcff',
                borderRadius: '8px',
                padding: '12px',
                fontSize: '14px',
                textAlign: 'center',
              }}
            >
              Custom notification or help text
            </div>
          ),
        },
        blockOrder: ['customBlock', ...defaultBlockOrder],
      })}
    </ResetPassword>
  );
}

Result

Loading...

When to use block overrides

Use overrides when you need to change order, replace default UI blocks, or inject custom content while preserving shared state handling. Default order is title, description, form.

Important Props

Core Props

Prop	Type	Required	Default	Description
data	ResetPasswordFormData ({ email? } or { password?, confirmPassword? }, or extended Record<string, unknown>)	Yes	-	Current form data; shape should match view
onDataChange	(data, meta) => void	Yes	-	Called on updates; meta includes name, value, cause (input, change, blur, clear, reset, programmatic), optional event
view	'request' | 'confirm_password'	Yes	'request'	Active step of the reset flow
onSendRequest	(data) => void	Yes	-	Submit handler for view="request"
onResetPassword	(data) => void	Yes	-	Submit handler for view="confirm_password"
errors	{ [fieldName: string]: string | string[] }	No	undefined	Field errors keyed by data field name (e.g. email, password, confirmPassword)

Content Props

Prop	Type	Required	Default	Description
resetPasswordTitle	ReactNode	No	'Reset Password'	Title content
description	ReactNode	No	'Please enter your email address you registered'	Description below the title; pass null to hide
labels	{ emailField?, passwordField?, confirmPasswordField?, resetPasswordButton? }	No	emailField: 'Email', passwordField: 'Password', confirmPasswordField: 'Confirm Password', resetPasswordButton: 'Reset Password'	Override field and button labels
placeholders	{ emailField?, passwordField?, confirmPasswordField? }	No	emailField: 'Please enter your email', passwordField: 'Please enter your new password', confirmPasswordField: 'Please confirm your password'	Override field placeholders
showPassword	boolean	No	internal false	Password visibility for Form.PasswordField (confirm_password view)
onShowPasswordClick	(show: boolean) => void	No	internal toggle	Password visibility handler
showConfirmPassword	boolean	No	internal false	Confirm-password visibility for Form.ConfirmPasswordField
onShowConfirmPasswordClick	(show: boolean) => void	No	internal toggle	Confirm-password visibility handler

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Override default blocks or provide custom JSX children
component	React.ElementType	No	'form'	Root element type
className	string	No	undefined	Class name for the root container
sx	SxProps	No	undefined	MUI system styles for the root container

ResetPassword also inherits StackProps (except children and onSubmit), so standard stack props like id, spacing, and component are supported. Form submit is handled inside ResetPassword.Form. Default block order without overrides: title, description, form (defaultBlockOrder).

Default UI Blocks

Block	Built on	Notes
ResetPassword (root)	Stack	Controlled container; default component="form"; submit handlers live on Form
ResetPassword.Title	Typography	Title text block (variant="h4"); default Reset Password
ResetPassword.Description	Typography	Description text (variant="body2"); default Please enter your email address you registered; hidden when description is null
ResetPassword.Form	Stack (component="form")	Form container; calls onSendRequest or onResetPassword by view
ResetPassword.Form.EmailField	TextField	Shown only when view="request"; name="email"; default Email / Please enter your email
ResetPassword.Form.PasswordField	TextField + IconButton	Shown only when view="confirm_password"; name="password"; default Password / Please enter your new password; visibility toggle
ResetPassword.Form.ConfirmPasswordField	TextField + IconButton	Shown only when view="confirm_password"; name="confirmPassword"; default Confirm Password / Please confirm your password; separate visibility toggle
ResetPassword.Form.ResetPasswordButton	Button	Submit button (variant="contained", type="submit"); default Reset Password

TypeScript

import {ResetPassword, ResetPasswordFormData} from '@nodeblocks/frontend-reset-password-block';

type MyResetPasswordData = ResetPasswordFormData & {
  token?: string;
};