パスワードリセットブロック

ResetPassword は MUI 上に構築された、制御された2段階のリセットフロー（request と confirm_password）です。

インストール

npm
yarn
pnpm
bun

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

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

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

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

必要なもの

項目	重要な理由
`data`	フォーム state の単一の信頼できる情報源
`onDataChange`	フィールド変更時に更新済み state とメタデータを受け取る
`view`	メールリクエスト UI とパスワード確認 UI を切り替える
`onSendRequest`	リクエストフォーム送信時に呼び出される（`view="request"`）
`onResetPassword`	確認フォーム送信時に呼び出される（`view="confirm_password"`）
`errors` (optional)	フィールド単位のエラーフィードバックを表示する

制御されたコンポーネントと view

ResetPassword はフォーム state を所有しません。state はアプリ側で保持し、data を通じて渡してください。view="request" では { email } の data を、view="confirm_password" では { password, confirmPassword } の data を使います。

コード例

Quick Start
Labels and URLs
Compound Components
Block Override

ライブエディター

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)}`);
      }}
    />
  );
}

結果

タイトル、説明、ラベル、プレースホルダー、アクティブな view をカスタマイズします。

ライブエディター

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)}`);
      }}
    />
  );
}

結果

タイトル、説明、フィールド

ルートで resetPasswordTitle と description を渡してください。フィールドとボタンの文言は labels と placeholders を使うか、サブコンポーネントの props で上書きしてください（Compound Components タブを参照）。description={null} にすると、確認ステップで説明ブロックを非表示にできます。

子ブロックを使って、制御された state の動作を保ちながらレイアウトをカスタマイズします。フィールドは view に応じて表示されます（request では EmailField、confirm_password ではパスワード欄）。

ライブエディター

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>
  );
}

結果

関数 children を使ってデフォルトのブロックと順序を上書きします。

ライブエディター

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>
  );
}

結果

ブロックオーバーライドを使うタイミング

順序を変えたいとき、デフォルトの UI ブロックを置き換えたいとき、共有 state の処理を維持しながらカスタムコンテンツを挿入したいときにオーバーライドを使います。デフォルトの順序は title, description, form です。

重要な props

コア props

Prop	Type	Required	Default	Description
`data`	`ResetPasswordFormData` (`{ email? }` or `{ password?, confirmPassword? }`, or extended `Record<string, unknown>`)	Yes	-	現在のフォーム data。形は `view` と一致している必要があります
`onDataChange`	`(data, meta) => void`	Yes	-	更新時に呼び出されます。`meta` には `name`, `value`, `cause` (`input`, `change`, `blur`, `clear`, `reset`, `programmatic`), optional `event` が含まれます
`view`	`'request' \| 'confirm_password'`	Yes	`'request'`	リセットフローのアクティブなステップ
`onSendRequest`	`(data) => void`	Yes	-	`view="request"` の送信ハンドラー
`onResetPassword`	`(data) => void`	Yes	-	`view="confirm_password"` の送信ハンドラー
`errors`	`{ [fieldName: string]: string \| string[] }`	No	`undefined`	`data` のフィールド名（例: `email`, `password`, `confirmPassword`）に紐づくフィールドエラー

コンテンツ props

Prop	Type	Required	Default	Description
`resetPasswordTitle`	`ReactNode`	No	`'Reset Password'`	タイトルコンテンツ
`description`	`ReactNode`	No	`'Please enter your email address you registered'`	タイトル下に表示する説明。非表示にするには `null` を渡してください
`labels`	`{ emailField?, passwordField?, confirmPasswordField?, resetPasswordButton? }`	No	`emailField: 'Email'`, `passwordField: 'Password'`, `confirmPasswordField: 'Confirm Password'`, `resetPasswordButton: 'Reset Password'`	フィールドとボタンのラベルを上書き
`placeholders`	`{ emailField?, passwordField?, confirmPasswordField? }`	No	`emailField: 'Please enter your email'`, `passwordField: 'Please enter your new password'`, `confirmPasswordField: 'Please confirm your password'`	フィールドのプレースホルダーを上書き
`showPassword`	`boolean`	No	internal `false`	`Form.PasswordField` のパスワード表示状態（`confirm_password` view）
`onShowPasswordClick`	`(show: boolean) => void`	No	internal toggle	パスワード表示ハンドラー
`showConfirmPassword`	`boolean`	No	internal `false`	`Form.ConfirmPasswordField` の確認パスワード表示状態
`onShowConfirmPasswordClick`	`(show: boolean) => void`	No	internal toggle	確認パスワード表示ハンドラー

レイアウトと構成 props

Prop	Type	Required	Default	Description
`children`	`BlocksOverride \| ReactNode`	No	`undefined`	デフォルトのブロックを上書きするか、カスタムの JSX children を提供します
`component`	`React.ElementType`	No	`'form'`	ルート要素の型
`className`	`string`	No	`undefined`	ルートコンテナのクラス名
`sx`	`SxProps`	No	`undefined`	ルートコンテナ向けの MUI システムスタイル

ResetPassword は StackProps（children と onSubmit を除く）も継承するため、id、spacing、component などの標準的な stack props がサポートされます。フォーム送信は ResetPassword.Form の内部で処理されます。オーバーライドなしのデフォルトのブロック順は title, description, form (defaultBlockOrder) です。

デフォルト UI ブロック

Block	Built on	Notes
`ResetPassword` (root)	`Stack`	制御されたコンテナ。デフォルト `component="form"`。送信ハンドラーは `Form` にあります
`ResetPassword.Title`	`Typography`	タイトルテキストブロック（`variant="h4"`）。デフォルト `Reset Password`
`ResetPassword.Description`	`Typography`	説明テキスト（`variant="body2"`）。デフォルト `Please enter your email address you registered`。`description` が `null` のときは非表示
`ResetPassword.Form`	`Stack` (`component="form"`)	フォームコンテナ。`view` に応じて `onSendRequest` または `onResetPassword` を呼び出します
`ResetPassword.Form.EmailField`	`TextField`	`view="request"` のときのみ表示。`name="email"`。デフォルト `Email` / `Please enter your email`
`ResetPassword.Form.PasswordField`	`TextField` + `IconButton`	`view="confirm_password"` のときのみ表示。`name="password"`。デフォルト `Password` / `Please enter your new password`。表示切替あり
`ResetPassword.Form.ConfirmPasswordField`	`TextField` + `IconButton`	`view="confirm_password"` のときのみ表示。`name="confirmPassword"`。デフォルト `Confirm Password` / `Please confirm your password`。個別の表示切替あり
`ResetPassword.Form.ResetPasswordButton`	`Button`	送信ボタン（`variant="contained"`, `type="submit"`）。デフォルト `Reset Password`

TypeScript

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

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

インストール​

必要なもの​

コード例​

重要な props​

コア props​

コンテンツ props​

レイアウトと構成 props​

デフォルト UI ブロック​

TypeScript​

インストール

必要なもの

コード例

重要な props

コア props

コンテンツ props

レイアウトと構成 props

デフォルト UI ブロック

TypeScript