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

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

ResetPasswordコンポーネントは、React、TypeScript、MUIで構築された完全にカスタマイズ可能でアクセシブルなパスワードリセットフォームです。モダンなデザインパターン、リクエストと確認フローの両方に対応したデュアルビューサポート、柔軟なカスタマイズオプションを備えた完全なパスワードリセットインターフェースを提供します。

🚀 インストール​

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

📖 使用法​

import {ResetPassword} from '@nodeblocks/frontend-reset-password-block';
ライブエディター
function SimpleResetPasswordRequest() {
  const handleSendRequest = (data) => {
    console.log('パスワードリセットリクエストが送信されました:', data);
  };

  const handleResetPassword = (data) => {
    console.log('パスワードがリセットされました:', data);
  };

  return (
    <ResetPassword
      view="request"
      resetPasswordTitle="パスワードをリセット"
      description="パスワードリセットリンクを受け取るためにメールアドレスを入力してください"
      gotoSigninMessage="パスワードを思い出しましたか？サインイン"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      sx={{maxWidth: 400, mx: 'auto', p: 3}}
    >
      <ResetPassword.Title />
      <ResetPassword.Description />
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField />
        <ResetPassword.Form.ResetPasswordButton>リセットリンクを送信</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto />
    </ResetPassword>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
view'request' | 'confirm_password'必須表示するビューを決定 - メールリクエストフォームまたはパスワード確認フォーム
onSendRequest(data: T) => void必須リセットリクエストが送信されたときにトリガーされるコールバック関数
onResetPassword(data: T) => void必須新しいパスワードが送信されたときにトリガーされるコールバック関数
resetPasswordTitleReactNode"Reset Password"パスワードリセットフォームのタイトルコンテンツ
descriptionReactNode"Please enter your email address you registered"タイトル下に表示される説明テキスト
gotoSigninMessageReactNodeデフォルトサインインリンクナビゲーションリンクセクションのコンテンツ
showPasswordbooleanfalseパスワードフィールドの表示を制御（デフォルトで内部管理）
onShowPasswordClick(show: boolean) => void内部ハンドラーパスワード表示切り替えのコールバック
classNamestringundefinedフォームコンテナスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはMUI StackProps（childrenとonSubmitを除く）を拡張します。デフォルトスペーシングは4、パディングはpy: 6とpx: 5です。

サブコンポーネント​

ResetPasswordコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ResetPassword.Title​

プロパティ型デフォルト説明
resetPasswordTitleReactNodeコンテキストからタイトルコンテンツ
childrenReactNode"Reset Password"カスタムタイトルコンテンツ（resetPasswordTitleをオーバーライド）
classNamestringundefinedスタイリング用の追加CSSクラス名
variantstring"h4"MUI Typographyバリアント
componentstring"h1"レンダリングするHTML要素
sxSxPropsundefinedデフォルトtextAlign: 'center'を持つMUI sxプロパティ

注意: このコンポーネントはMUI TypographyProps を拡張します。

ResetPassword.Description​

プロパティ型デフォルト説明
descriptionReactNodeコンテキストから説明コンテンツ
childrenReactNode"Please enter your email address you registered"カスタム説明コンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
variantstring"body2"MUI Typographyバリアント
sxSxPropsundefinedデフォルトtextAlign: 'center'を持つMUI sxプロパティ

注意: このコンポーネントはMUI TypographyProps を拡張します。

ResetPassword.Form​

プロパティ型デフォルト説明
view'request' | 'confirm_password'コンテキストから表示するフィールドを決定
onSendRequest(data: T) => voidコンテキストからメール送信のコールバック
onResetPassword(data: T) => voidコンテキストからパスワード確認のコールバック
classNamestringundefinedスタイリング用の追加CSSクラス名
childrenReactNodeデフォルトフォームフィールドカスタムフォームコンテンツ

注意: このコンポーネントはcomponent="form"を持つMUI StackProps<'form'>を拡張します。デフォルトスペーシングは4です。

ResetPassword.Form.EmailField​

プロパティ型デフォルト説明
view'request' | 'confirm_password'コンテキストからview === 'request'のときのみレンダリング
namestring"email"フォームデータに使用されるフィールド名
labelstring"Email"入力フィールドのラベル
placeholderstring"Please enter your email"プレースホルダーテキスト
fullWidthbooleantrueフィールドが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。requestビューでのみ表示されます。

ResetPassword.Form.PasswordField​

プロパティ型デフォルト説明
view'request' | 'confirm_password'コンテキストからview === 'confirm_password'のときのみレンダリング
showPasswordbooleanコンテキストからパスワード表示を制御
onShowPasswordClick(show: boolean) => voidコンテキストからパスワード表示切り替え
namestring"password"フォームデータに使用されるフィールド名
labelstring"Password"入力フィールドのラベル
placeholderstring"Please enter your new password"プレースホルダーテキスト
fullWidthbooleantrueフィールドが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。confirm_passwordビューでのみ表示されます。showPasswordとonShowPasswordClickが提供されている場合、表示切り替えアイコンを含みます。

ResetPassword.Form.ConfirmPasswordField​

プロパティ型デフォルト説明
view'request' | 'confirm_password'コンテキストからview === 'confirm_password'のときのみレンダリング
showPasswordbooleanコンテキストからパスワード表示を制御
onShowPasswordClick(show: boolean) => voidコンテキストからパスワード表示切り替え
namestring"confirmPassword"フォームデータに使用されるフィールド名
labelstring"Confirm Password"入力フィールドのラベル
placeholderstring"Please confirm your password"プレースホルダーテキスト
fullWidthbooleantrueフィールドが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。confirm_passwordビューでのみ表示されます。showPasswordとonShowPasswordClickが提供されている場合、表示切り替えアイコンを含みます。

ResetPassword.Form.ResetPasswordButton​

プロパティ型デフォルト説明
childrenReactNode"Reset Password"ボタンテキスト
variantstring"contained"MUI Buttonバリアント
fullWidthbooleantrueボタンが全幅を占めるかどうか
typestring"submit"HTMLボタンタイプ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI ButtonProps を拡張します。

ResetPassword.Goto​

プロパティ型デフォルト説明
gotoSigninMessageReactNodeコンテキストからカスタムナビゲーションメッセージ
childrenReactNode/auth/loginへのリンクナビゲーションセクション用のカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
variantstring"body2"MUI Typographyバリアント
sxSxPropsundefinedデフォルトtextAlign: 'center'を持つMUI sxプロパティ

注意: このコンポーネントはMUI TypographyProps を拡張します。

🎨 設定例​

カスタムタイトルスタイリング​

<ResetPassword.Title
  variant="h3"
  sx={{
    color: 'primary.main',
    fontWeight: 'bold',
  }}
>
  パスワードをお忘れですか？
</ResetPassword.Title>

カスタムフィールドラベル​

<ResetPassword.Form>
  <ResetPassword.Form.EmailField 
    label="メールアドレス" 
    placeholder="name@example.com"
    helperText="このアドレスにリセットリンクを送信します"
  />
  <ResetPassword.Form.PasswordField
    label="新しいパスワードを作成"
    placeholder="8文字以上"
  />
  <ResetPassword.Form.ConfirmPasswordField
    label="新しいパスワードを確認"
    placeholder="パスワードを再入力"
  />
  <ResetPassword.Form.ResetPasswordButton>
    リセットリンクを送信
  </ResetPassword.Form.ResetPasswordButton>
</ResetPassword.Form>

ブロックオーバーライドパターン​

<ResetPassword view="request" onSendRequest={handleSend} onResetPassword={handleReset}>
  {({ defaultBlocks, defaultBlockOrder }) => ({
    blocks: {
      ...defaultBlocks,
      // カスタムセキュリティ通知を追加
      securityNote: (
        <Alert severity="info" sx={{ textAlign: 'center' }}>
          セキュリティのため、リセットリンクは24時間で期限切れになります
        </Alert>
      ),
    },
    blockOrder: ['title', 'description', 'securityNote', 'form', 'goto'],
  })}
</ResetPassword>

カスタムナビゲーションリンク​

<ResetPassword.Goto>
  <span>
    パスワードを思い出しましたか？{' '}
    <Link href="#login" sx={{ fontWeight: 'medium' }}>
      サインインに戻る
    </Link>
  </span>
</ResetPassword.Goto>

カスタムスタイリング​

function CustomStyledResetPassword() {
  const handleSendRequest = (data) => {
    console.log('リクエスト:', data);
  };

  const handleResetPassword = (data) => {
    console.log('リセット:', data);
  };

  return (
    <ResetPassword
      view="request"
      resetPasswordTitle="パスワードをお忘れですか？"
      description="心配ありません。リセット手順をお送りします"
      gotoSigninMessage="サインインに戻る"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      sx={{
        maxWidth: 420,
        mx: 'auto',
        p: 4,
        bgcolor: 'grey.900',
        color: 'grey.100',
        borderRadius: 3,
      }}
    >
      <ResetPassword.Title
        sx={{
          mb: 1,
          color: 'grey.100',
          fontWeight: 700,
        }}
      />
      <ResetPassword.Description
        sx={{
          mb: 3,
          color: 'grey.400',
        }}
      />
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField
          sx={{
            mb: 3,
            '& .MuiInputLabel-root': {color: 'grey.400'},
            '& .MuiOutlinedInput-root': {
              color: 'grey.100',
              '& .MuiOutlinedInput-notchedOutline': {
                borderColor: 'grey.600',
              },
              '&:hover .MuiOutlinedInput-notchedOutline': {
                borderColor: 'primary.main',
              },
              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                borderColor: 'primary.main',
              },
            },
          }}
        />
        <ResetPassword.Form.ResetPasswordButton
          sx={{
            bgcolor: 'primary.main',
            '&:hover': {
              bgcolor: 'primary.dark',
            },
          }}
        >
          リセットリンクを送信
        </ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto
        sx={{
          mt: 3,
          textAlign: 'center',
          color: 'grey.400',
          '& a': {
            color: 'primary.light',
          },
        }}
      />
    </ResetPassword>
  );
}

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート:

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

type ResetPasswordFormData =
  | {
      email?: string;
    }
  | {
      password?: string;
      confirmPassword?: string;
    };

function TypedResetPassword() {
  const [view, setView] = useState<'request' | 'confirm_password'>('request');
  const [showPassword, setShowPassword] = useState(false);

  const handleSendRequest = (data: ResetPasswordFormData): void => {
    console.log('リセットリンクを送信中:', data);
    // API呼び出しをシミュレートしてから確認ビューに切り替え
    setTimeout(() => setView('confirm_password'), 1000);
  };

  const handleResetPassword = (data: ResetPasswordFormData): void => {
    console.log('パスワードがリセットされました:', data);
    // パスワードリセットのAPI呼び出し
  };

  return (
    <ResetPassword
      view={view}
      resetPasswordTitle={view === 'request' ? 'パスワードをリセット' : '新しいパスワードを作成'}
      description={
        view === 'request' ? 'リセットリンクを受け取るためにメールアドレスを入力してください' : '新しいパスワードを入力して確認してください'
      }
      gotoSigninMessage="パスワードを思い出しましたか？サインイン"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      showPassword={showPassword}
      onShowPasswordClick={setShowPassword}
      sx={{
        maxWidth: 400,
        mx: 'auto',
        p: 3,
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <ResetPassword.Title />
      <ResetPassword.Description />
      <ResetPassword.Form>
        {view === 'request' ? (
          <ResetPassword.Form.EmailField />
        ) : (
          <>
            <ResetPassword.Form.PasswordField />
            <ResetPassword.Form.ConfirmPasswordField />
          </>
        )}
        <ResetPassword.Form.ResetPasswordButton>
          {view === 'request' ? 'リセットリンクを送信' : 'パスワードをリセット'}
        </ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      {view === 'request' && <ResetPassword.Goto />}
    </ResetPassword>
  );
}

📝 注意事項​

  • コンポーネントはMUIの Stack コンポーネントをベースとして使用し、柔軟なレイアウトオプションを提供します
  • デフォルトスペーシングは4、パディングはpy: 6とpx: 5です
  • viewプロパティは表示されるフィールドを制御します:
    • 'request': メールフィールドのみを表示
    • 'confirm_password': パスワードとパスワード確認フィールドを表示
  • フォーム送信はonSubmitイベントで内部的に処理されます
  • showPasswordコンテキストが利用可能な場合、パスワード表示切り替えが組み込まれています
  • パスワードフィールドには切り替え用のMUI Visibility/VisibilityOffアイコンが含まれます
  • デフォルトブロック: title、description、form、goto
  • CSSクラスはBEMスタイルの命名に従います: nbb-reset-password、nbb-reset-password-titleなど
  • コンポーネントはmargin: 'auto'で中央揃えになり、大画面ではminWidth: { lg: 496 }があります
  • デフォルトの「サインインに戻る」リンクは/auth/loginを指します

React、TypeScript、MUIを使用して❤️で構築されました。