Files
gruperly/apps/backend/src/lib/email.ts
Jose Selesan 6100c998be feat: add brand assets, design tokens and light/dark theme
- Use real logo/isotype SVGs across app and emails
- Token-based color system aligned with landing (brand scale + semantic tokens)
- ThemeProvider (light/dark/system) with header toggle and settings card
- Embed logo in transactional emails; centralize email colors
2026-09-16 17:35:24 -03:00

120 lines
4.8 KiB
TypeScript

import { readFileSync } from 'node:fs'
import nodemailer, { type Transporter } from 'nodemailer'
type VerificationEmailData = { email: string; url: string; name?: string }
type PasswordResetEmailData = { email: string; url: string; name?: string }
type InvitationEmailData = { email: string; url: string; organizationName: string }
// Colores de marca (mismo sistema que la web: index.css de apps/web).
const BRAND_600 = '#2544ea'
const TEXT_STRONG = '#0f172a'
const TEXT_MUTED = '#475569'
const ON_ACCENT = '#ffffff'
const LINK_BG = BRAND_600
// Logotipo embebido como data URI para que los mails no dependan de hosting.
function loadLogoTypoDataUri(): string {
try {
const base64 = readFileSync(
new URL('../assets/logotipo-y-organica.png', import.meta.url),
).toString('base64')
return `data:image/png;base64,${base64}`
} catch {
return ''
}
}
const LOGO_DATA_URI = loadLogoTypoDataUri()
interface EmailProvider {
sendVerificationEmail(data: VerificationEmailData): Promise<void>
sendPasswordResetEmail(data: PasswordResetEmailData): Promise<void>
sendOrganizationInvitation(data: InvitationEmailData): Promise<void>
}
class SMTPEmailProvider implements EmailProvider {
private transporter: Transporter
constructor() {
this.transporter = nodemailer.createTransport({
host: process.env.EMAIL_SERVER_HOST,
port: Number(process.env.EMAIL_SERVER_PORT ?? 587),
secure: (process.env.EMAIL_SERVER_PORT ?? '587') === '465',
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD,
},
})
}
private from() {
return process.env.EMAIL_FROM ?? 'Gruperly <no-reply@gruperly.com>'
}
private layout(title: string, body: string) {
const header = LOGO_DATA_URI
? `<img src="${LOGO_DATA_URI}" alt="Gruperly" width="252" height="83" style="height:36px;width:auto;display:block;margin:0 auto;" />`
: '<h2 style="margin:0 0 16px;">Gruperly</h2>'
return `
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px; color: ${TEXT_MUTED};">
<div style="text-align:center;margin-bottom:20px;">${header}</div>
<h3 style="margin: 0 0 8px; color: ${TEXT_STRONG};">${title}</h3>
<p style="line-height: 1.6; color: ${TEXT_MUTED};">${body}</p>
</div>
`
}
private async send(to: string, subject: string, html: string) {
// Sin SMTP configurado (dev) no rompe el flujo: solo registra un aviso
if (!process.env.EMAIL_SERVER_HOST) {
console.warn(`[email] SMTP no configurado. Email no enviado a ${to}: "${subject}"`)
return
}
await this.transporter.sendMail({ from: this.from(), to, subject, html })
}
async sendVerificationEmail({ email, url, name }: VerificationEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Verificar email</a>`
await this.send(
email,
'Verifica tu email en Gruperly',
this.layout(
'Confirma tu dirección de email',
`${name ? `Hola ${name}, ` : 'Hola, '}gracias por crear tu cuenta en Gruperly. Para empezar, verifica tu email con el botón de abajo (el enlace vence en 1 hora).<br/><br/>${link}`,
),
)
}
async sendPasswordResetEmail({ email, url, name }: PasswordResetEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Restablecer contraseña</a>`
await this.send(
email,
'Restablece tu contraseña en Gruperly',
this.layout(
'Solicitaste restablecer tu contraseña',
`${name ? `Hola ${name}, ` : 'Hola, '}haz clic en el botón para elegir una nueva contraseña (el enlace vence en 1 hora). Si no fuiste tú, ignora este email.<br/><br/>${link}`,
),
)
}
async sendOrganizationInvitation({ email, url, organizationName }: InvitationEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Unirme a ${organizationName}</a>`
await this.send(
email,
`Te invitaron a ${organizationName} en Gruperly`,
this.layout(
`Te invitaron a ${organizationName}`,
`Acepta la invitación con el botón de abajo para empezar a colaborar en Gruperly.<br/><br/>${link}`,
),
)
}
}
// Futuro: proveedores transaccionales (Resend, SendGrid, Postmark).
// Añadir implementaciones y alternar con EMAIL_PROVIDER.
export function createEmailProvider(): EmailProvider {
return new SMTPEmailProvider()
}
export const emailProvider = createEmailProvider()