Reset Password Block

The ResetPassword Component is a fully customizable and accessible reset password form built with React and TypeScript. It provides a complete password reset interface with modern design patterns, dual-view support for both request and confirmation flows, and flexible customization options.

---

🚀 Installation

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

---

📖 Usage

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

Basic Usage

Live Editor

function BasicResetPassword() {

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

  return (
    <ResetPassword
      view={view}
      onSendRequest={formData => {
        console.log('Reset request sent:', formData);
        setView('confirm_password');
      }}
      onResetPassword={formData => {
        console.log('Password reset:', formData);
        setView('request');
      }}>
      <ResetPassword.Title>
        {view === 'request' ? 'Reset Your Password' : 'Confirm Password'}
      </ResetPassword.Title>
      <ResetPassword.Description>
        {view === 'request' ? 'Enter your email to receive reset instructions' : 'Enter your new password'}
      </ResetPassword.Description>
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField label="Email Address" placeholder="Enter your email" />
        <ResetPassword.Form.PasswordField label="New Password" placeholder="Enter new password" />
        <ResetPassword.Form.ConfirmPasswordField label="Confirm Password" placeholder="Confirm new password" />
        <ResetPassword.Form.ResetPasswordButton>Reset Password</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto>
        <a href="#signin">Back to Sign In</a>
      </ResetPassword.Goto>
    </ResetPassword>
  );
}

Result

Loading...

Advanced Usage

Live Editor

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

Result

Loading...

---

🔧 Props Reference

Main Component Props

The main ResetPassword component inherits all props from the HTML div element (except children and onSubmit which are overridden) and adds:

Prop	Type	Default	Description
view	'request' | 'confirm_password'	Required	Determines which view to display - either email request form or password confirmation form
onSendRequest	(data: T) => void	Required	Callback function triggered when reset request is submitted
onResetPassword	(data: T) => void	Required	Callback function triggered when new password is submitted
resetPasswordTitle	ReactNode	"Reset Password"	Title content for the reset password form
description	ReactNode	"Please enter your email address you registered"	Description text displayed below the title
gotoSigninMessage	ReactNode	Default signin link	Content for the navigation link section
className	string	undefined	Additional CSS class name for styling the form container
direction	enum	"column"	Flex direction for action buttons
alignItems	enum	"stretch"	Alignment of items in the container
gapSize	enum	"S"	Gap between items in the container
children	BlocksOverride	undefined	Custom block components to override default rendering

Sub-Components

The ResetPassword component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

ResetPassword.Title

Prop	Type	Default	Description
children	ReactNode	From context	Title content - overrides errorTitle from context
size	enum	"2XL"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"bold"	Weight of the title
className	string	undefined	Additional CSS class name for styling

ResetPassword.Description

Prop	Type	Default	Description
children	ReactNode	From context	Title content - overrides errorTitle from context
size	enum	"M"	Typography size for the title
type	enum	"paragraph"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"regular"	Weight of the title
className	string	undefined	Additional CSS class name for styling

ResetPassword.Form

Prop	Type	Default	Description
view	'request' | 'confirm_password'	Inherited from parent	Determines which fields to display
onSendRequest	(data: T) => void	Inherited from parent	Callback for email submission
onResetPassword	(data: T) => void	Inherited from parent	Callback for password confirmation
className	string	undefined	Additional CSS class name for styling
children	ReactNode	From context	Custom form content

ResetPassword.Form.EmailField

Prop	Type	Default	Description
name	string	"email"	Field name used for form data
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Email"	Label of the input field
labelWeight	enum	"bold"	Label weight
className	string	undefined	Additional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

ResetPassword.Form.PasswordField

Prop	Type	Default	Description
name	string	"password"	Field name used for form data
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Password"	Label of the input field
labelWeight	enum	"bold"	Label weight
className	string	undefined	Additional CSS class name for styling
showPassword	boolean	undefined	Whether to show password
onShowPasswordClick	function	undefined	Function to handle password visibility toggle

Note: This component additional inherits some common HTML input element props.

ResetPassword.Form.ConfirmPasswordField

Prop	Type	Default	Description
name	string	"confirmPassword"	Field name used for form data
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Confirm Password"	Label of the input field
labelWeight	enum	"bold"	Label weight
className	string	undefined	Additional CSS class name for styling
showPassword	boolean	undefined	Whether to show password
onShowPasswordClick	function	undefined	Function to handle password visibility toggle

Note: This component additional inherits some common HTML input element props.

ResetPassword.Form.ResetPasswordButton

Prop	Type	Default	Description
children	ReactNode	From context	Text to place inside the button
className	string	undefined	Additional CSS class name for styling
fill	enum	"fill"	Button fill style
icon	enum	undefined	Optional icon for the left-hand side of the button
iconColor	enum	undefined	Color for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabled	boolean	false	Whether the button is disabled and cannot be used
onClick	function	undefined	Function to handle button click
size	enum	"M"	Button vertical size
textAlign	enum	"center"	Button icon and text positioning within the button
textColor	enum	"default"	Button text color
textEmphasis	boolean	false	Button text weight
textSize	enum	"M"	Button text size
type	enum	"submit"	Button purpose (affects html type)

Note: This component additional inherits some common HTML button element props.

ResetPassword.Goto

Prop	Type	Default	Description
children	ReactNode	Default signin link	Content for the navigation link section - typically contains an anchor tag
className	string	undefined	Additional CSS class name for styling

---

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

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

// Default form data structure for email request
interface ResetPasswordEmailData {
  email?: string;
}

// Default form data structure for password confirmation
interface ResetPasswordConfirmData {
  password?: string;
  confirmPassword?: string;
}

// Combined form data type
type ResetPasswordFormData = ResetPasswordEmailData | ResetPasswordConfirmData;

// Extend with custom fields
interface CustomResetPasswordFormData extends ResetPasswordFormData {
  customField?: string;
}

const MyResetPasswordForm = () => {
  const handleSendRequest = (formData: ResetPasswordFormData) => {
    console.log('Reset request sent:', formData);
    // Handle email submission
  };

  const handleResetPassword = (formData: ResetPasswordFormData) => {
    console.log('Password reset:', formData);
    // Handle password reset
  };

  return (
    <ResetPassword<CustomResetPasswordFormData>
      view="request"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      resetPasswordTitle="Forgot Your Password?"
      description="Enter your email address and we'll send you reset instructions">
      <ResetPassword.Title>Reset Your Password</ResetPassword.Title>
      <ResetPassword.Description>
        Don't worry, it happens to everyone. Enter your email below.
      </ResetPassword.Description>
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField />
        <ResetPassword.Form.PasswordField />
        <ResetPassword.Form.ConfirmPasswordField />
        <ResetPassword.Form.ResetPasswordButton>Send Reset Link</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto>
        <span>
          Remember your password? <a href="/signin">Sign In</a>
        </span>
      </ResetPassword.Goto>
    </ResetPassword>
  );
};

---

Built with ❤️ using React, TypeScript, and modern web standards.