Skip to content

feat: redesign the emails with React.#3

Closed
teppyboy wants to merge 14 commits intomasterfrom
opencoat
Closed

feat: redesign the emails with React.#3
teppyboy wants to merge 14 commits intomasterfrom
opencoat

Conversation

@teppyboy
Copy link
Copy Markdown
Collaborator

So basically, we redesigned so that instead of hardcoding HTML, we now hardcode TSX :D, which is more maintainable and looks better in my opinion (or at least it's okay for a SWE/CS student, probably not for people who're into designing tho). This PR also somewhat partially edits the code to make it compile, and also adding the vite build step into Gradle.

Funny that this was actually planned and coded with GPT-5.4/GPT-5.5, Claude being "Co-authored-with" is just for fun 😛

Feel free to report bugs, and I'll fix them, but I bet anyone besides Yuuki will actually try to run this backend for once.

teppyboy and others added 11 commits May 1, 2026 04:26
Keep project-local worktrees out of the repository while using isolated feature branches.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Unblock compilation by keeping only the zero-arg Lombok constructor on the empty Redis request model.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Copy the stable TicketRush branding component and theme source into the server repo so email theming can build without sibling-repo coupling.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Add an isolated Vite 8 and React workspace for static email authoring, with its own dependencies, build entrypoints, and local artifact ignore rules.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Define email-safe TicketRush colors, typography, spacing, and dark-mode selectors so the rendered templates share one consistent brand system across inbox themes.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Build shared React shells for branded OTP emails so both flows can reuse the same email-safe structure, preview text handling, and dark-mode hooks.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Create shared register-confirmation and password-reset email templates with branded copy, preview text, and placeholder hooks for current Thymeleaf and future token replacement flows.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Compile base email CSS with Vite, inline it into React-rendered HTML, and keep dark-mode overrides in the document head for inbox compatibility.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Hook the React email builder into Gradle so processResources regenerates and copies the latest branded HTML into Spring template resources automatically.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings April 30, 2026 22:12
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the backend’s transactional email templates from hand-written Thymeleaf HTML to React/TSX-rendered HTML generated via a new emails/ workspace, and updates the backend mail sender to send HTML emails.

Changes:

  • Replace the registration-confirmation and password-reset templates with generated, styled HTML (including dark-mode support).
  • Update EmailService to render the new template names and send HTML via MimeMessage.
  • Add a Node/Vite-based email build pipeline under emails/ and wire it into Gradle (processResources).

Reviewed changes

Copilot reviewed 19 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/main/resources/templates/register-confirmation-email.html Replaces the registration confirmation email HTML with the new generated template.
src/main/resources/templates/password-reset-email.html Replaces the password reset email HTML with the new generated template.
src/main/java/me/june8th/ticketrushserver/services/EmailService.java Switches to new Thymeleaf template names and sends HTML via MimeMessageHelper.
src/main/java/me/june8th/ticketrushserver/data/RegisterAccountRequest.java Removes Lombok @AllArgsConstructor usage.
emails/vite.config.ts Adds Vite build config for compiling CSS/assets for email generation.
emails/tsconfig.json Adds TypeScript configuration for the email workspace.
emails/src/vite-env.d.ts Adds a CSS module declaration for TS.
emails/src/theme/tokens.ts Adds design tokens shared by email components/templates.
emails/src/theme/dark-mode.css Adds dark-mode CSS (media query + Outlook selectors) injected into email HTML.
emails/src/templates/RegisterConfirmationEmail.tsx Adds TSX template for registration confirmation email.
emails/src/templates/PasswordResetEmail.tsx Adds TSX template for password reset email.
emails/src/preview.tsx Adds a Vite entrypoint that imports base CSS.
emails/src/main.css Adds base CSS used for inlining into emails.
emails/src/components/OtpCard.tsx Adds OTP card component used by templates.
emails/src/components/EmailShell.tsx Adds shared email document/shell wrapper component.
emails/src/components/BrandHeader.tsx Adds shared brand header component (wordmark + icon + title).
emails/scripts/render-emails.mts Adds renderer that builds assets, renders TSX, and inlines CSS into final HTML.
emails/reference/ticketrush/globals.css Adds reference styling (not part of runtime email generation).
emails/reference/ticketrush/Branding.tsx Adds reference branding component (not part of runtime email generation).
emails/package.json Defines email workspace dependencies and build/render scripts.
emails/package-lock.json Locks email workspace dependencies.
build.gradle Adds Gradle tasks to build and sync generated email templates during resource processing.
.gitignore Ignores email workspace build artifacts (node_modules/, dist/) and .worktrees/.
Files not reviewed (1)
  • emails/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread emails/src/main.css Outdated
Comment thread emails/package.json Outdated
teppyboy and others added 2 commits May 1, 2026 05:22
It was the leftover from the first sloppy design, shameful GPT-5.4

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Sure if it even works :)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@teppyboy
Copy link
Copy Markdown
Collaborator Author

@copilot Make a commit to fix the CI and Docker by installing nvm and install nodejs lts latest to the build step

- CI workflow: use actions/setup-node@v4 (node-version: lts/*) with npm
  cache for the emails workspace before the Gradle build
- Dockerfile builder: install nvm v0.40.3 + Node.js LTS on Alpine via
  bash/curl and symlink node/npm/npx into /usr/local/bin
- build.gradle: add npmInstallEmails task (npm ci) that buildEmailTemplates
  now depends on, so node_modules are always installed in a clean env

Agent-Logs-Url: https://github.com/im-yuuki/TicketRushServer/sessions/45571202-7c05-490a-b99a-81d9bc63dfed

Co-authored-by: teppyboy <42248228+teppyboy@users.noreply.github.com>
Copy link
Copy Markdown

Copilot AI commented Apr 30, 2026

@copilot Make a commit to fix the CI and Docker by installing nvm and install nodejs lts latest to the build step

Done in commit 915b4ae. Three changes were made:

  1. CI workflow (.github/workflows/build-jar.yml): Added actions/setup-node@v4 step with node-version: 'lts/*' and npm cache for the emails/ workspace — runs before the Gradle build.
  2. Dockerfile (dockerfile): Added nvm v0.40.3 + Node.js LTS installation in the builder stage. Since the base image is Alpine, it installs bash and curl first, runs the nvm install script, then symlinks node/npm/npx into /usr/local/bin so they're on PATH for the Gradle build.
  3. Gradle (build.gradle): Added a new npmInstallEmails task that runs npm ci in the emails/ directory, and made buildEmailTemplates depend on it — this ensures node_modules are always present in a clean environment (CI or Docker).

@teppyboy
Copy link
Copy Markdown
Collaborator Author

teppyboy commented May 1, 2026

It was fun while it lasted, but mails are more simpler than that so bye bye 🐧

@teppyboy teppyboy closed this May 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants