Formatted emails

[jzgom067]

This PR introduces formatted emails to the site.

Email System

A new system was established where, when sending an email from the backend, it makes a request to the frontend which renders an HTML template with the given information. It is then returned to the backend, which then sends it through whatever email service it uses to deliver to the user.

This frontend endpoint is found at /api/render-email/, which takes a template key and other context-specific data. With this, it returns a subject, rich HTML content, and text fallback version of the email.

To render HTML content, the react-email package is used for its components that are widely-compatible.

.env Updates

On the frontend, the BASE_URL variable was added to generate links in emails.

On the backend, SMTP_-prefixed variables were added to allow SMTP-based email sending in development.

On both, the EMAIL_BRIDGE_SECRET variable was added for authentication for the email rendering endpoint.

Local Email Testing Support

There is now the ability to use SMTP mail servers when DEBUG is active on the backend. This allows you to use something like Mailpit to intercept messages and preview them in a browser.

To enable this, set SEND_EMAILS to True and fill in all the new SMTP_-prefixed credential fields in the backend .env.

Email Theme

There wasn't a good way to integrate our Tailwind setup with the React Email Tailwind provider, for a variety of reasons with the most notable being extremely limited email client HTML support. In the end, I settled on duplicating our color theme and converting the values to HEX instead of OKLCH, since that's what email clients can use.

New Backend Util Function

Instead of calling send_mail directly, the send_templated_email function is called with the recipient email, template key, and context information to get a rendered email from the frontend and send it to the user.

This has replaced all instances of send_mail in endpoints. The one remaining in settings.py is removed in the Discord Webhook PR.

[coderabbitai]

Walkthrough

The change replaces direct Django email calls with a shared templated email helper. The backend requests rendered email content from an authenticated Next.js route, then sends multipart messages through Django. The frontend adds shared email rendering utilities and templates for verification, password reset, reset codes, and existing accounts. Email settings now use SMTP in debug mode and SES otherwise, with bridge-secret and environment documentation updates.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 5

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 519b4f66-2067-4cef-9d3d-b68073c7c351

📥 Commits

Reviewing files that changed from the base of the PR and between 1c91c59 and 8d16a06.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (18)

• backend/.env.example
• backend/api/account/views.py
• backend/api/auth/views.py
• backend/api/settings.py
• backend/api/utils.py
• backend/requirements.txt
• frontend/.env.example
• frontend/package.json
• frontend/src/app/api/render-email/route.tsx
• frontend/src/features/email/components/button.tsx
• frontend/src/features/email/lib/content.ts
• frontend/src/features/email/lib/render.tsx
• frontend/src/features/email/templates/email-in-use.tsx
• frontend/src/features/email/templates/email-verification.tsx
• frontend/src/features/email/templates/password-reset-code.tsx
• frontend/src/features/email/templates/password-reset.tsx
• frontend/src/features/email/theme.ts
• frontend/src/features/email/type.ts