✨ Add react-email for email templates (#2421)

packages/react-email/emails/new_account.tsx

@@ -0,0 +1,51 @@
+import { Text } from "@react-email/components"
+import { LinkButton } from "../ui/Button"
+import { Callout, Detail } from "../ui/Callout"
+import { Heading } from "../ui/Heading"
+import { Layout } from "../ui/Layout"
+import { Link } from "../ui/Link"
+
+type NewAccountProps = {
+  project_name: string
+  username: string
+  password: string
+  link: string
+}
+
+export default function NewAccount({
+  project_name = "{{ project_name }}",
+  username = "{{ username }}",
+  password = "{{ password }}",
+  link = "{{ link }}",
+}: NewAccountProps) {
+  return (
+    <Layout
+      title={`${project_name} - New account`}
+      preview={`Your ${project_name} account is ready`}
+      project_name={project_name}
+    >
+      <Heading>Welcome to {project_name}!</Heading>
+      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
+      <Text className="text-[15px] leading-7 text-body">
+        Your account has been successfully created and is ready to use. These
+        are your credentials:
+      </Text>
+      <Callout>
+        <Detail label="Username" value={username} />
+        <Detail label="Password" value={password} />
+      </Callout>
+      <Text className="text-[15px] leading-7 text-body">
+        Get started by signing in to your dashboard:
+      </Text>
+      <LinkButton href={link}>Go to Dashboard</LinkButton>
+      <Text className="text-sm leading-6 text-muted">
+        Or copy and paste this link into your browser:
+        <br />
+        <Link href={link}>{link}</Link>
+      </Text>
+      <Text className="text-sm leading-6 text-muted">
+        For security reasons, change your password after your first sign in.
+      </Text>
+    </Layout>
+  )
+}

packages/react-email/emails/reset_password.tsx

@@ -0,0 +1,47 @@
+import { Text } from "@react-email/components"
+import { LinkButton } from "../ui/Button"
+import { Heading } from "../ui/Heading"
+import { Layout } from "../ui/Layout"
+import { Link } from "../ui/Link"
+
+type ResetPasswordProps = {
+  project_name: string
+  username: string
+  link: string
+  valid_hours: string
+}
+
+export default function ResetPassword({
+  project_name = "{{ project_name }}",
+  username = "{{ username }}",
+  link = "{{ link }}",
+  valid_hours = "{{ valid_hours }}",
+}: ResetPasswordProps) {
+  return (
+    <Layout
+      title={`${project_name} - Password recovery`}
+      preview={`Reset your ${project_name} password`}
+      project_name={project_name}
+    >
+      <Heading>Reset your password</Heading>
+      <Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
+      <Text className="text-[15px] leading-7 text-body">
+        We've received a request to reset the password for your {project_name}{" "}
+        account. Choose a new one by clicking the button below:
+      </Text>
+      <LinkButton href={link}>Reset password</LinkButton>
+      <Text className="text-sm leading-6 text-muted">
+        Or copy and paste this link into your browser:
+        <br />
+        <Link href={link}>{link}</Link>
+      </Text>
+      <Text className="text-sm leading-6 text-muted">
+        This link will expire in {valid_hours} hours.
+      </Text>
+      <Text className="text-sm leading-6 text-muted">
+        If you didn't request a password recovery, you can safely ignore this
+        email.
+      </Text>
+    </Layout>
+  )
+}

packages/react-email/emails/test_email.tsx

@@ -0,0 +1,35 @@
+import { Text } from "@react-email/components"
+import { Callout, Detail } from "../ui/Callout"
+import { Heading } from "../ui/Heading"
+import { Layout } from "../ui/Layout"
+
+type TestEmailProps = {
+  project_name: string
+  email: string
+}
+
+export default function TestEmail({
+  project_name = "{{ project_name }}",
+  email = "{{ email }}",
+}: TestEmailProps) {
+  return (
+    <Layout
+      title={`${project_name} - Test email`}
+      preview={`${project_name} email delivery is working`}
+      project_name={project_name}
+    >
+      <Heading>Test email</Heading>
+      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
+      <Text className="text-[15px] leading-7 text-body">
+        This is a test email from {project_name}. If you're reading it, email
+        delivery is configured correctly.
+      </Text>
+      <Callout>
+        <Detail label="Sent to" value={email} />
+      </Callout>
+      <Text className="text-sm leading-6 text-muted">
+        If you weren't expecting this email, you can safely ignore it.
+      </Text>
+    </Layout>
+  )
+}