@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/internal/CodeEmail.ts

@@ -0,0 +1,138 @@
+/**
+ * Renders the sign-in code email: a text part, an HTML part, and an inline logo. It names no account
+ * and no app, so it is the same for every address.
+ * @module
+ */
+
+/** Seconds that a sign-in code stays valid. */
+export const lifetime = 600
+
+/** The logo's `Content-ID`, which the HTML part references as `cid:`. */
+const logoId = 'logo@id.tempo.xyz'
+
+/** The Tempo mark as an inline 144-pixel PNG, since many clients render no SVG or remote image. */
+const logoPng =
+  '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'
+
+/**
+ * Returns the subject, text part, HTML part, and logo of the email for `code`. The subject starts
+ * with the code, for previews and one-time-code autofill, so Tempo ID logs no subject.
+ */
+export function render(options: render.Options): render.ReturnType {
+  const { code } = options
+  const minutes = lifetime / 60
+
+  // Better Auth generates the code from digits only, so it needs no HTML escape.
+  const expiry = `It expires in ${minutes} minutes.`
+  const ignore =
+    'If you did not request this code, ignore this email. No one can sign in without it.'
+
+  return {
+    html: html({ code, expiry, ignore }),
+    logo: {
+      content: Uint8Array.from(atob(logoPng), (char) => char.charCodeAt(0)),
+      contentId: logoId,
+      contentType: 'image/png',
+      filename: 'tempo.png',
+    },
+    subject: `${code} is your Tempo ID sign-in code`,
+    text: `Your Tempo ID sign-in code is ${code}.\n\n${expiry}\n\n${ignore}\n`,
+  }
+}
+
+export declare namespace render {
+  type Options = {
+    /** The 6-digit code. */
+    code: string
+  }
+
+  type ReturnType = {
+    /** Inline styles only, with no external resources. */
+    html: string
+    /** An inline attachment, which the HTML part references by its `Content-ID`. */
+    logo: {
+      /** The PNG bytes. */
+      content: Uint8Array
+      /** Without angle brackets. */
+      contentId: string
+      /** The media type. */
+      contentType: string
+      /** The file name. */
+      filename: string
+    }
+    /** Starts with the code. */
+    subject: string
+    /** The plain-text part. */
+    text: string
+  }
+}
+
+/**
+ * Returns the HTML part, styled with the design system's tokens. Each element sets its background
+ * and text color together, so a client that inverts colors for dark mode keeps the contrast.
+ */
+function html(options: html.Options) {
+  const { code, expiry, ignore } = options
+
+  // `fontFamily.sans`. Mail clients load no web font, so a client without Inter uses the fallbacks.
+  const font =
+    "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+
+  // Each digit is a cell of a large `OtpField`, at the 6:7 size that the field shrinks to on a phone,
+  // since an email cannot resize it. No whitespace separates the cells, so a copy holds the digits.
+  const cells = [...code]
+    .map(
+      (digit) =>
+        `<span style="display:inline-block;width:42px;height:49px;margin:0 3px;background-color:#f2f2f2;color:#171717;border-radius:16px;font-family:${font};font-size:24px;font-weight:400;line-height:49px;text-align:center;">${digit}</span>`,
+    )
+    .join('')
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light">
+<meta name="supported-color-schemes" content="light">
+<title>Tempo ID sign-in code</title>
+</head>
+<body style="margin:0;padding:0;background-color:#f5f5f5;color:#171717;">
+<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Your Tempo ID sign-in code is ${code}. ${expiry}</div>
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f5f5f5;">
+<tr>
+<td align="center" style="padding:40px 16px;">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:432px;background-color:#ffffff;color:#171717;border-radius:32px;box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.04);">
+<tr>
+<td align="center" style="padding:40px 24px 0;"><img src="cid:${logoId}" width="48" height="48" alt="Tempo" style="display:block;width:48px;height:48px;border:0;border-radius:16px;"></td>
+</tr>
+<tr>
+<td align="center" style="padding:24px 24px 0;font-family:${font};font-size:24px;font-weight:600;line-height:32px;letter-spacing:-0.36px;color:#171717;">Your sign-in code</td>
+</tr>
+<tr>
+<td align="center" style="padding:8px 24px 0;font-family:${font};font-size:16px;font-weight:400;line-height:24px;color:#4d4d4d;">${expiry}</td>
+</tr>
+<tr>
+<td align="center" style="padding:32px 20px 0;white-space:nowrap;user-select:all;-webkit-user-select:all;">${cells}</td>
+</tr>
+<tr>
+<td align="center" style="padding:32px 24px 40px;font-family:${font};font-size:14px;font-weight:400;line-height:20px;color:#4d4d4d;">${ignore}</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</body>
+</html>
+`
+}
+
+declare namespace html {
+  type Options = {
+    /** The 6-digit code. */
+    code: string
+    /** The sentence that states when the code expires. */
+    expiry: string
+    /** The sentence for a recipient who did not request the code. */
+    ignore: string
+  }
+}