- 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
120 lines
4.8 KiB
TypeScript
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() |