メインコンテンツまでスキップ

パスワード変更ブロック

ChangePassword は MUI 上に構築された制御済みのパスワード変更フォームブロックです。

インストール​

npm install @nodeblocks/frontend-change-password-block@0.0.3

必要なもの​

項目重要な理由
dataフォーム state の単一の信頼できる情報源 (currentPassword, newPassword, confirmPassword)
onDataChangeフィールド変更時に更新済み state とメタデータを受け取る。meta には name, value, cause (input, change, blur, clear, reset, programmatic), optional event が含まれます
errors (optional)フィールド単位のエラーフィードバックを表示する
resetPasswordUrl (optional)「パスワードを忘れた」リンクの遷移先 URL
制御されたコンポーネント

ChangePassword はフォーム state を所有しません。state はアプリ側で保持し、data を通じて渡してください。

コード例​

ライブエディター
function Example() {
  const defaultData = {
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  };

  const [data, setData] = React.useState(defaultData);

  return (
    <ChangePassword
      data={data}
      onDataChange={setData}
      onSubmit={e => {
        e.preventDefault();
        alert(`Submit:\n${JSON.stringify(data, null, 2)}`);
      }}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

PropTypeRequiredDefaultDescription
dataChangePasswordFormData ({ currentPassword?, newPassword?, confirmPassword? } or extended Record<string, unknown>)Yes-現在のフォーム data オブジェクト
onDataChange(data, meta) => voidYes-更新時に呼び出されます。meta には name, value, cause (input, change, blur, clear, reset, programmatic), optional event が含まれます
errors{ [fieldName: string]: string | string[] }No-data のフィールド名（currentPassword, newPassword, confirmPassword）に紐づくフィールドエラー

コンテンツプロパティ​

PropTypeRequiredDefaultDescription
resetPasswordUrlstringNo/auth/resetpasswordForm.ResetPasswordLink の URL（リンク文言のデフォルト: パスワードを忘れた方）

レイアウトと構成プロパティ​

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNo-デフォルトのブロックを上書きするか、カスタムの JSX children を提供します
componentStackProps<'form'>['component']No'form'ルート要素の型
classNamestringNo-ルートコンテナのクラス名
sxStackProps<'form'>['sx']No-ルートコンテナ向けの MUI システムスタイル

ChangePassword は StackProps<'form'>（children を除く）も継承するため、onSubmit、id、noValidate などの標準的なフォーム props がサポートされます。オーバーライドなしのデフォルトのブロック順は title, form (defaultBlockOrder) です。

デフォルト UI ブロック​

ブロックBuilt on備考
ChangePassword (root)Stack (component="form")制御されたフォームコンテナ。内部コンテンツの最大幅は 684px
ChangePassword.TitleTypographyタイトル（variant="h6"）。デフォルト パスワードを変更
ChangePassword.FormStackフォームフィールドのコンテナ（送信はルート form が処理）
ChangePassword.Form.CurrentPasswordFieldTextField + IconButtonデフォルトのラベル/プレースホルダー 現在のパスワード / 現在のパスワードを入力
ChangePassword.Form.ResetPasswordLinkBox + Linkデフォルトのリンク文言 パスワードを忘れた方; href は resetPasswordUrl または /auth/resetpassword にフォールバック
ChangePassword.Form.NewPasswordFieldTextField + IconButtonデフォルト 新しいパスワード / 新しいパスワードを入力
ChangePassword.Form.ConfirmPasswordFieldTextField + IconButtonデフォルト 新しいパスワードを再入力（ラベルとプレースホルダー）
ChangePassword.Form.ChangePasswordButtonButton送信（variant="contained", type="submit"）。デフォルト パスワードを変更

TypeScript​

import {ChangePassword, type ChangePasswordFormData} from '@nodeblocks/frontend-change-password-block';

type MyChangePasswordData = ChangePasswordFormData & {
  userId?: string;
};

const data: MyChangePasswordData = {currentPassword: '', newPassword: '', confirmPassword: '', userId: 'user-1'};

<ChangePassword<MyChangePasswordData> data={data} onDataChange={() => {}} />;