Forgot Password Form

1'use client'
2 
3import type * as React from 'react'
4 
5import { Button } from '@/components/button'
6import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/card'
7import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/field'
8import { Input } from '@/components/input'
9import { Link } from '@/components/link'
10import { cn } from '@/lib/utils'
11 
12/**
13 * ForgotPasswordForm — the password-reset request step that pairs with the
14 * "Forgot your password?" link in LoginForm.
15 *
16 * A composed pattern (Card + Field + Input + Button), published as a worked
17 * example: copy the source and wire the single email field to your own reset
18 * handler rather than configuring it through props.
19 *
20 * Single-field by design. The flow is intentionally minimal — collect the
21 * email, send the reset link, and (for account-enumeration safety) show the
22 * same confirmation whether or not the address is registered.
23 */
24export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
25  return (
26    <div className={cn('flex flex-col gap-6', className)} {...props}>
27      <Card className='w-full'>
28        <CardHeader>
29          <CardTitle>Forgot your password?</CardTitle>
30          <CardDescription>
31            Enter the email address for your account and we&apos;ll send you a link to reset your
32            password.
33          </CardDescription>
34        </CardHeader>
35        <CardContent>
36          <form>
37            <FieldGroup>
38              {/* No htmlFor/id wiring: the Field associates the label with the
39               * control automatically (Base UI generates the id per instance). */}
40              <Field>
41                <FieldLabel>Email</FieldLabel>
42                <Input type='email' autoComplete='email' placeholder='m@example.com' required />
43              </Field>
44              <Field>
45                <Button type='submit'>Send reset link</Button>
46              </Field>
47              <Field>
48                <FieldDescription className='text-center'>
49                  Remembered your password? <Link href='#'>Back to login</Link>
50                </FieldDescription>
51              </Field>
52            </FieldGroup>
53          </form>
54        </CardContent>
55      </Card>
56    </div>
57  )
58}