Forgot Password
Installation
Add the following Soul components
The forgot-password component uses the button, input and form-status components. Make sure you have added them to your project.
Install the following dependencies
npm install @conform-to/zod @conform-to/reactCopy and paste the following code into your project
sections/forgot-password/index.tsx
import { ForgotPasswordAction, ForgotPasswordForm } from './forgot-password-form';export interface ForgotPasswordProps { title?: string; subtitle?: string; action: ForgotPasswordAction; emailLabel?: string; submitLabel?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --forgot-password-font-family: var(--font-family-body); * --forgot-password-title-font-family: var(--font-family-heading); * --forgot-password-title: hsl(var(--foreground)); * --forgot-password-subtitle: hsl(var(--contrast-500)) * } * ``` */export function ForgotPassword({ title = 'Forgot your password?', subtitle = 'Enter the email associated with your account below. We’ll send you instructions to reset your password.', emailLabel, submitLabel, action,}: ForgotPasswordProps) { return ( <div className="@container"> <div className="flex flex-col justify-center gap-y-24 px-3 py-10 @xl:flex-row @xl:px-6 @4xl:py-20 @5xl:px-20"> <div className="flex w-full flex-col @xl:max-w-md @xl:pr-10 @4xl:pr-20"> <header className="font-[family-name:var(--forgot-password-font-family,var(--font-family-body))]"> <h1 className="mb-5 font-[family-name:var(--forgot-password-title-font-family,var(--font-family-heading))] text-4xl font-medium leading-none text-[var(--forgot-password-title,hsl(var(--foreground)))] @xl:text-5xl"> {title} </h1> <p className="mb-10 text-base font-light leading-none text-[var(--forgot-password-subtitle,hsl(var(--contrast-500)))] @xl:text-lg"> {subtitle} </p> </header> <ForgotPasswordForm action={action} emailLabel={emailLabel} submitLabel={submitLabel} /> </div> </div> </div> );}sections/forgot-password/forgot-password-form.tsx
'use client';import { getFormProps, getInputProps, SubmissionResult, useForm } from '@conform-to/react';import { getZodConstraint, parseWithZod } from '@conform-to/zod';import { useActionState } from 'react';import { ReactNode } from 'react';import { useFormStatus } from 'react-dom';import { FormStatus } from '@/vibes/soul/form/form-status';import { Input } from '@/vibes/soul/form/input';import { Button } from '@/vibes/soul/primitives/button';import { schema } from './schema';type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;export type ForgotPasswordAction = Action< { lastResult: SubmissionResult | null; successMessage?: string }, FormData>;export interface ForgotPasswordFormProps { action: ForgotPasswordAction; emailLabel?: string; submitLabel?: string;}export function ForgotPasswordForm({ action, emailLabel = 'Email', submitLabel = 'Reset password',}: ForgotPasswordFormProps) { const [{ lastResult, successMessage }, formAction] = useActionState(action, { lastResult: null }); const [form, fields] = useForm({ lastResult, constraint: getZodConstraint(schema), shouldValidate: 'onBlur', shouldRevalidate: 'onInput', onValidate({ formData }) { return parseWithZod(formData, { schema }); }, }); return ( <form {...getFormProps(form)} action={formAction} className="flex flex-grow flex-col gap-5"> <Input {...getInputProps(fields.email, { type: 'text' })} errors={fields.email.errors} key={fields.email.id} label={emailLabel} /> <SubmitButton>{submitLabel}</SubmitButton> {form.errors?.map((error, index) => ( <FormStatus key={index} type="error"> {error} </FormStatus> ))} {form.status === 'success' && successMessage != null && ( <FormStatus>{successMessage}</FormStatus> )} </form> );}function SubmitButton({ children }: { children: ReactNode }) { const { pending } = useFormStatus(); return ( <Button className="mt-auto w-full" loading={pending} type="submit" variant="secondary"> {children} </Button> );}sections/forgot-password/schema.ts
import { z } from 'zod';export const schema = z.object({ email: z.string().email({ message: 'Please enter a valid email.' }).trim(),});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 |
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: hsl(var(--foreground)); --forgot-password-subtitle: hsl(var(--contrast-500));}