Reset Password
Installation
Run the following command
npx vibes@latest add reset-passwordUsage
import { ResetPassword } from '@/vibes/soul/sections/reset-password';import { SubmissionResult } from '@conform-to/react';import { parseWithZod } from '@conform-to/zod';import { schema } from '@/vibes/soul/sections/reset-password/schema';function Usage() { return <ResetPassword action={resetPasswordAction} />;}async function resetPasswordAction( lastResult: { 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({ resetForm: true }), successMessage: 'Password updated' };}API Reference
| Prop | Type | Default |
|---|---|---|
title | string | 'Reset password' |
subtitle | string | 'Enter a new password below to reset your account password.' |
action* | ResetPasswordAction | |
submitLabel | string | |
newPasswordLabel | string | |
confirmPasswordLabel | string | |
newPasswordPlaceholder | string | 'New password' |
confirmPasswordPlaceholder | string | 'Confirm password' |
ResetPasswordAction
type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;export type ResetPasswordAction = 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 making a network request:
export async function resetPasswordAction( lastResult: { 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({ resetForm: true }), successMessage: 'Password updated' };}CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --reset-password-font-family: var(--font-family-body); --reset-password-title-font-family: var(--font-family-heading); --reset-password-title: var(--foreground); --reset-password-subtitle: var(--contrast-500);}