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

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

---

🚀 インストール

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

---

📖 使用方法

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

基本的な使用方法

ライブエディター

function BasicResetPassword() {

  const [view, setView] = useState<'request' | 'confirm_password'>('request');

  return (
    <ResetPassword
      view={view}
      onSendRequest={formData => {
        console.log('リセットリクエストが送信されました:', formData);
        setView('confirm_password');
      }}
      onResetPassword={formData => {
        console.log('パスワードがリセットされました:', formData);
        setView('request');
      }}>
      <ResetPassword.Title>
        {view === 'request' ? 'パスワードをリセット' : 'パスワード確認'}
      </ResetPassword.Title>
      <ResetPassword.Description>
        {view === 'request' ? 'リセット手順を受け取るためにメールアドレスを入力してください' : '新しいパスワードを入力してください'}
      </ResetPassword.Description>
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField label="メールアドレス" placeholder="メールアドレスを入力してください" />
        <ResetPassword.Form.PasswordField label="新しいパスワード" placeholder="新しいパスワードを入力してください" />
        <ResetPassword.Form.ConfirmPasswordField label="パスワード確認" placeholder="新しいパスワードを再入力してください" />
        <ResetPassword.Form.ResetPasswordButton>パスワードをリセット</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto>
        <a href="#signin">サインインに戻る</a>
      </ResetPassword.Goto>
    </ResetPassword>
  );
}

結果

Loading...

高度な使用方法

ライブエディター

function AdvancedResetPassword() {
  const [view, setView] = useState('request');

  return (
    <ResetPassword
      style={{
        maxWidth: '500px',
        margin: '0 auto',
        background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
        borderRadius: '16px',
        padding: '32px',
        boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
      }}
      view={view}>
      {({defaultBlocks, defaultBlockOrder}) => {
        console.log(defaultBlocks, defaultBlockOrder);
        return {
          blocks: {
            ...defaultBlocks,
            title: {
              ...defaultBlocks.title,
              props: {
                ...defaultBlocks.title.props,
                style: {
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                  fontSize: '2.5rem',
                  fontWeight: 'bold',
                  textAlign: 'center',
                  marginBottom: '16px',
                },
                children: (
                  <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px'}}>
                    <svg style={{width: '32px', height: '32px', color: '#667eea'}} fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1M12 7C13.11 7 14 7.9 14 9S13.11 11 12 11 10 10.11 10 9 10.9 7 12 7M18 14.2C16.69 16.92 14.5 19.13 11.8 20.4C14.5 19.13 16.69 16.92 18 14.2Z" />
                    </svg>
                    <span>{view === 'request' ? 'パスワードリセット' : '新しいパスワード設定'}</span>
                  </div>
                ),
              },
            },
            description: {
              ...defaultBlocks.description,
              props: {
                ...defaultBlocks.description.props,
                style: {
                  textAlign: 'center',
                  color: '#64748b',
                  fontSize: '16px',
                  lineHeight: '1.6',
                  marginBottom: '32px',
                  padding: '16px',
                  background: 'white',
                  borderRadius: '8px',
                  border: '1px solid #e2e8f0',
                },
                children: view === 'request' 
                  ? 'ご登録いただいたメールアドレスを入力してください。パスワードリセット用のリンクをお送りします。'
                  : '新しいパスワードを入力してください。セキュリティのため、8文字以上の強固なパスワードを設定してください。',
              },
            },
            form: {
               ...defaultBlocks.form,
               props: {
                 ...defaultBlocks.form.props,
                 onSubmit: (e) => {
                  e.preventDefault();
                  if (view === 'request') {
                    setView('confirm_password');
                  } else {
                    setView('request');
                  }
                 },
                 style: {
                   background: 'white',
                   borderRadius: '12px',
                   padding: '24px',
                   marginBottom: '24px',
                   boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
                   border: '1px solid #e2e8f0',
                 },
                 children: (
                   <>
                     <ResetPassword.Form.EmailField 
                       label="メールアドレス" 
                       placeholder="例: user@company.com"
                       style={{
                         marginBottom: '20px',
                         background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                         borderRadius: '8px',
                         border: '2px solid #e2e8f0',
                         padding: '12px',
                         transition: 'all 0.2s ease',
                       }}
                     />
                     <ResetPassword.Form.PasswordField
                       label="新しいパスワード"
                       placeholder="8文字以上の安全なパスワード"
                       style={{
                         marginBottom: '20px',
                         background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                         borderRadius: '8px',
                         border: '2px solid #e2e8f0',
                         padding: '12px',
                         transition: 'all 0.2s ease',
                       }}
                     />
                     <ResetPassword.Form.ConfirmPasswordField
                       label="パスワード確認"
                       placeholder="パスワードを再入力してください"
                       style={{
                         marginBottom: '24px',
                         background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                         borderRadius: '8px',
                         border: '2px solid #e2e8f0',
                         padding: '12px',
                         transition: 'all 0.2s ease',
                       }}
                     />
                     <ResetPassword.Form.ResetPasswordButton type="">
                       {view === 'request' ? 'リセットリンクを送信' : 'パスワードを更新'}
                     </ResetPassword.Form.ResetPasswordButton>
                   </>
                 ),
               },
            },
            goto: {
              ...defaultBlocks.goto,
              props: {
                ...defaultBlocks.goto.props,
                style: {
                  textAlign: 'center',
                  padding: '16px',
                  background: 'rgba(255, 255, 255, 0.7)',
                  borderRadius: '8px',
                  border: '1px solid #e2e8f0',
                },
                children: (
                  <div style={{color: '#64748b', fontSize: '14px'}}>
                    <span>パスワードを思い出しましたか？ </span>
                    <a 
                      href="#signin" 
                      style={{
                        color: '#667eea',
                        textDecoration: 'none',
                        fontWeight: '500',
                        transition: 'color 0.2s ease',
                      }}
                      onMouseEnter={e => e.target.style.color = '#5a6fd8'}
                      onMouseLeave={e => e.target.style.color = '#667eea'}
                    >
                      ログインページに戻る
                    </a>
                  </div>
                ),
              },
            },
          },
          blockOrder: defaultBlockOrder,
        };
      }}
    </ResetPassword>
  );
}

結果

Loading...

---

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

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

メインのResetPasswordコンポーネントは、HTML div要素のすべてのプロパティを継承し（childrenとonSubmitはオーバーライド）、以下を追加します:

プロパティ	型	デフォルト	説明
view	'request' | 'confirm_password'	必須	表示するビューを決定 - メールリクエストフォームまたはパスワード確認フォーム
onSendRequest	(data: T) => void	必須	リセットリクエストが送信されたときにトリガーされるコールバック関数
onResetPassword	(data: T) => void	必須	新しいパスワードが送信されたときにトリガーされるコールバック関数
resetPasswordTitle	ReactNode	"Reset Password"	パスワードリセットフォームのタイトルコンテンツ
description	ReactNode	"Please enter your email address you registered"	タイトル下に表示される説明テキスト
gotoSigninMessage	ReactNode	デフォルトサインインリンク	ナビゲーションリンクセクションのコンテンツ
className	string	undefined	フォームコンテナスタイリング用の追加CSSクラス名
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント

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

ResetPassword.Title

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	タイトルコンテンツ - コンテキストのerrorTitleをオーバーライド
size	enum	"2XL"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

ResetPassword.Description

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	タイトルコンテンツ - コンテキストのerrorTitleをオーバーライド
size	enum	"M"	タイトルのタイポグラフィサイズ
type	enum	"paragraph"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"regular"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

ResetPassword.Form

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

ResetPassword.Form.EmailField

プロパティ	型	デフォルト	説明
name	string	"email"	フォームデータに使用されるフィールド名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"Email"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントは追加で一般的なHTML input要素プロパティを継承します。

ResetPassword.Form.PasswordField

プロパティ	型	デフォルト	説明
name	string	"password"	フォームデータに使用されるフィールド名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"Password"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名
showPassword	boolean	undefined	パスワードを表示するかどうか
onShowPasswordClick	function	undefined	パスワード表示の切り替えを処理する関数

注意: このコンポーネントは追加で一般的なHTML input要素プロパティを継承します。

ResetPassword.Form.ConfirmPasswordField

プロパティ	型	デフォルト	説明
name	string	"confirmPassword"	フォームデータに使用されるフィールド名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"Confirm Password"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名
showPassword	boolean	undefined	パスワードを表示するかどうか
onShowPasswordClick	function	undefined	パスワード表示の切り替えを処理する関数

注意: このコンポーネントは追加で一般的なHTML input要素プロパティを継承します。

ResetPassword.Form.ResetPasswordButton

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	ボタン内に配置するテキスト
className	string	undefined	スタイリング用の追加CSSクラス名
fill	enum	"fill"	ボタンフィルスタイル
icon	enum	undefined	ボタン左側のオプションアイコン
iconColor	enum	undefined	左側アイコンの色。提供されない場合、フィルタイプのデフォルト色が使用されます
isDisabled	boolean	false	ボタンが無効で使用できないかどうか
onClick	function	undefined	ボタンクリックを処理する関数
size	enum	"M"	ボタンの縦サイズ
textAlign	enum	"center"	ボタン内でのアイコンとテキストの位置
textColor	enum	"default"	ボタンテキストの色
textEmphasis	boolean	false	ボタンテキストの太さ
textSize	enum	"M"	ボタンテキストのサイズ
type	enum	"submit"	ボタンの目的（htmlタイプに影響）

注意: このコンポーネントは追加で一般的なHTML button要素プロパティを継承します。

ResetPassword.Goto

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルトサインインリンク	ナビゲーションリンクセクションのコンテンツ - 通常アンカータグを含む
className	string	undefined	スタイリング用の追加CSSクラス名

---

🔧 TypeScript サポート

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

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

// メールリクエスト用のデフォルトフォームデータ構造
interface ResetPasswordEmailData {
  email?: string;
}

// パスワード確認用のデフォルトフォームデータ構造
interface ResetPasswordConfirmData {
  password?: string;
  confirmPassword?: string;
}

// 結合されたフォームデータタイプ
type ResetPasswordFormData = ResetPasswordEmailData | ResetPasswordConfirmData;

// カスタムフィールドで拡張
interface CustomResetPasswordFormData extends ResetPasswordFormData {
  customField?: string;
}

const MyResetPasswordForm = () => {
  const handleSendRequest = (formData: ResetPasswordFormData) => {
    console.log('リセットリクエストが送信されました:', formData);
    // メール送信を処理
  };

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

  return (
    <ResetPassword<CustomResetPasswordFormData>
      view="request"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      resetPasswordTitle="パスワードをお忘れですか？"
      description="メールアドレスを入力していただければ、リセット手順をお送りします">
      <ResetPassword.Title>パスワードをリセット</ResetPassword.Title>
      <ResetPassword.Description>
        ご心配ありません。よくあることです。下記にメールアドレスを入力してください。
      </ResetPassword.Description>
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField />
        <ResetPassword.Form.PasswordField />
        <ResetPassword.Form.ConfirmPasswordField />
        <ResetPassword.Form.ResetPasswordButton>リセットリンクを送信</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto>
        <span>
          パスワードを思い出しましたか？ <a href="/signin">サインイン</a>
        </span>
      </ResetPassword.Goto>
    </ResetPassword>
  );
};

---

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。