ui-syncup 0.3.13 → 0.4.0-beta.1

package/src/server/email/queue.ts

@@ -0,0 +1,365 @@
+/**
+ * Email Queue System
+ * 
+ * Provides reliable, asynchronous email delivery with:
+ * - Idempotency (userId + tokenId prevents duplicates)
+ * - Retry logic with exponential backoff (30s, 5m, 30m)
+ * - Failure logging and alerting
+ * 
+ * @module server/email/queue
+ */
+
+import { db } from '@/lib/db';
+import { emailJobs } from '@/server/db/schema';
+import { logger } from '@/lib/logger';
+import { eq, and, lte, or, isNull } from 'drizzle-orm';
+import type { EmailTemplate } from './render-template';
+import { renderTemplate, getEmailSubject } from './render-template';
+import { sendEmail } from './client';
+
+/**
+ * Email job structure for queue processing
+ */
+export interface EmailJobInput {
+  userId: string;
+  tokenId?: string;
+  type: 'verification' | 'password_reset' | 'welcome' | 'security_alert' | 'team_invitation' | 'ownership_transfer' | 'project_invitation';
+  to: string;
+  template: EmailTemplate;
+}
+
+/**
+ * Calculate backoff delay based on attempt number
+ * - Attempt 1: 1 minute
+ * - Attempt 2: 5 minutes
+ * - Attempt 3: 15 minutes
+ */
+function calculateBackoff(attempts: number): number {
+  switch (attempts) {
+    case 1:
+      return 1 * 60 * 1000; // 1 minute
+    case 2:
+      return 5 * 60 * 1000; // 5 minutes
+    case 3:
+      return 15 * 60 * 1000; // 15 minutes
+    default:
+      return 1 * 60 * 1000; // Default to 1 minute
+  }
+}
+
+/**
+ * Enqueue email for delivery with idempotency
+ * 
+ * Idempotency key: userId + tokenId (or userId + type for non-token emails)
+ * Duplicate submissions are silently ignored (no-op)
+ * 
+ * @param job - Email job input
+ * @returns Promise<void>
+ */
+export async function enqueueEmail(job: EmailJobInput): Promise<void> {
+  try {
+    // Check for existing pending/processing job with same idempotency key
+    const existingJob = await db
+      .select()
+      .from(emailJobs)
+      .where(
+        and(
+          eq(emailJobs.userId, job.userId),
+          job.tokenId 
+            ? eq(emailJobs.tokenId, job.tokenId)
+            : and(
+                eq(emailJobs.type, job.type),
+                isNull(emailJobs.tokenId)
+              ),
+          or(
+            eq(emailJobs.status, 'pending'),
+            eq(emailJobs.status, 'processing')
+          )
+        )
+      )
+      .limit(1);
+
+    // Idempotency: ignore duplicate submissions
+    if (existingJob.length > 0) {
+      logger.info('email.queued.duplicate', {
+        userId: job.userId,
+        tokenId: job.tokenId,
+        type: job.type,
+        existingJobId: existingJob[0].id,
+      });
+      return;
+    }
+
+    // Get subject from template
+    const subject = getEmailSubject(job.template);
+
+    // Create new email job
+    const [newJob] = await db
+      .insert(emailJobs)
+      .values({
+        userId: job.userId,
+        tokenId: job.tokenId || null,
+        type: job.type,
+        to: job.to,
+        subject,
+        template: job.template.type,
+        data: job.template.data as any,
+        attempts: 0,
+        maxAttempts: 4,
+        status: 'pending',
+        scheduledFor: new Date(),
+      })
+      .returning();
+
+    logger.info('email.queued', {
+      jobId: newJob.id,
+      userId: job.userId,
+      tokenId: job.tokenId,
+      type: job.type,
+      to: job.to,
+    });
+  } catch (error) {
+    logger.error('email.queue.error', {
+      userId: job.userId,
+      type: job.type,
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    throw error;
+  }
+}
+
+/**
+ * Process a single email job
+ * 
+ * @param job - Email job from database
+ * @returns Promise<boolean> - true if successful, false if should retry
+ */
+async function processJob(job: typeof emailJobs.$inferSelect): Promise<boolean> {
+  try {
+    // Mark as processing
+    await db
+      .update(emailJobs)
+      .set({
+        status: 'processing',
+        attempts: job.attempts + 1,
+        updatedAt: new Date(),
+      })
+      .where(eq(emailJobs.id, job.id));
+
+    // Reconstruct template from stored data
+    const template: EmailTemplate = {
+      type: job.template as any,
+      data: job.data as any,
+    };
+
+    // Render template to HTML
+    const htmlContent = await renderTemplate(template);
+
+    // Send email
+    await sendEmail(
+      {
+        id: job.id,
+        userId: job.userId,
+        tokenId: job.tokenId || undefined,
+        type: job.type as any,
+        to: job.to,
+        subject: job.subject,
+        template,
+        attempts: job.attempts + 1,
+        maxAttempts: job.maxAttempts,
+        createdAt: job.createdAt.toISOString(),
+        scheduledFor: job.scheduledFor.toISOString(),
+      },
+      htmlContent
+    );
+
+    // Mark as completed
+    await db
+      .update(emailJobs)
+      .set({
+        status: 'completed',
+        updatedAt: new Date(),
+      })
+      .where(eq(emailJobs.id, job.id));
+
+    logger.info('email.processed', {
+      jobId: job.id,
+      userId: job.userId,
+      type: job.type,
+      attempts: job.attempts + 1,
+    });
+
+    return true;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    const newAttempts = job.attempts + 1;
+
+    logger.error('email.processing.error', {
+      jobId: job.id,
+      userId: job.userId,
+      type: job.type,
+      attempts: newAttempts,
+      error: errorMessage,
+    });
+
+    // Check if we should retry
+    if (newAttempts < job.maxAttempts) {
+      // Schedule retry with backoff
+      const delay = calculateBackoff(newAttempts);
+      const scheduledFor = new Date(Date.now() + delay);
+
+      await db
+        .update(emailJobs)
+        .set({
+          status: 'pending',
+          attempts: newAttempts,
+          lastError: errorMessage,
+          scheduledFor,
+          updatedAt: new Date(),
+        })
+        .where(eq(emailJobs.id, job.id));
+
+      logger.info('email.retry.scheduled', {
+        jobId: job.id,
+        userId: job.userId,
+        type: job.type,
+        attempts: newAttempts,
+        scheduledFor: scheduledFor.toISOString(),
+        delayMs: delay,
+      });
+
+      return false;
+    } else {
+      // Max retries reached, mark as failed
+      await db
+        .update(emailJobs)
+        .set({
+          status: 'failed',
+          lastError: errorMessage,
+          updatedAt: new Date(),
+        })
+        .where(eq(emailJobs.id, job.id));
+
+      // Update project invitation if this was a project invitation email
+      if (job.type === 'project_invitation' && job.tokenId) {
+        try {
+          const { projectInvitations, projects } = await import('@/server/db/schema');
+          const { logInvitationEmailFailed } = await import('@/server/projects/activity-service');
+          
+          const updatedInvitations = await db
+            .update(projectInvitations)
+            .set({
+              emailDeliveryFailed: true,
+              emailFailureReason: errorMessage,
+              emailLastAttemptAt: new Date(),
+            })
+            .where(eq(projectInvitations.id, job.tokenId))
+            .returning({ 
+              projectId: projectInvitations.projectId 
+            });
+          
+          if (updatedInvitations.length > 0) {
+            const { projectId } = updatedInvitations[0];
+            
+            // Fetch teamId
+            const projectResult = await db
+              .select({ teamId: projects.teamId })
+              .from(projects)
+              .where(eq(projects.id, projectId))
+              .limit(1);
+            
+            if (projectResult.length > 0) {
+              await logInvitationEmailFailed(
+                projectResult[0].teamId,
+                projectId,
+                {
+                  invitationId: job.tokenId,
+                  email: job.to,
+                  reason: errorMessage,
+                  lastAttemptAt: new Date().toISOString(),
+                }
+              );
+            }
+          }
+          
+          logger.error('invitation.email.failed', {
+            invitationId: job.tokenId,
+            attempts: newAttempts,
+            error: errorMessage,
+          });
+        } catch (invitationUpdateError) {
+          logger.error('invitation.email.update_failed', {
+            invitationId: job.tokenId,
+            error: invitationUpdateError instanceof Error ? invitationUpdateError.message : 'Unknown error',
+          });
+        }
+      }
+
+      logger.error('email.failed.max_retries', {
+        jobId: job.id,
+        userId: job.userId,
+        type: job.type,
+        attempts: newAttempts,
+        error: errorMessage,
+      });
+
+      // Alert monitoring system
+      logger.error('email.alert.delivery_failed', {
+        severity: 'critical',
+        jobId: job.id,
+        userId: job.userId,
+        type: job.type,
+        to: job.to,
+        attempts: newAttempts,
+        error: errorMessage,
+      });
+
+      return false;
+    }
+  }
+}
+
+/**
+ * Process email queue
+ * 
+ * Fetches pending jobs that are scheduled to run and processes them.
+ * Should be called periodically by a background worker.
+ * 
+ * @returns Promise<void>
+ */
+export async function processEmailQueue(): Promise<void> {
+  try {
+    // Fetch pending jobs that are ready to process
+    const jobs = await db
+      .select()
+      .from(emailJobs)
+      .where(
+        and(
+          eq(emailJobs.status, 'pending'),
+          lte(emailJobs.scheduledFor, new Date())
+        )
+      )
+      .limit(10); // Process up to 10 jobs at a time
+
+    if (jobs.length === 0) {
+      return;
+    }
+
+    logger.info('email.queue.processing', {
+      count: jobs.length,
+    });
+
+    // Process jobs sequentially to avoid overwhelming the email service
+    for (const job of jobs) {
+      await processJob(job);
+    }
+
+    logger.info('email.queue.processed', {
+      count: jobs.length,
+    });
+  } catch (error) {
+    logger.error('email.queue.error', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+}

package/src/server/email/render-template.tsx

@@ -0,0 +1,117 @@
+import { render } from '@react-email/render';
+import { VerificationEmail } from './templates/verification-email';
+import { PasswordResetEmail } from './templates/password-reset-email';
+import { WelcomeEmail } from './templates/welcome-email';
+import { SecurityAlertEmail } from './templates/security-alert-email';
+import { TeamInvitationEmail } from './templates/team-invitation-email';
+import { OwnershipTransferEmail } from './templates/ownership-transfer-email';
+import { ProjectInvitationEmail } from './templates/project-invitation-email';
+
+/**
+ * Template types and their corresponding data structures
+ */
+export type EmailTemplate = 
+  | { type: 'verification'; data: { name: string; verificationUrl: string } }
+  | { type: 'password_reset'; data: { name: string; resetUrl: string } }
+  | { type: 'welcome'; data: { name: string; dashboardUrl: string } }
+  | { type: 'security_alert'; data: { 
+      name: string; 
+      alertType: 'password_changed' | 'new_signin' | 'suspicious_activity' | 'team_data_export';
+      timestamp: string;
+      ipAddress?: string;
+      location?: string;
+      device?: string;
+      actionUrl?: string;
+      customMessage?: string;
+    }}
+  | { type: 'team_invitation'; data: {
+      inviterName: string;
+      teamName: string;
+      invitationUrl: string;
+      expiresIn: string;
+    }}
+  | { type: 'project_invitation'; data: {
+      inviterName: string;
+      projectName: string;
+      role: string;
+      invitationUrl: string;
+      expiresIn: string;
+    }}
+  | { type: 'ownership_transfer'; data: {
+      teamName: string;
+      previousOwnerName: string;
+      newOwnerName: string;
+      isNewOwner: boolean;
+      teamUrl: string;
+    }};
+
+/**
+ * Render email template to HTML string
+ * 
+ * @param template - Template type and data
+ * @returns HTML string ready to send via email service
+ */
+export async function renderTemplate(template: EmailTemplate): Promise<string> {
+  let component: React.ReactElement;
+
+  switch (template.type) {
+    case 'verification':
+      component = <VerificationEmail {...template.data} />;
+      break;
+    case 'password_reset':
+      component = <PasswordResetEmail {...template.data} />;
+      break;
+    case 'welcome':
+      component = <WelcomeEmail {...template.data} />;
+      break;
+    case 'security_alert':
+      component = <SecurityAlertEmail {...template.data} />;
+      break;
+    case 'team_invitation':
+      component = <TeamInvitationEmail {...template.data} />;
+      break;
+    case 'project_invitation':
+      component = <ProjectInvitationEmail {...template.data} />;
+      break;
+    case 'ownership_transfer':
+      component = <OwnershipTransferEmail {...template.data} />;
+      break;
+    default:
+      throw new Error(`Unknown template type: ${(template as any).type}`);
+  }
+
+  return await render(component);
+}
+
+/**
+ * Get email subject based on template type
+ */
+export function getEmailSubject(template: EmailTemplate): string {
+  switch (template.type) {
+    case 'verification':
+      return 'Verify your email address - UI SyncUp';
+    case 'password_reset':
+      return 'Reset your password - UI SyncUp';
+    case 'welcome':
+      return 'Welcome to UI SyncUp!';
+    case 'security_alert':
+      const alertType = template.data.alertType;
+      if (alertType === 'password_changed') {
+        return 'Your password was changed - UI SyncUp';
+      } else if (alertType === 'new_signin') {
+        return 'New sign-in to your account - UI SyncUp';
+      } else if (alertType === 'team_data_export') {
+        return 'Your team data export is ready - UI SyncUp';
+      } else {
+        return 'Security alert for your account - UI SyncUp';
+      }
+    case 'team_invitation':
+      return `Join ${template.data.teamName} on UI SyncUp`;
+    case 'project_invitation':
+      return `You've been invited to join ${template.data.projectName}`;
+    case 'ownership_transfer':
+      return `Ownership transfer for ${template.data.teamName} - UI SyncUp`;
+    default:
+      return 'UI SyncUp Notification';
+  }
+}

package/src/server/email/templates/layout.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text,
+  Tailwind,
+} from '@react-email/components';
+
+interface EmailLayoutProps {
+  preview?: string;
+  children: React.ReactNode;
+}
+
+export const EmailLayout = ({ preview, children }: EmailLayoutProps) => {
+  return (
+    <Html>
+      <Head />
+      {preview && <Preview>{preview}</Preview>}
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: {
+                brand: '#2563eb',
+                'brand-dark': '#1e40af',
+                text: '#333333',
+                'text-muted': '#666666',
+                bg: '#f8f9fa',
+              },
+            },
+          },
+        }}
+      >
+        <Body className="bg-white my-auto mx-auto font-sans">
+          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
+            <Section className="mt-[32px]">
+              <Text className="text-brand text-[24px] font-bold text-center p-0 my-[30px] mx-0">
+                UI SyncUp
+              </Text>
+            </Section>
+            
+            {children}
+
+            <Section className="text-center mt-[32px] mb-[32px]">
+              <Text className="text-[12px] text-text-muted leading-[24px]">
+                UI SyncUp - Visual Feedback & Issue Tracking Platform
+              </Text>
+              <Text className="text-[12px] text-text-muted leading-[24px]">
+                <Link href="https://uisyncup.com" className="text-brand underline">
+                  Visit Dashboard
+                </Link>
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default EmailLayout;

package/src/server/email/templates/ownership-transfer-email.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {
+  Button,
+  Heading,
+  Hr,
+  Section,
+  Text,
+} from '@react-email/components';
+import { EmailLayout } from './layout';
+
+interface OwnershipTransferEmailProps {
+  teamName: string;
+  previousOwnerName: string;
+  newOwnerName: string;
+  isNewOwner: boolean;
+  teamUrl: string;
+}
+
+export function OwnershipTransferEmail({ 
+  teamName, 
+  previousOwnerName, 
+  newOwnerName,
+  isNewOwner,
+  teamUrl
+}: OwnershipTransferEmailProps) {
+  const previewText = isNewOwner 
+    ? `You are now the owner of ${teamName}`
+    : `Ownership of ${teamName} has been transferred`;
+
+  return (
+    <EmailLayout preview={previewText}>
+      <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
+        Ownership Transfer: <strong>{teamName}</strong>
+      </Heading>
+      
+      <Text className="text-black text-[14px] leading-[24px]">
+        Hello,
+      </Text>
+      
+      <Text className="text-black text-[14px] leading-[24px]">
+        This email is to confirm that ownership of the team <strong>{teamName}</strong> has been transferred.
+      </Text>
+
+      <Section className="bg-gray-50 rounded border border-gray-200 p-4 my-4">
+        <Text className="text-black text-[14px] m-0 mb-2">
+          <strong>Previous Owner:</strong> {previousOwnerName}
+        </Text>
+        <Text className="text-black text-[14px] m-0">
+          <strong>New Owner:</strong> {newOwnerName}
+        </Text>
+      </Section>
+
+      {isNewOwner ? (
+        <Text className="text-black text-[14px] leading-[24px]">
+          You have been designated as the new owner of this team. You now have full administrative control, including team deletion.
+        </Text>
+      ) : (
+        <Text className="text-black text-[14px] leading-[24px]">
+          You have transferred ownership of this team. You remain an administrator of the team.
+        </Text>
+      )}
+      
+      <Section className="text-center mt-[32px] mb-[32px]">
+        <Button
+          className="bg-[#2563eb] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
+          href={teamUrl}
+        >
+          Go to Team Settings
+        </Button>
+      </Section>
+      
+      <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+    </EmailLayout>
+  );
+}

package/src/server/email/templates/password-reset-email.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  Button,
+  Heading,
+  Hr,
+  Link,
+  Section,
+  Text,
+} from '@react-email/components';
+import { EmailLayout } from './layout';
+
+interface PasswordResetEmailProps {
+  name: string;
+  resetUrl: string;
+}
+
+export function PasswordResetEmail({ name, resetUrl }: PasswordResetEmailProps) {
+  return (
+    <EmailLayout preview="Reset your UI SyncUp password">
+      <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
+        Reset Your Password
+      </Heading>
+      
+      <Text className="text-black text-[14px] leading-[24px]">
+        Hi {name},
+      </Text>
+      
+      <Text className="text-black text-[14px] leading-[24px]">
+        We received a request to reset your password for your UI SyncUp account. Click the button below to create a new password:
+      </Text>
+      
+      <Section className="text-center mt-[32px] mb-[32px]">
+        <Button
+          className="bg-[#2563eb] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
+          href={resetUrl}
+        >
+          Reset Password
+        </Button>
+      </Section>
+      
+      <Text className="text-black text-[14px] leading-[24px]">
+        Or copy and paste this link into your browser:
+      </Text>
+      
+      <Section className="bg-gray-50 rounded border border-gray-200 p-3 mb-4">
+        <Link
+          href={resetUrl}
+          className="text-blue-600 no-underline break-all text-sm"
+        >
+          {resetUrl}
+        </Link>
+      </Section>
+      
+      <Text className="text-gray-500 text-[14px] leading-[24px]">
+        This password reset link will expire in 1 hour. If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.
+      </Text>
+      
+      <Section className="bg-yellow-50 border border-yellow-200 rounded p-4 my-4">
+        <Text className="text-yellow-800 text-[14px] font-medium m-0 mb-2">
+          For security reasons, we recommend that you:
+        </Text>
+        <ul className="text-[14px] leading-[24px] pl-5 m-0 text-yellow-800">
+          <li className="mb-1">Use a strong, unique password</li>
+          <li className="mb-1">Never share your password with anyone</li>
+          <li className="mb-0">Enable two-factor authentication when available</li>
+        </ul>
+      </Section>
+      
+      <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+    </EmailLayout>
+  );
+}