Skip to content

feat(otp): make OTP email customizable (logo, login URL, button text)#809

Open
lane711 wants to merge 1 commit intomainfrom
lane711/otp-email-config
Open

feat(otp): make OTP email customizable (logo, login URL, button text)#809
lane711 wants to merge 1 commit intomainfrom
lane711/otp-email-config

Conversation

@lane711
Copy link
Copy Markdown
Collaborator

@lane711 lane711 commented Apr 30, 2026

Summary

  • Adds admin-configurable branding for the OTP login email so each deployment can match its own product.
  • New settings: Logo URL, Logo Width (px), Logo Border Thickness (px), Logo Border Color, Login URL, and Login Button Text.
  • Existing emails are visually unchanged when no new settings are provided (border thickness defaults to 0, login button only renders when a URL is set).

Changes

  • packages/core/src/plugins/core-plugins/otp-login-plugin/manifest.json — schema + defaults for the new fields.
  • packages/core/src/plugins/manifest-registry.ts — mirror defaults in the central plugin registry.
  • packages/core/src/plugins/core-plugins/otp-login-plugin/otp-service.ts — extend OTPSettings interface.
  • packages/core/src/plugins/core-plugins/otp-login-plugin/email-templates.ts — render configurable logo (width / border / radius) and optional sign-in button; HTML-escape user-provided values; sanitize colors before injecting into inline styles.
  • packages/core/src/plugins/core-plugins/otp-login-plugin/index.ts — pass the new settings through to the renderer with safe defaults.
  • packages/core/src/templates/pages/admin-plugin-settings.template.ts — admin UI inputs (with a color picker for the border color) and live email preview that reflects each change.

Behavior details

  • Logo border only renders when both thickness > 0 and a color is set.
  • When the border renders, the logo gets border-radius: 8px to match the sign-in button.
  • Default border color is #ffffff; default thickness is 0 (border off).
  • Login button label falls back to Sign in to {site name} when blank.
  • Plain-text version of the email also gains the CTA URL line when a Login URL is configured.

Testing

  • Unit tests pass locally (vitest run src/plugins/core-plugins/otp-login-plugin — 40/40)
  • Core typecheck passes (tsc --noEmit -p packages/core/tsconfig.json)
  • E2E tests pass in CI

🤖 Generated with Claude Code

Add admin-configurable branding for the OTP login email so each
deployment can match its own product:

- Logo URL, max width (px), border thickness (px), border color
- Optional Login URL renders a styled "Sign in" button in the email
- Custom button text (defaults to "Sign in to {site name}")
- Border radius on the logo matches the button radius when a
  border is shown
- Color values are sanitized before being interpolated into inline
  styles to prevent CSS injection in rendered emails
- Live email preview in the plugin settings page reflects every
  change immediately

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@lane711 lane711 deployed to internal April 30, 2026 02:01 — with GitHub Actions Active
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.

1 participant