Skip to main content

Reset Password Block

The ResetPassword Component is a fully customizable and accessible reset password form built with React, TypeScript, and MUI. 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@0.2.0

πŸ“– Usage​

import {ResetPassword} from '@nodeblocks/frontend-reset-password-block';
Live Editor
function SimpleResetPasswordRequest() {
  const handleSendRequest = (data) => {
    console.log('Password reset request sent for:', data);
  };

  const handleResetPassword = (data) => {
    console.log('Password reset:', data);
  };

  return (
    <ResetPassword
      view="request"
      resetPasswordTitle="Reset Password"
      description="Enter your email to receive a password reset link"
      gotoSigninMessage="Remember your password? Sign in"
      onSendRequest={handleSendRequest}
      onResetPassword={handleResetPassword}
      sx={{maxWidth: 400, mx: 'auto', p: 3}}
    >
      <ResetPassword.Title />
      <ResetPassword.Description />
      <ResetPassword.Form>
        <ResetPassword.Form.EmailField />
        <ResetPassword.Form.ResetPasswordButton>Send Reset Link</ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto />
    </ResetPassword>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
view'request' | 'confirm_password'RequiredDetermines which view to display - either email request form or password confirmation form
onSendRequest(data: T) => voidRequiredCallback function triggered when reset request is submitted
onResetPassword(data: T) => voidRequiredCallback function triggered when new password is submitted
resetPasswordTitleReactNode"Reset Password"Title content for the reset password form
descriptionReactNode"Please enter your email address you registered"Description text displayed below the title
gotoSigninMessageReactNodeDefault signin linkContent for the navigation link section
showPasswordbooleanfalseControls password field visibility (managed internally by default)
onShowPasswordClick(show: boolean) => voidInternal handlerCallback for password visibility toggle
classNamestringundefinedAdditional CSS class name for styling the form container
sxSxPropsundefinedMUI sx prop for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component extends MUI StackProps (excluding children and onSubmit). Default spacing is 4, with py: 6 and px: 5 padding.

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​

PropTypeDefaultDescription
resetPasswordTitleReactNodeFrom contextTitle content
childrenReactNode"Reset Password"Custom title content (overrides resetPasswordTitle)
classNamestringundefinedAdditional CSS class name for styling
variantstring"h4"MUI Typography variant
componentstring"h1"HTML element to render
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI TypographyProps.

ResetPassword.Description​

PropTypeDefaultDescription
descriptionReactNodeFrom contextDescription content
childrenReactNode"Please enter your email address you registered"Custom description content
classNamestringundefinedAdditional CSS class name for styling
variantstring"body2"MUI Typography variant
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI TypographyProps.

ResetPassword.Form​

PropTypeDefaultDescription
view'request' | 'confirm_password'From contextDetermines which fields to display
onSendRequest(data: T) => voidFrom contextCallback for email submission
onResetPassword(data: T) => voidFrom contextCallback for password confirmation
classNamestringundefinedAdditional CSS class name for styling
childrenReactNodeDefault form fieldsCustom form content

Note: This component extends MUI StackProps<'form'> with component="form". Default spacing is 4.

ResetPassword.Form.EmailField​

PropTypeDefaultDescription
view'request' | 'confirm_password'From contextOnly renders when view === 'request'
namestring"email"Field name used for form data
labelstring"Email"Label of the input field
placeholderstring"Please enter your email"Placeholder text
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps. Only visible in request view.

ResetPassword.Form.PasswordField​

PropTypeDefaultDescription
view'request' | 'confirm_password'From contextOnly renders when view === 'confirm_password'
showPasswordbooleanFrom contextControls password visibility
onShowPasswordClick(show: boolean) => voidFrom contextToggle password visibility
namestring"password"Field name used for form data
labelstring"Password"Label of the input field
placeholderstring"Please enter your new password"Placeholder text
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps. Only visible in confirm_password view. Includes visibility toggle icon when showPassword and onShowPasswordClick are provided.

ResetPassword.Form.ConfirmPasswordField​

PropTypeDefaultDescription
view'request' | 'confirm_password'From contextOnly renders when view === 'confirm_password'
showPasswordbooleanFrom contextControls password visibility
onShowPasswordClick(show: boolean) => voidFrom contextToggle password visibility
namestring"confirmPassword"Field name used for form data
labelstring"Confirm Password"Label of the input field
placeholderstring"Please confirm your password"Placeholder text
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps. Only visible in confirm_password view. Includes visibility toggle icon when showPassword and onShowPasswordClick are provided.

ResetPassword.Form.ResetPasswordButton​

PropTypeDefaultDescription
childrenReactNode"Reset Password"Button text
variantstring"contained"MUI Button variant
fullWidthbooleantrueWhether button takes full width
typestring"submit"HTML button type
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI ButtonProps.

ResetPassword.Goto​

PropTypeDefaultDescription
gotoSigninMessageReactNodeFrom contextCustom navigation message
childrenReactNodeLink to /auth/loginCustom content for the navigation section
classNamestringundefinedAdditional CSS class name for styling
variantstring"body2"MUI Typography variant
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI TypographyProps.

🎨 Configuration examples​

Custom Title Styling​

<ResetPassword.Title
  variant="h3"
  sx={{
    color: 'primary.main',
    fontWeight: 'bold',
  }}
>
  Forgot Your Password?
</ResetPassword.Title>

Custom Field Labels​

<ResetPassword.Form>
  <ResetPassword.Form.EmailField 
    label="Your Email Address" 
    placeholder="name@example.com"
    helperText="We'll send a reset link to this address"
  />
  <ResetPassword.Form.PasswordField
    label="Create New Password"
    placeholder="At least 8 characters"
  />
  <ResetPassword.Form.ConfirmPasswordField
    label="Confirm New Password"
    placeholder="Re-enter your password"
  />
  <ResetPassword.Form.ResetPasswordButton>
    Send Reset Link
  </ResetPassword.Form.ResetPasswordButton>
</ResetPassword.Form>

Block Override Pattern​

<ResetPassword view="request" onSendRequest={handleSend} onResetPassword={handleReset}>
  {({ defaultBlocks, defaultBlockOrder }) => ({
    blocks: {
      ...defaultBlocks,
      // Add custom security notice
      securityNote: (
        <Alert severity="info" sx={{ textAlign: 'center' }}>
          For your security, the reset link expires in 24 hours
        </Alert>
      ),
    },
    blockOrder: ['title', 'description', 'securityNote', 'form', 'goto'],
  })}
</ResetPassword>
<ResetPassword.Goto>
  <span>
    Remember your password?{' '}
    <Link href="#login" sx={{ fontWeight: 'medium' }}>
      Back to Sign In
    </Link>
  </span>
</ResetPassword.Goto>

Custom Styling​

function CustomStyledResetPassword() {
  const handleSendRequest = (data) => {
    console.log('Request:', data);
  };

  const handleResetPassword = (data) => {
    console.log('Reset:', data);
  };

  return (
    <ResetPassword
      view="request"
      resetPasswordTitle="Forgot Password?"
      description="No worries, we'll send you reset instructions"
      gotoSigninMessage="Back to sign in"
      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',
            },
          }}
        >
          Send Reset Link
        </ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      <ResetPassword.Goto
        sx={{
          mt: 3,
          textAlign: 'center',
          color: 'grey.400',
          '& a': {
            color: 'primary.light',
          },
        }}
      />
    </ResetPassword>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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('Sending reset link:', data);
    // Simulate API call then switch to confirm view
    setTimeout(() => setView('confirm_password'), 1000);
  };

  const handleResetPassword = (data: ResetPasswordFormData): void => {
    console.log('Password reset:', data);
    // API call to reset password
  };

  return (
    <ResetPassword
      view={view}
      resetPasswordTitle={view === 'request' ? 'Reset Password' : 'Create New Password'}
      description={
        view === 'request' ? 'Enter your email to receive a reset link' : 'Enter and confirm your new password'
      }
      gotoSigninMessage="Remember your password? Sign in"
      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' ? 'Send Reset Link' : 'Reset Password'}
        </ResetPassword.Form.ResetPasswordButton>
      </ResetPassword.Form>
      {view === 'request' && <ResetPassword.Goto />}
    </ResetPassword>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack component as its base, providing flexible layout options
  • Default spacing is 4 with padding py: 6 and px: 5
  • The view prop controls which fields are displayed:
    • 'request': Shows only the email field
    • 'confirm_password': Shows password and confirm password fields
  • Form submission is handled internally via onSubmit event
  • Password visibility toggle is built-in when showPassword context is available
  • Password fields include MUI's Visibility/VisibilityOff icons for toggle
  • Default blocks are: title, description, form, goto
  • CSS classes follow BEM-style naming: nbb-reset-password, nbb-reset-password-title, etc.
  • The component centers itself with margin: 'auto' and has minWidth: { lg: 496 } on large screens
  • Default "Back to Sign In" link points to /auth/login

Built with ❀️ using React, TypeScript, and MUI.