Skip to main content

ForgotPassword

A self-contained password reset request component. It renders an email form, calls the Propeller API to trigger a password reset email, and displays a confirmation message on success. The component manages its own loading, error, and success states internally.

Usage​

Basic​

import ForgotPassword from '@/components/propeller/ForgotPassword';
import { graphqlClient } from '@/lib/api';

export default function ForgotPasswordPage() {
  return (
    <div className="max-w-md mx-auto mt-12">
      <ForgotPassword graphqlClient={graphqlClient} />
    </div>
  );
}

Custom labels and callbacks​

import ForgotPassword from '@/components/propeller/ForgotPassword';
import { graphqlClient } from '@/lib/api';

<ForgotPassword
  graphqlClient={graphqlClient}
  title="Reset your password"
  subtitle="Enter your email and we'll send you a reset link."
  buttonText="Send Reset Link"
  responseMessage="Check your inbox for a reset link."
  labels={{
    email: 'Email address',
    emailPlaceholder: 'you@company.com',
  }}
  beforeForgotPassword={() => console.log('Requesting reset...')}
  afterForgotPassword={(result) => {
    if (result) {
      analytics.track('password_reset_requested');
    }
  }}
/>

Inside a modal or dialog​

import ForgotPassword from '@/components/propeller/ForgotPassword';
import { graphqlClient } from '@/lib/api';

<Dialog>
  <ForgotPassword
    graphqlClient={graphqlClient}
    title="Forgot password?"
    afterForgotPassword={(result) => {
      if (result) closeDialog();
    }}
  />
</Dialog>

Localized (Dutch)​

<ForgotPassword
  graphqlClient={graphqlClient}
  title="Wachtwoord vergeten?"
  subtitle="Vul je e-mailadres in om een resetlink te ontvangen."
  buttonText="Verstuur"
  responseMessage="Als er een account bestaat met dit e-mailadres, ontvang je binnenkort een link om je wachtwoord te resetten."
  labels={{
    email: 'E-mailadres',
    emailPlaceholder: 'naam@voorbeeld.nl',
  }}
/>

Configuration​

Core​

PropTypeRequiredDefaultDescription
graphqlClientGraphQLClientYes--Propeller SDK GraphQL client instance used to execute the password reset mutation.

Display​

PropTypeRequiredDefaultDescription
titlestringNo"Forgot password?"Heading displayed above the form. Set to empty string to hide.
subtitlestringNo""Secondary text below the title. Hidden when empty.
buttonTextstringNo"Reset"Label for the submit button.
responseMessagestringNo"If an account exists with this email, you will receive a password reset link shortly."Confirmation message shown after successful submission.

Labels​

PropTypeRequiredDefaultDescription
labelsRecord<string, string>No{}Custom labels for form fields.

Callbacks​

PropTypeRequiredDefaultDescription
beforeForgotPassword() => voidNo--Fired before the API call starts. Use for analytics, loading indicators, or validation.
afterForgotPassword(result: boolean) => voidNo--Fired after the API call completes. Receives true on success, false on error.

Labels​

Available label keys:

KeyDefaultDescription
email"Email"Label above the email input field.
emailPlaceholder"name@example.com"Placeholder text inside the email input.

Behavior​

The component transitions through four visual states:

  1. Form -- Initial state. Renders an email input and a submit button.
  2. Loading -- The submit button is disabled and displays a spinner while the API call is in progress. The email input is also disabled to prevent edits.
  3. Success -- After a successful submission, the form is replaced with a green checkmark icon and the responseMessage text. This state is final; the form does not revert.
  4. Error -- On API failure, a red error banner appears above the submit button with a descriptive message. The form remains interactive so the user can correct the email and retry.

Key details:

  • The component always shows the success message after a successful call, regardless of whether the email actually exists in the system. This is a security best practice to prevent email enumeration.
  • Multiple rapid submissions are prevented: handleSubmit returns early if loading is already true.
  • The beforeForgotPassword callback fires before the loading state is set. The afterForgotPassword callback fires after the API response is received, with the result.

GraphQL Mutation​

Internally, UserService.sendPasswordResetEmail() executes the following GraphQL mutation:

mutation triggerPasswordSendResetEmailEvent($input: PasswordRecoveryLinkInput!) {
  triggerPasswordSendResetEmailEvent(input: $input)
}

The PasswordRecoveryLinkInput accepted by the API:

input PasswordRecoveryLinkInput {
  email: String!
  redirectUrl: String
  language: String
}

SDK Services​

The component uses UserService from propeller-sdk-v2 to trigger the password reset email.

UserService.sendPasswordResetEmail()​

import { UserService, GraphQLClient } from 'propeller-sdk-v2';

const userService = new UserService(graphqlClient);
const result = await userService.sendPasswordResetEmail({
  email: 'user@example.com',
});
// result: boolean (true on success)

The method accepts a PasswordResetInput object:

interface PasswordResetInput {
  /** The email address of the user */
  email: string;
  /** URL the user is redirected to after resetting their password */
  redirectUrl?: string;
  /** Text for the clickable reset link in the email */
  linkText?: string;
  /** Custom email subject line */
  subject?: string;
  /** Language code for the email template */
  language?: string;
}

The component currently only passes email. The optional fields (redirectUrl, language, etc.) can be exposed as additional props if needed.