Reset Password Email

1import type { ReactNode } from "react"
2import {
3  Body,
4  Button,
5  Container,
6  Head,
7  Heading,
8  Hr,
9  Html,
10  Img,
11  Link,
12  Preview,
13  pixelBasedPreset,
14  Section,
15  Tailwind,
16  Text
17} from "react-email"
18 
19import { cn } from "../../../lib/utils"
20import {
21  type EmailClassNames,
22  type EmailColors,
23  EmailStyles
24} from "./email-styles"
25 
26const resetPasswordEmailLocalization = {
27  RESET_YOUR_PASSWORD: "Reset your password",
28  LOGO: "Logo",
29  WE_RECEIVED_REQUEST_TO_RESET_PASSWORD:
30    "We received a request to reset the password for your {appName} account {email}.",
31  RESET_PASSWORD: "Reset password",
32  OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
33  THIS_LINK_EXPIRES_IN_MINUTES:
34    "This link expires in {expirationMinutes} minutes.",
35  EMAIL_SENT_BY: "Email sent by {appName}.",
36  IF_YOU_DIDNT_REQUEST_PASSWORD_RESET:
37    "If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.",
38  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
39}
40 
41/**
42 * Localization strings for the ResetPasswordEmail component.
43 *
44 * Contains all text content used in the password reset email template.
45 */
46export type ResetPasswordEmailLocalization =
47  typeof resetPasswordEmailLocalization
48 
49/**
50 * Props for the ResetPasswordEmail component.
51 */
52export interface ResetPasswordEmailProps {
53  /** Password reset URL that users must click to reset their password */
54  url: string
55  /** Email address of the user requesting password reset */
56  email?: string
57  /** Name of the application sending the email */
58  appName?: string
59  /** Number of minutes until the reset link expires */
60  expirationMinutes?: number
61  /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
62  logoURL?: string | { light: string; dark: string }
63  /** Custom CSS class names for styling specific parts of the email */
64  classNames?: EmailClassNames
65  /** Custom color scheme for light and dark modes */
66  colors?: EmailColors
67  /** Whether to show the "Powered by better-auth" footer */
68  poweredBy?: boolean
69  /** Whether to enable dark mode support */
70  darkMode?: boolean
71  /** Additional React nodes to inject into the email head */
72  head?: ReactNode
73  /**
74   * Localization overrides for customizing email text
75   * @remarks `ResetPasswordEmailLocalization`
76   */
77  localization?: Partial<ResetPasswordEmailLocalization>
78}
79 
80/**
81 * Email template component that sends password reset links to users.
82 *
83// … truncated