Secure EMail Template Editing with Preview and enhanced UI

[tobias74]

Cuurently we have a very rudimentary EMail-Template Editor in place. There is no preview functionality. Templates (which contain TWIG-Template-Code) are saved, without version management or history. And they are live immediatly.

We should implement a thorough editing process, including some sort of history and revert functionality, in case something goes wrong.

Sending confirmation emails is one of the central functionalities of this software, since the confirmation mail is a key part of the customer process. Failures in this part of the software will basically stop the main functionalities.

[ThomasAFink]

@coderabbitai how would you improve this? Give a concrete example.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

I notice that this is a comment on a GitHub issue rather than a PR review. Let me analyze the issue and provide concrete suggestions for improving the email template editing system.

@ThomasAFink Here's a concrete proposal for improving the email template editing system with preview functionality and enhanced security:

1. Template Version Control:

interface EmailTemplate {
  id: string;
  name: string;
  content: string;
  version: number;
  status: 'draft' | 'published' | 'archived';
  createdAt: Date;
  updatedAt: Date;
  publishedAt?: Date;
  createdBy: string;
  lastModifiedBy: string;
}

2. Preview System:

class EmailTemplatePreviewService {
  async generatePreview(template: EmailTemplate, testData: any): Promise<string> {
    // Sandbox environment for safe TWIG rendering
    const sandbox = new TwigSandbox({
      allowedTags: ['if', 'for', 'set', ...], // Whitelist safe TWIG tags
      allowedFilters: ['escape', 'date', ...], // Whitelist safe filters
    });
    
    return await sandbox.render(template.content, testData);
  }
}

3. Publishing Workflow:

class EmailTemplateManager {
  async createDraft(template: Partial<EmailTemplate>): Promise<EmailTemplate> {
    // Create new draft version
  }
  
  async updateDraft(id: string, changes: Partial<EmailTemplate>): Promise<EmailTemplate> {
    // Update existing draft
  }
  
  async publish(id: string): Promise<EmailTemplate> {
    // Validate template
    // Archive current published version if exists
    // Set status to published
    // Record publish timestamp
  }
  
  async revert(id: string, version: number): Promise<EmailTemplate> {
    // Restore template to specific version
  }
}

4. UI Mockup:

graph TD
    A[Template List] --> B[Edit Template]
    B --> C[Preview Mode]
    B --> D[Version History]
    C --> E[Test with Sample Data]
    D --> F[Revert to Version]
    B --> G[Save Draft]
    G --> H[Publish]

Loading

Key Features:

1. Safe Preview: Templates are rendered in a sandboxed environment with whitelisted TWIG features
2. Version Control: Full history of changes with ability to revert
3. Draft System: Changes aren't live until explicitly published
4. Audit Trail: Track who made changes and when
5. Sample Data Testing: Test templates with representative data before publishing

UI Workflow:

1. Editor sees list of templates with status indicators
2. Can create new template or edit existing one
3. Changes are saved as drafts
4. Preview shows rendered output with test data
5. Version history shows all changes with diff view
6. Publishing requires explicit action
7. Can revert to any previous version if needed

Would you like me to elaborate on any of these aspects or provide more specific implementation details for any component?

(_/)/
(•.•)
/ >📝 thoughtfully taking notes