Skip to content

Add Email Verification email #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
datum-email-designer wants to merge 2 commits into from
Closed

Add Email Verification email #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
486fa10
Add Email Verification email template
datum-email-designer[bot] Jul 18, 2026
2e29ec4
chore: update template screenshots
datum-email-designer[bot] Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/new-template-request.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ body:
label: Which existing email is this most similar to in look and feel?
description: Used as a structural reference — layout, tone, and components will follow this one.
options:
- Email Verification
- Platform Invitation
- User Invitation
- User Approved
Expand Down
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ Screenshots below are committed alongside each template change, so what you see
<img src="./screenshots/user-welcome.png" width="480" />
</details>

<details>
<summary><strong>Email Verification</strong> — a quick nudge to confirm an email address and finish setting up a new Datum account <em>(click to preview)</em></summary>
<img src="./screenshots/email-verification.png" width="480" />
</details>

<details>
<summary><strong>Suspicious Sign-in</strong> — a quiet tap on the shoulder when we spot a sign-in from somewhere unfamiliar <em>(click to preview)</em></summary>
<img src="./screenshots/user-suspicious.png" width="480" />
Expand Down
221 changes: 221 additions & 0 deletions config/email-templates/emailverification-emailtemplate.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
apiVersion: notification.miloapis.com/v1alpha1
kind: EmailTemplate
metadata:
name: emailtemplates.notification.miloapis.com-emailverificationemailtemplate
spec:
subject: "Verify your email address"
htmlBody: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<link
rel="preload"
as="image"
href="https://www.datum.net/download/eng/logo-datum-light.png" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<title>Verify your email address</title>
</head>
<body
dir="ltr"
lang="en"
style="background-color:rgb(255,255,255);margin-top:0;margin-bottom:0;margin-right:0;margin-left:0">
<!--$--><!--html--><!--head-->
<div
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
data-skip-in-text="true">
Verify your email address
<div>
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
</div>
</div>
<!--body-->
<table
border="0"
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
align="center">
<tbody>
<tr>
<td
dir="ltr"
lang="en"
style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:rgb(12,29,49)'>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="max-width:570px;margin-right:auto;margin-left:auto;margin-bottom:80px;margin-top:80px;border-radius:0.5rem;border-style:solid;border-width:1px;border-color:rgb(232,231,228);background-color:rgb(255,255,255)">
<tbody>
<tr style="width:100%">
<td
style="padding-bottom:40px;padding-top:40px;padding-right:48px;padding-left:48px">
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
class="">
<tbody>
<tr>
<td>
<img
alt="Datum"
height="70"
src="https://www.datum.net/download/eng/logo-datum-light.png"
style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0" />
<hr
style="width:100%;border:none;border-color:rgb(232,231,228);border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-top:38px;margin-bottom:0;display:block;border-style:solid;border-width:1px" />
</td>
</tr>
</tbody>
</table>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="margin-bottom:40px;margin-top:40px">
<tbody>
<tr>
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation">
<tbody style="width:100%">
<tr style="width:100%">
<p
style="font-size:17px;line-height:24px;margin-top:0;margin-bottom:22px;font-weight:500">
Hi
<!-- -->{{.name}}<!-- -->,
</p>
<p
style="font-size:17px;line-height:24px;margin-top:0;margin-bottom:22px;font-weight:400">
Please confirm your email address to finish
setting up your Datum account. This link
expires in 24 hours.
</p>
<a
href="{{.verifyUrl}}"
style="line-height:20px;text-decoration:none;display:block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;font-weight:600;text-align:center;text-decoration-line:none;border-style:solid;border-width:1px;background-color:rgb(191,149,149);color:rgb(255,255,255);border-color:rgb(191,149,149);padding-right:24px;padding-left:24px;padding-bottom:14px;padding-top:14px;font-size:16px;margin-top:36px;margin-bottom:32px"
target="_blank"
><span
><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:21" hidden>&#8202;&#8202;&#8202;</i><![endif]--></span
><span
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:10.5px"
>Verify Email</span
><span
><!--[if mso]><i style="mso-font-width:400%" hidden>&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span
></a
>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
class="">
<tbody>
<tr>
<td>
<hr
style="width:100%;border:none;border-color:rgb(232,231,228);border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:40px;margin-top:0;display:block;border-style:solid;border-width:1px" />
<p
style="font-size:14px;line-height:20px;font-weight:400;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">
Learn more about how Datum is connecting
infrastructure for AI at<!-- -->
<a
href="https://datum.net"
style="color:rgb(191,149,149);text-decoration-line:underline"
target="_blank"
>datum.net</a
>
</p>
<p
style="font-size:14px;line-height:20px;margin:0;margin-top:24px;margin-bottom:24px;margin-left:0;margin-right:0">
<a
href="https://www.datum.net/legal/terms"
style="color:rgb(191,149,149);text-decoration-line:underline"
target="_blank"
>Terms of Service</a
>   |   <a
href="https://www.datum.net/legal/privacy"
style="color:rgb(191,149,149);text-decoration-line:underline"
target="_blank"
>Privacy Policy</a
>   |   <a
href="https://www.datum.net/legal/aup"
style="color:rgb(191,149,149);text-decoration-line:underline"
target="_blank"
>Acceptable Use Policy</a
>
</p>
<p
style="font-size:14px;line-height:20px;margin:0;font-weight:400;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">
Datum Technology Inc. <br />120 Broadway, 26th
Floor <br />New York, NY 10271
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/$-->
</body>
</html>


textBody: |
----------------------------------------

Hi {{.name}},

Please confirm your email address to finish setting up your Datum account. This link expires in 24 hours.

Verify Email {{.verifyUrl}}

----------------------------------------

Learn more about how Datum is connecting infrastructure for AI at datum.net https://datum.net

Terms of Service https://www.datum.net/legal/terms   |   Privacy Policy https://www.datum.net/legal/privacy   |   Acceptable Use Policy https://www.datum.net/legal/aup

Datum Technology Inc.
120 Broadway, 26th Floor
New York, NY 10271

variables:
- name: "name"
required: true
type: "string"
- name: "verifyUrl"
required: true
type: "string"
1 change: 1 addition & 0 deletions config/email-templates/kustomization.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization

resources:
- emailverification-emailtemplate.yaml
- platforminvitation-emailtemplate.yaml
- userapproved-emailtemplate.yaml
- userinvitation-emailtemplate.yaml
Expand Down
60 changes: 60 additions & 0 deletions emails/email-verification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import 'web-streams-polyfill/polyfill';

import { Row, Section, Text } from 'react-email';
import { CustomButton } from './components';
import { MainLayout } from './layouts';

const copy = {
preview: 'Verify your email address',
greetingPrefix: 'Hi ',
greetingSuffix: ',',
paragraph1:
'Please confirm your email address to finish setting up your Datum account. This link expires in 24 hours.',
buttonLabel: 'Verify Email',
};

interface EmailVerificationProps {
name: string;
verifyUrl: string;
}

export const EmailVerification = ({
name,
verifyUrl,
}: EmailVerificationProps) => {
const previewText = copy.preview;

return (
<MainLayout preview={previewText}>
<Section className="my-10.5">
<Row>
<Text className="mt-0 text-4.5 mb-5.5 leading-6 font-medium">
{copy.greetingPrefix}
{name}
{copy.greetingSuffix}
</Text>
<Text className="mt-0 mb-5.5 text-4.5 leading-6 font-normal">
{copy.paragraph1}
</Text>
{verifyUrl && (
<CustomButton
href={verifyUrl || ''}
className="mt-9 mb-8 block text-[16px] font-semibold leading-5"
>
{copy.buttonLabel}
</CustomButton>
)}
</Row>
</Section>
</MainLayout>
);
};

EmailVerification.PreviewProps = {
name: 'John Doe',
verifyUrl: 'https://cloud.datum.net/verify?token=example',
} as EmailVerificationProps;

EmailVerification.Subject = 'Verify your email address';

export default EmailVerification;
Binary file added screenshots/email-verification.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading