feat: document 2fa

2025-11-15 17:21:41 +10:00 · 2025-07-22 14:08:03 +00:00
parent 9ea56a77ff
commit 43810c4357
29 changed files with 802 additions and 157 deletions
--- a/packages/email/template-components/template-verification-code.tsx
+++ b/packages/email/template-components/template-verification-code.tsx
@ -0,0 +1,43 @@
+import { Trans } from '@lingui/react/macro';
+
+import { Section, Text } from '../components';
+import { TemplateDocumentImage } from './template-document-image';
+
+export type TemplateVerificationCodeProps = {
+  verificationCode: string;
+  assetBaseUrl: string;
+};
+
+export const TemplateVerificationCode = ({
+  verificationCode,
+  assetBaseUrl,
+}: TemplateVerificationCodeProps) => {
+  return (
+    <>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+      <Section className="flex-row items-center justify-center">
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          <Trans>Your verification code</Trans>
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          <Trans>Please use the code below to verify your identity for document signing.</Trans>
+        </Text>
+
+        <Text className="my-6 text-center text-3xl font-bold tracking-widest">
+          {verificationCode}
+        </Text>
+
+        <Text className="my-1 text-center text-sm text-slate-400">
+          <Trans>
+            If you did not request this code, you can ignore this email. The code will expire after
+            10 minutes.
+          </Trans>
+        </Text>
+      </Section>
+    </>
+  );
+};
+
+export default TemplateVerificationCode;
--- a/packages/email/templates/verification-code.tsx
+++ b/packages/email/templates/verification-code.tsx
@ -0,0 +1,62 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
+import { useBranding } from '../providers/branding';
+import { TemplateFooter } from '../template-components/template-footer';
+import type { TemplateVerificationCodeProps } from '../template-components/template-verification-code';
+import { TemplateVerificationCode } from '../template-components/template-verification-code';
+
+export type VerificationCodeTemplateProps = Partial<TemplateVerificationCodeProps>;
+
+export const VerificationCodeTemplate = ({
+  verificationCode = '000000',
+  assetBaseUrl = 'http://localhost:3002',
+}: VerificationCodeTemplateProps) => {
+  const { _ } = useLingui();
+  const branding = useBranding();
+
+  const previewText = msg`Your verification code for document signing`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{_(previewText)}</Preview>
+
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+            <Section className="p-2">
+              {branding.brandingEnabled && branding.brandingLogo ? (
+                <Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6" />
+              ) : (
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+              )}
+
+              <TemplateVerificationCode
+                verificationCode={verificationCode}
+                assetBaseUrl={assetBaseUrl}
+              />
+            </Section>
+          </Container>
+
+          <Hr className="mx-auto mt-12 max-w-xl" />
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter isDocument={false} />
+          </Container>
+        </Section>
+      </Body>
+    </Html>
+  );
+};
+
+export default VerificationCodeTemplate;