feat: basic initial UI layout for mobile and desktop

2026-09-07 09:33:07 -03:00
parent 0aa5d70101
commit b41fffa40a
46 changed files with 2102 additions and 125 deletions
--- a/apps/api/src/lib/email.ts
+++ b/apps/api/src/lib/email.ts
@@ -0,0 +1,94 @@
+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 }
+
+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) {
+    return `
+      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px; color: #0a2540;">
+        <h2 style="margin: 0 0 16px;">Gruperly</h2>
+        <h3 style="margin: 0 0 8px;">${title}</h3>
+        <p style="line-height: 1.6; color: #334155;">${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:#1e90ff;color:#fff;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:#1e90ff;color:#fff;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:#1e90ff;color:#fff;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()