Add Header band, Footer with legal links, and per-template security lines to emails

tjementum · tjementum · commit aa0d72bb3169 · 2026-05-04T20:23:32.000+02:00
diff --git a/application/AppGateway/appsettings.json b/application/AppGateway/appsettings.json
@@ -165,6 +165,21 @@
           "HostnameKey": "App"
         }
       },
+      "email-static-assets": {
+        "ClusterId": "main-static",
+        "Match": {
+          "Path": "/email/{**catch-all}"
+        },
+        "Metadata": {
+          "HostnameKey": "*"
+        },
+        "Transforms": [
+          {
+            "ResponseHeader": "Cache-Control",
+            "Set": "public, max-age=2592000, immutable"
+          }
+        ]
+      },
       "account-federation": {
         "ClusterId": "account-static",
         "Match": {
diff --git a/application/account/WebApp/emails/lingui.config.ts b/application/account/WebApp/emails/lingui.config.ts
@@ -10,7 +10,15 @@ const config: LinguiConfig = {
   catalogs: [
     {
       path: "<rootDir>/translations/locale/{locale}",
-      include: ["<rootDir>/templates/**/*.tsx", "<rootDir>/templates/**/*.ts"],
+      // Include shared components so user-facing strings inside @repo/emails (e.g. <Footer>) extract
+      // into each system's catalog. The email build only loads one system's catalog at render time,
+      // so each system needs its own copy of any shared translations.
+      include: [
+        "<rootDir>/templates/**/*.tsx",
+        "<rootDir>/templates/**/*.ts",
+        "<rootDir>/../../../shared-webapp/emails/components/**/*.tsx",
+        "<rootDir>/../../../shared-webapp/emails/components/**/*.ts"
+      ],
       exclude: ["**/node_modules/**", "**/dist/**", "**/*.d.ts"]
     }
   ],
diff --git a/application/account/WebApp/emails/templates/InviteUser.tsx b/application/account/WebApp/emails/templates/InviteUser.tsx
@@ -32,6 +32,10 @@ export default function InviteUser({ locale }: Readonly<InviteUserProps>) {
           and login using <Value path="Email" sample="invitee@example.com" />.
         </Trans>
       </Text>
+
+      <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">
+        <Trans>If you don't recognize the sender, you can safely ignore this email.</Trans>
+      </Text>
     </TransactionalEmail>
   );
 }
diff --git a/application/account/WebApp/emails/templates/ResendEmailLogin.tsx b/application/account/WebApp/emails/templates/ResendEmailLogin.tsx
@@ -13,7 +13,11 @@ type ResendEmailLoginProps = {
 
 export default function ResendEmailLogin({ locale }: Readonly<ResendEmailLoginProps>) {
   return (
-    <TransactionalEmail locale={locale} preview="Your verification code (resend)">
+    <TransactionalEmail
+      locale={locale}
+      preview="Your verification code (resend)"
+      otpAutofill={<OtpAutofill code="OneTimePassword" domain="Domain" />}
+    >
       <Subject>
         <Trans>Your verification code (resend)</Trans>
       </Subject>
@@ -36,7 +40,9 @@ export default function ResendEmailLogin({ locale }: Readonly<ResendEmailLoginPr
         <Trans>This code will expire in a few minutes.</Trans>
       </Text>
 
-      <OtpAutofill code="OneTimePassword" domain="Domain" />
+      <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">
+        <Trans>If you didn't request a new code, you can safely ignore this email.</Trans>
+      </Text>
     </TransactionalEmail>
   );
 }
diff --git a/application/account/WebApp/emails/templates/StartLogin.tsx b/application/account/WebApp/emails/templates/StartLogin.tsx
@@ -13,7 +13,11 @@ type StartLoginProps = {
 
 export default function StartLogin({ locale }: Readonly<StartLoginProps>) {
   return (
-    <TransactionalEmail locale={locale} preview="PlatformPlatform login verification code">
+    <TransactionalEmail
+      locale={locale}
+      preview="PlatformPlatform login verification code"
+      otpAutofill={<OtpAutofill code="OneTimePassword" domain="Domain" />}
+    >
       <Subject>
         <Trans>PlatformPlatform login verification code</Trans>
       </Subject>
@@ -32,7 +36,9 @@ export default function StartLogin({ locale }: Readonly<StartLoginProps>) {
         </Text>
       </Section>
 
-      <OtpAutofill code="OneTimePassword" domain="Domain" />
+      <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">
+        <Trans>If you didn't try to log in, you can safely ignore this email — your account is secure.</Trans>
+      </Text>
     </TransactionalEmail>
   );
 }
diff --git a/application/account/WebApp/emails/templates/StartSignup.tsx b/application/account/WebApp/emails/templates/StartSignup.tsx
@@ -13,7 +13,11 @@ type StartSignupProps = {
 
 export default function StartSignup({ locale }: Readonly<StartSignupProps>) {
   return (
-    <TransactionalEmail locale={locale} preview="Confirm your email address">
+    <TransactionalEmail
+      locale={locale}
+      preview="Confirm your email address"
+      otpAutofill={<OtpAutofill code="OneTimePassword" domain="Domain" />}
+    >
       <Subject>
         <Trans>Confirm your email address</Trans>
       </Subject>
@@ -32,7 +36,9 @@ export default function StartSignup({ locale }: Readonly<StartSignupProps>) {
         </Text>
       </Section>
 
-      <OtpAutofill code="OneTimePassword" domain="Domain" />
+      <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">
+        <Trans>If you didn't request to sign up, you can safely ignore this email.</Trans>
+      </Text>
     </TransactionalEmail>
   );
 }
diff --git a/application/account/WebApp/emails/templates/UnknownUser.tsx b/application/account/WebApp/emails/templates/UnknownUser.tsx
@@ -37,6 +37,10 @@ export default function UnknownUser({ locale }: Readonly<UnknownUserProps>) {
           .
         </Trans>
       </Text>
+
+      <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">
+        <Trans>If this wasn't you, no action is needed — no account was created.</Trans>
+      </Text>
     </TransactionalEmail>
   );
 }
diff --git a/application/account/WebApp/emails/translations/locale/da-DK.po b/application/account/WebApp/emails/translations/locale/da-DK.po
@@ -16,18 +16,45 @@ msgstr ""
 msgid "<0/> invited you to join PlatformPlatform."
 msgstr "<0/> har inviteret dig til at deltage i PlatformPlatform."
 
+msgid "Compliance"
+msgstr "Compliance"
+
 msgid "Confirm your email address"
 msgstr "Bekræft din e-mailadresse"
 
+msgid "DPA"
+msgstr "DPA"
+
 msgid "Enter it in your open browser window. It is only valid for a few minutes."
 msgstr "Indtast den i dit åbne browservindue. Den er kun gyldig i få minutter."
 
 msgid "Here's your new verification code"
 msgstr "Her er din nye bekræftelseskode"
 
+msgid "If this wasn't you, no action is needed — no account was created."
+msgstr "Hvis det ikke var dig, behøver du ikke gøre noget — der blev ikke oprettet en konto."
+
+msgid "If you didn't request a new code, you can safely ignore this email."
+msgstr "Hvis du ikke har anmodet om en ny kode, kan du roligt ignorere denne e-mail."
+
+msgid "If you didn't request to sign up, you can safely ignore this email."
+msgstr "Hvis du ikke har anmodet om at oprette en konto, kan du roligt ignorere denne e-mail."
+
+msgid "If you didn't try to log in, you can safely ignore this email — your account is secure."
+msgstr "Hvis du ikke har forsøgt at logge ind, kan du roligt ignorere denne e-mail — din konto er sikker."
+
+msgid "If you don't recognize the sender, you can safely ignore this email."
+msgstr "Hvis du ikke kender afsenderen, kan du roligt ignorere denne e-mail."
+
 msgid "PlatformPlatform login verification code"
 msgstr "PlatformPlatform-bekræftelseskode til login"
 
+msgid "Privacy"
+msgstr "Privatliv"
+
+msgid "Terms"
+msgstr "Vilkår"
+
 msgid "This code will expire in a few minutes."
 msgstr "Denne kode udløber om få minutter."
 
diff --git a/application/account/WebApp/emails/translations/locale/en-US.po b/application/account/WebApp/emails/translations/locale/en-US.po
@@ -16,18 +16,45 @@ msgstr ""
 msgid "<0/> invited you to join PlatformPlatform."
 msgstr "<0/> invited you to join PlatformPlatform."
 
+msgid "Compliance"
+msgstr "Compliance"
+
 msgid "Confirm your email address"
 msgstr "Confirm your email address"
 
+msgid "DPA"
+msgstr "DPA"
+
 msgid "Enter it in your open browser window. It is only valid for a few minutes."
 msgstr "Enter it in your open browser window. It is only valid for a few minutes."
 
 msgid "Here's your new verification code"
 msgstr "Here's your new verification code"
 
+msgid "If this wasn't you, no action is needed — no account was created."
+msgstr "If this wasn't you, no action is needed — no account was created."
+
+msgid "If you didn't request a new code, you can safely ignore this email."
+msgstr "If you didn't request a new code, you can safely ignore this email."
+
+msgid "If you didn't request to sign up, you can safely ignore this email."
+msgstr "If you didn't request to sign up, you can safely ignore this email."
+
+msgid "If you didn't try to log in, you can safely ignore this email — your account is secure."
+msgstr "If you didn't try to log in, you can safely ignore this email — your account is secure."
+
+msgid "If you don't recognize the sender, you can safely ignore this email."
+msgstr "If you don't recognize the sender, you can safely ignore this email."
+
 msgid "PlatformPlatform login verification code"
 msgstr "PlatformPlatform login verification code"
 
+msgid "Privacy"
+msgstr "Privacy"
+
+msgid "Terms"
+msgstr "Terms"
+
 msgid "This code will expire in a few minutes."
 msgstr "This code will expire in a few minutes."
 
diff --git a/application/account/WebApp/routes/components/-components/EmailsPreview.tsx b/application/account/WebApp/routes/components/-components/EmailsPreview.tsx
@@ -1,5 +1,6 @@
 import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
+import { ExternalLinkIcon } from "lucide-react";
 import { useState } from "react";
 
 const TEMPLATES = ["StartSignup", "StartLogin", "ResendEmailLogin", "UnknownUser", "InviteUser"] as const;
@@ -60,6 +61,22 @@ export function EmailsPreview() {
           className="block h-[40rem] w-full border-0 bg-white"
         />
       </div>
+
+      <p className="text-sm text-muted-foreground">
+        <Trans>
+          Need a new building block? Browse the MIT-licensed recipes at{" "}
+          <a
+            href="https://react.email/components"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 underline"
+          >
+            react.email/components
+            <ExternalLinkIcon className="size-[0.875rem]" />
+          </a>{" "}
+          and copy the source into <code>application/shared-webapp/emails/components/</code>.
+        </Trans>
+      </p>
     </div>
   );
 }
diff --git a/application/account/WebApp/shared/translations/locale/da-DK.po b/application/account/WebApp/shared/translations/locale/da-DK.po
@@ -716,7 +716,7 @@ msgid "Complete your payment to activate your subscription."
 msgstr "Gennemfør din betaling for at aktivere dit abonnement."
 
 msgid "Compliance"
-msgstr "Overholdelse"
+msgstr "Compliance"
 
 msgid "Components"
 msgstr "Komponenter"
@@ -1673,6 +1673,9 @@ msgstr "Navigation og genveje"
 msgid "NavigationMenu"
 msgstr "NavigationMenu"
 
+msgid "Need a new building block? Browse the MIT-licensed recipes at <0>react.email/components<1/></0> and copy the source into <2>application/shared-webapp/emails/components/</2>."
+msgstr "Brug for en ny komponent? Gennemse de MIT-licenserede opskrifter på <0>react.email/components<1/></0>, og kopiér koden ind i <2>application/shared-webapp/emails/components/</2>."
+
 msgid "Need help? Our support team is here to assist you."
 msgstr "Har du brug for hjælp? Vores supportteam er klart til at hjælpe."
 
diff --git a/application/account/WebApp/shared/translations/locale/en-US.po b/application/account/WebApp/shared/translations/locale/en-US.po
@@ -1675,6 +1675,9 @@ msgstr "Navigation and shortcuts"
 msgid "NavigationMenu"
 msgstr "NavigationMenu"
 
+msgid "Need a new building block? Browse the MIT-licensed recipes at <0>react.email/components<1/></0> and copy the source into <2>application/shared-webapp/emails/components/</2>."
+msgstr "Need a new building block? Browse the MIT-licensed recipes at <0>react.email/components<1/></0> and copy the source into <2>application/shared-webapp/emails/components/</2>."
+
 msgid "Need help? Our support team is here to assist you."
 msgstr "Need help? Our support team is here to assist you."
 
diff --git a/application/main/WebApp/public/email/logo-640x88.png b/application/main/WebApp/public/email/logo-640x88.png
diff --git a/application/shared-kernel/SharedKernel/Emails/EmailHelpers.cs b/application/shared-kernel/SharedKernel/Emails/EmailHelpers.cs
@@ -13,14 +13,19 @@ namespace SharedKernel.Emails;
 //
 // Scriban performs parameter binding and type coercion based on the C# signatures below — no manual
 // argument unpacking is needed (in contrast to Handlebars.Net's untyped Arguments dictionary).
+//
+// Templates can also reference globals exposed alongside the helpers — currently `{{ PublicUrl }}`,
+// the trimmed PUBLIC_URL of the running deploy, used by shared components like <Footer> to
+// construct environment-correct links (localhost / staging / production all get their own host).
 internal static class EmailHelpers
 {
-    public static ScriptObject CreateScriptObject()
+    public static ScriptObject CreateScriptObject(string publicUrl)
     {
         var scriptObject = new ScriptObject();
         scriptObject.Import("format_currency", FormatCurrency);
         scriptObject.Import("format_date", FormatDate);
         scriptObject.Import("pluralize", Pluralize);
+        scriptObject.SetValue("PublicUrl", publicUrl.TrimEnd('/'), true);
         return scriptObject;
     }
 
diff --git a/application/shared-kernel/SharedKernel/Emails/EmailRenderingConfiguration.cs b/application/shared-kernel/SharedKernel/Emails/EmailRenderingConfiguration.cs
@@ -3,6 +3,7 @@
 using Microsoft.Extensions.FileProviders;
 using Scriban.Runtime;
 using SharedKernel.Configuration;
+using SharedKernel.SinglePageApp;
 
 namespace SharedKernel.Emails;
 
@@ -39,8 +40,9 @@ private static string ResolveEmailsDistPath(string webAppProjectName)
         public IServiceCollection AddEmailRendering(string webAppProjectName)
         {
             var emailsDistPath = ResolveEmailsDistPath(webAppProjectName);
+            var publicUrl = Environment.GetEnvironmentVariable(SinglePageAppConfiguration.PublicUrlKey) ?? string.Empty;
 
-            services.AddSingleton<ScriptObject>(_ => EmailHelpers.CreateScriptObject());
+            services.AddSingleton<ScriptObject>(_ => EmailHelpers.CreateScriptObject(publicUrl));
 
             services.AddSingleton<IEmailTemplateLoader>(_ => new FileSystemEmailTemplateLoader(emailsDistPath, !SharedInfrastructureConfiguration.IsRunningInAzure));
             services.AddSingleton<IEmailRenderer, ScribanEmailRenderer>();
diff --git a/application/shared-kernel/Tests/Emails/ScribanEmailRendererTests.cs b/application/shared-kernel/Tests/Emails/ScribanEmailRendererTests.cs
@@ -7,7 +7,7 @@ namespace SharedKernel.Tests.Emails;
 
 public sealed class ScribanEmailRendererTests
 {
-    private readonly ScriptObject _helpers = EmailHelpers.CreateScriptObject();
+    private readonly ScriptObject _helpers = EmailHelpers.CreateScriptObject("https://app.platformplatform.net");
 
     private ScribanEmailRenderer CreateRenderer(string html, string plainText)
     {
@@ -262,6 +262,40 @@ public void RenderEmail_WhenModelHasPascalCaseProperties_ShouldPreserveOriginalN
         result.PlainTextBody.Should().Be("Code: ABC123 for Acme");
     }
 
+    [Fact]
+    public void RenderEmail_WhenTemplateReferencesPublicUrl_ShouldUseGlobalFromHelpers()
+    {
+        // Regression guard for the {{ PublicUrl }} global injected by EmailHelpers.CreateScriptObject.
+        // Shared components (e.g., <Footer>) reference this global to construct legal links that resolve
+        // to the deploy's host without each handler having to thread PUBLIC_URL through every model.
+        var html = "<html><head><title>Footer test</title></head><body><a href=\"{{PublicUrl}}/legal/privacy\">Privacy</a></body></html>";
+        var renderer = CreateRenderer(html, "Privacy: {{PublicUrl}}/legal/privacy");
+        var template = new TestTemplate("footer-test", "en-US", new { });
+
+        // Act
+        var result = renderer.RenderEmail(template);
+
+        // Assert
+        result.HtmlBody.Should().Contain("href=\"https://app.platformplatform.net/legal/privacy\"");
+        result.PlainTextBody.Should().Be("Privacy: https://app.platformplatform.net/legal/privacy");
+    }
+
+    [Fact]
+    public void CreateScriptObject_WhenPublicUrlHasTrailingSlash_ShouldTrimIt()
+    {
+        // Regression guard against accidental double-slashes like https://host//legal/privacy when the
+        // PUBLIC_URL env var is configured with a trailing slash.
+        var helpers = EmailHelpers.CreateScriptObject("https://app.platformplatform.net/");
+        var html = "<html><head><title>x</title></head><body>{{PublicUrl}}/legal/terms</body></html>";
+        var renderer = new ScribanEmailRenderer(helpers, new InMemoryEmailTemplateLoader(html, ""));
+        var template = new TestTemplate("trim-test", "en-US", new { });
+
+        var result = renderer.RenderEmail(template);
+
+        result.HtmlBody.Should().Contain("https://app.platformplatform.net/legal/terms");
+        result.HtmlBody.Should().NotContain("//legal/terms");
+    }
+
     [Fact]
     public void RenderEmail_WhenTemplateHasParseError_ShouldThrowWithTemplateName()
     {
diff --git a/application/shared-webapp/emails/build/build.ts b/application/shared-webapp/emails/build/build.ts
@@ -24,9 +24,15 @@ const LOCALES = Object.keys(i18nConfig);
 // through the JSX helpers — typically those that live inside href attributes or Lingui <Trans>
 // strings (see emails.md "Exception — HTML attributes and Trans strings"). Applied only to the
 // preview render output, never to the production .html/.txt artifacts.
+// PublicUrl is left empty in preview output so every URL renders as a root-relative path
+// (`/email/logo.png`, `/legal/privacy`, etc.). The browser resolves them against the host serving
+// the iframe — `app.dev.localhost` in dev, `staging.platformplatform.net` in stage, `app.platform
+// platform.net` in prod — so the preview always loads its assets from the same host as the SPA
+// it's embedded in. SignupUrl and LoginUrl follow the same convention for the same reason.
 const PREVIEW_PLACEHOLDER_VALUES: Record<string, string> = {
-  SignupUrl: "https://app.platformplatform.net/signup",
-  LoginUrl: "https://app.platformplatform.net/login",
+  PublicUrl: "",
+  SignupUrl: "/signup",
+  LoginUrl: "/login",
   TenantName: "Acme Corp"
 };
 
diff --git a/application/shared-webapp/emails/components/Footer.tsx b/application/shared-webapp/emails/components/Footer.tsx
diff --git a/application/shared-webapp/emails/components/Header.tsx b/application/shared-webapp/emails/components/Header.tsx
diff --git a/application/shared-webapp/emails/components/TransactionalEmail.tsx b/application/shared-webapp/emails/components/TransactionalEmail.tsx
diff --git a/application/shared-webapp/emails/lingui.config.ts b/application/shared-webapp/emails/lingui.config.ts
diff --git a/application/shared-webapp/emails/translations/locale/da-DK.po b/application/shared-webapp/emails/translations/locale/da-DK.po
diff --git a/application/shared-webapp/emails/translations/locale/en-US.po b/application/shared-webapp/emails/translations/locale/en-US.po

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,10 @@ export default function UnknownUser({ locale }: Readonly<UnknownUserProps>) {`
`37`	`37`	`.`
`38`	`38`	`</Trans>`
`39`	`39`	`</Text>`
	`40`	`+`
	`41`	`+ <Text className="email-muted m-[0px] mt-[16px] text-center text-[12px] leading-[20px] text-[#64748b]">`
	`42`	`+ <Trans>If this wasn't you, no action is needed — no account was created.</Trans>`
	`43`	`+ </Text>`
`40`	`44`	`</TransactionalEmail>`
`41`	`45`	`);`
`42`	`46`	`}`