VIBES: Stunning React components for commerce & marketing

Installation

Run the following command

npx vibes@latest add forgot-password

Usage

import { ForgotPassword } from '@/vibes/soul/sections/forgot-password';import { schema } from '@/vibes/soul/sections/forgot-password/schema';import { SubmissionResult } from '@conform-to/react';import { parseWithZod } from '@conform-to/zod';function Usage() {  return <ForgotPassword action={forgotPasswordAction} />;}async function forgotPasswordAction(state: { lastResult: SubmissionResult | null; successMessage?: string },formData: FormData,): Promise<{ lastResult: SubmissionResult | null; successMessage?: string }> {  'use server';  const submission = parseWithZod(formData, { schema });  if (submission.status !== 'success') {      return { lastResult: submission.reply({ formErrors: ['Boom!'] }) };  }  // Simulate a network request  await new Promise((resolve) => setTimeout(resolve, 1000));  return {      lastResult: submission.reply(),      successMessage: 'Check your email for a reset link',  };}const schema = z.object({  email: z.string().email({ message: 'Please enter a valid email.' }).trim(),});

API Reference

ForgotPasswordProps

Prop	Type	Default
`title`	`string`	`'Forgot your password?'`
`subtitle`	`string`	`'Enter the email associated with your account below. We'll send you instructions to reset your password.'`
`action*`	`ForgotPasswordAction`
`emailLabel`	`string`
`submitLabel`	`string`
`placeholder`	`string`	`'Enter your email'`

ForgotPasswordAction

type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;export type ForgotPasswordAction = Action<  { lastResult: SubmissionResult | null; successMessage?: string },  FormData>;

This component uses Confom to handle form submissions. Refer to the Conform docs for more details.

Here's an example of an action function that does validation and simulates sending an email:

import { schema } from '@/vibes/soul/sections/forgot-password/schema';import { SubmissionResult } from '@conform-to/react';import { parseWithZod } from '@conform-to/zod';async function forgotPasswordAction(  state: { lastResult: SubmissionResult | null; successMessage?: string },  formData: FormData,): Promise<{ lastResult: SubmissionResult | null; successMessage?: string }> {  'use server';  const submission = parseWithZod(formData, { schema });  if (submission.status !== 'success') {    return { lastResult: submission.reply({ formErrors: ['Boom!'] }) };  }  // Simulate sending email  await new Promise((resolve) => setTimeout(resolve, 1000));  return {    lastResult: submission.reply(),    successMessage: 'Check your email for a reset link',  };}

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --forgot-password-font-family: var(--font-family-body);  --forgot-password-title-font-family: var(--font-family-heading);  --forgot-password-title: var(--foreground);  --forgot-password-subtitle: var(--contrast-500);}

Footer

Header