feat: add reset password email template

2025-11-12 15:53:02 +10:00 · 2023-09-18 11:49:37 +00:00
parent ca165c8141
commit 8c12789c03
3 changed files with 1474 additions and 26 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/packages/email/template-components/template-reset-password.tsx
+++ b/packages/email/template-components/template-reset-password.tsx
@ -0,0 +1,43 @@
+import { Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateResetPasswordProps {
+  inviterName: string;
+  inviterEmail: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          Password updated!
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Your password has been updated.
+        </Text>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateResetPassword;
--- a/packages/email/templates/reset-password.tsx
+++ b/packages/email/templates/reset-password.tsx
@ -0,0 +1,103 @@
+import {
+  Body,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import config from '@documenso/tailwind-config';
+
+import TemplateFooter from '../template-components/template-footer';
+import {
+  TemplateResetPassword,
+  TemplateResetPasswordProps,
+} from '../template-components/template-reset-password';
+
+export type DocumentResetPasswordTemplateProps = Partial<TemplateResetPasswordProps>;
+
+export const DocumentResetPasswordTemplate = ({
+  inviterName = 'Lucas Smith',
+  inviterEmail = 'lucas@documenso.com',
+
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentResetPasswordTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateResetPassword
+                  inviterName={inviterName}
+                  inviterEmail={inviterEmail}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <Container className="mx-auto mt-12 max-w-xl">
+              <Section>
+                <Text className="my-4 text-base font-semibold">
+                  Hi, {inviterName}{' '}
+                  <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
+                    ({inviterEmail})
+                  </Link>
+                </Text>
+
+                <Text className="mt-2 text-base text-slate-400">
+                  We've changed your password as you asked. You can now sign in with your new
+                  password.
+                </Text>
+                <Text className="mt-2 text-base text-slate-400">
+                  Didn't request a password change? We are here to help you secure your account,
+                  just{' '}
+                  <Link className="text-documenso-700 font-normal" href="mailto:hi@documenso.com">
+                    contact us.
+                  </Link>
+                </Text>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentResetPasswordTemplate;