Auth/PM-13318 - AnonLayoutWrapperData Refactor to add full Translation support (#11513)

* PM-13318 - AnonLayoutWrapperData refactor to support all possible string scenarios (untranslated string, translated string, and translated string with placeholders)

* PM-13318 - Fix accidental check in

* PM-13318 - Revert the correct change.

* PM-13318 - Fix test failures

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -9,7 +9,7 @@ import {
   AnonLayoutWrapperDataService,
 } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Icon, IconModule } from "@bitwarden/components";
+import { Icon, IconModule, Translation } from "@bitwarden/components";
 
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -90,11 +90,11 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
 
     if (firstChildRouteData["pageTitle"] !== undefined) {
-      this.pageTitle = this.i18nService.t(firstChildRouteData["pageTitle"]);
+      this.pageTitle = this.handleStringOrTranslation(firstChildRouteData["pageTitle"]);
     }
 
     if (firstChildRouteData["pageSubtitle"] !== undefined) {
-      this.pageSubtitle = this.i18nService.t(firstChildRouteData["pageSubtitle"]);
+      this.pageSubtitle = this.handleStringOrTranslation(firstChildRouteData["pageSubtitle"]);
     }
 
     if (firstChildRouteData["pageIcon"] !== undefined) {
@@ -132,19 +132,11 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
 
     if (data.pageTitle) {
-      this.pageTitle = this.i18nService.t(data.pageTitle);
+      this.pageTitle = this.handleStringOrTranslation(data.pageTitle);
     }
 
     if (data.pageSubtitle) {
-      // If you pass just a string, we translate it by default
+      this.pageSubtitle = this.handleStringOrTranslation(data.pageSubtitle);
-      if (typeof data.pageSubtitle === "string") {
-        this.pageSubtitle = this.i18nService.t(data.pageSubtitle);
-      } else {
-        // if you pass an object, you can specify if you want to translate it or not
-        this.pageSubtitle = data.pageSubtitle.translate
-          ? this.i18nService.t(data.pageSubtitle.subtitle)
-          : data.pageSubtitle.subtitle;
-      }
     }
 
     if (data.pageIcon) {
@@ -168,6 +160,16 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
   }
 
+  private handleStringOrTranslation(value: string | Translation): string {
+    if (typeof value === "string") {
+      // If it's a string, return it as is
+      return value;
+    }
+
+    // If it's a Translation object, translate it
+    return this.i18nService.t(value.key, ...(value.placeholders ?? []));
+  }
+
   private resetPageData() {
     this.pageTitle = null;
     this.pageSubtitle = null;

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -221,8 +221,12 @@ export const DefaultContentExample: Story = {
 
 // Dynamic Content Example
 const initialData: ExtensionAnonLayoutWrapperData = {
-  pageTitle: "setAStrongPassword",
+  pageTitle: {
-  pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+    key: "setAStrongPassword",
+  },
+  pageSubtitle: {
+    key: "finishCreatingYourAccountBySettingAPassword",
+  },
   pageIcon: LockIcon,
   showAcctSwitcher: true,
   showBackButton: true,
@@ -230,8 +234,12 @@ const initialData: ExtensionAnonLayoutWrapperData = {
 };
 
 const changedData: ExtensionAnonLayoutWrapperData = {
-  pageTitle: "enterpriseSingleSignOn",
+  pageTitle: {
-  pageSubtitle: "checkYourEmail",
+    key: "enterpriseSingleSignOn",
+  },
+  pageSubtitle: {
+    key: "checkYourEmail",
+  },
   pageIcon: RegistrationCheckEmailIcon,
   showAcctSwitcher: false,
   showBackButton: false,

apps/browser/src/popup/app-routing.module.ts

@@ -449,7 +449,9 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
         data: {
           pageIcon: LockIcon,
-          pageTitle: "yourVaultIsLockedV2",
+          pageTitle: {
+            key: "yourVaultIsLockedV2",
+          },
           showReadonlyHostname: true,
           showAcctSwitcher: true,
         } satisfies ExtensionAnonLayoutWrapperData,
@@ -471,7 +473,9 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
           state: "signup",
-          pageTitle: "createAccount",
+          pageTitle: {
+            key: "createAccount",
+          },
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
           {
@@ -492,8 +496,12 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "setAStrongPassword",
+          pageTitle: {
-          pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+            key: "setAStrongPassword",
+          },
+          pageSubtitle: {
+            key: "finishCreatingYourAccountBySettingAPassword",
+          },
           state: "finish-signup",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -508,8 +516,12 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
         component: SetPasswordJitComponent,
         data: {
-          pageTitle: "joinOrganization",
+          pageTitle: {
-          pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
+            key: "joinOrganization",
+          },
+          pageSubtitle: {
+            key: "finishJoiningThisOrganizationBySettingAMasterPassword",
+          },
           state: "set-password-jit",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },

apps/desktop/src/app/app-routing.module.ts

@@ -141,8 +141,12 @@ const routes: Routes = [
           path: "hint",
           canActivate: [unauthGuardFn()],
           data: {
-            pageTitle: "requestPasswordHint",
+            pageTitle: {
-            pageSubtitle: "enterYourAccountEmailAddressAndYourPasswordHintWillBeSentToYou",
+              key: "requestPasswordHint",
+            },
+            pageSubtitle: {
+              key: "enterYourAccountEmailAddressAndYourPasswordHintWillBeSentToYou",
+            },
             pageIcon: UserLockIcon,
           } satisfies AnonLayoutWrapperData,
           children: [
@@ -164,7 +168,11 @@ const routes: Routes = [
       {
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
-        data: { pageTitle: "createAccount" } satisfies AnonLayoutWrapperData,
+        data: {
+          pageTitle: {
+            key: "createAccount",
+          },
+        } satisfies AnonLayoutWrapperData,
         children: [
           {
             path: "",
@@ -184,8 +192,12 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "setAStrongPassword",
+          pageTitle: {
-          pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+            key: "setAStrongPassword",
+          },
+          pageSubtitle: {
+            key: "finishCreatingYourAccountBySettingAPassword",
+          },
         } satisfies AnonLayoutWrapperData,
         children: [
           {
@@ -199,7 +211,9 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
         data: {
           pageIcon: LockIcon,
-          pageTitle: "yourVaultIsLockedV2",
+          pageTitle: {
+            key: "yourVaultIsLockedV2",
+          },
           showReadonlyHostname: true,
         } satisfies AnonLayoutWrapperData,
         children: [
@@ -214,8 +228,12 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
         component: SetPasswordJitComponent,
         data: {
-          pageTitle: "joinOrganization",
+          pageTitle: {
-          pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
+            key: "joinOrganization",
+          },
+          pageSubtitle: {
+            key: "finishJoiningThisOrganizationBySettingAMasterPassword",
+          },
         } satisfies AnonLayoutWrapperData,
       },
     ],

apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.spec.ts

@@ -14,22 +14,24 @@ describe("freeTrialTextResolver", () => {
   it("shows password manager text", () => {
     route.queryParams.product = `${ProductType.PasswordManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
-      "continueSettingUpFreeTrialPasswordManager",
+      key: "continueSettingUpFreeTrialPasswordManager",
-    );
+    });
   });
 
   it("shows secret manager text", () => {
     route.queryParams.product = `${ProductType.SecretsManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
-      "continueSettingUpFreeTrialSecretsManager",
+      key: "continueSettingUpFreeTrialSecretsManager",
-    );
+    });
   });
 
   it("shows default text", () => {
     route.queryParams.product = `${ProductType.PasswordManager},${ProductType.SecretsManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe("continueSettingUpFreeTrial");
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
+      key: "continueSettingUpFreeTrial",
+    });
   });
 });

apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.ts

@@ -1,10 +1,11 @@
 import { ActivatedRouteSnapshot, ResolveFn } from "@angular/router";
 
 import { ProductType } from "@bitwarden/common/billing/enums";
+import { Translation } from "@bitwarden/components";
 
-export const freeTrialTextResolver: ResolveFn<string | null> = (
+export const freeTrialTextResolver: ResolveFn<Translation | null> = (
   route: ActivatedRouteSnapshot,
-): string | null => {
+): Translation | null => {
   const { product } = route.queryParams;
   const products: ProductType[] = (product ?? "").split(",").map((p: string) => parseInt(p));
 
@@ -13,10 +14,16 @@ export const freeTrialTextResolver: ResolveFn<string | null> = (
 
   switch (true) {
     case onlyPasswordManager:
-      return "continueSettingUpFreeTrialPasswordManager";
+      return {
+        key: "continueSettingUpFreeTrialPasswordManager",
+      };
     case onlySecretsManager:
-      return "continueSettingUpFreeTrialSecretsManager";
+      return {
+        key: "continueSettingUpFreeTrialSecretsManager",
+      };
     default:
-      return "continueSettingUpFreeTrial";
+      return {
+        key: "continueSettingUpFreeTrial",
+      };
   }
 };

apps/web/src/app/oss-routing.module.ts

@@ -228,7 +228,9 @@ const routes: Routes = [
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "createAccount",
+          pageTitle: {
+            key: "createAccount",
+          },
           titleId: "createAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -250,8 +252,12 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "setAStrongPassword",
+          pageTitle: {
-          pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+            key: "setAStrongPassword",
+          },
+          pageSubtitle: {
+            key: "finishCreatingYourAccountBySettingAPassword",
+          },
           titleId: "setAStrongPassword",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -264,7 +270,9 @@ const routes: Routes = [
       {
         path: "send/:sendId/:key",
         data: {
-          pageTitle: "viewSend",
+          pageTitle: {
+            key: "viewSend",
+          },
           showReadonlyHostname: true,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -284,15 +292,21 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
         component: SetPasswordJitComponent,
         data: {
-          pageTitle: "joinOrganization",
+          pageTitle: {
-          pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
+            key: "joinOrganization",
+          },
+          pageSubtitle: {
+            key: "finishJoiningThisOrganizationBySettingAMasterPassword",
+          },
         } satisfies AnonLayoutWrapperData,
       },
       {
         path: "signup-link-expired",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "expiredLink",
+          pageTitle: {
+            key: "expiredLink",
+          },
         } satisfies AnonLayoutWrapperData,
         children: [
           {
@@ -308,7 +322,9 @@ const routes: Routes = [
         path: "sso",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "enterpriseSingleSignOn",
+          pageTitle: {
+            key: "enterpriseSingleSignOn",
+          },
           titleId: "enterpriseSingleSignOn",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -338,7 +354,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "logIn",
+          pageTitle: {
+            key: "logIn",
+          },
         },
       },
       ...extensionRefreshSwap(
@@ -354,7 +372,9 @@ const routes: Routes = [
             },
           ],
           data: {
-            pageTitle: "yourVaultIsLockedV2",
+            pageTitle: {
+              key: "yourVaultIsLockedV2",
+            },
             pageIcon: LockIcon,
             showReadonlyHostname: true,
           } satisfies AnonLayoutWrapperData,
@@ -369,7 +389,9 @@ const routes: Routes = [
             },
           ],
           data: {
-            pageTitle: "yourAccountIsLocked",
+            pageTitle: {
+              key: "yourAccountIsLocked",
+            },
             pageIcon: LockIcon,
             showReadonlyHostname: true,
           } satisfies AnonLayoutWrapperData,
@@ -390,7 +412,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "verifyIdentity",
+          pageTitle: {
+            key: "verifyIdentity",
+          },
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -408,7 +432,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "recoverAccountTwoStep",
+          pageTitle: {
+            key: "recoverAccountTwoStep",
+          },
           titleId: "recoverAccountTwoStep",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
@@ -416,7 +442,9 @@ const routes: Routes = [
         path: "accept-emergency",
         canActivate: [deepLinkGuard()],
         data: {
-          pageTitle: "emergencyAccess",
+          pageTitle: {
+            key: "emergencyAccess",
+          },
           titleId: "acceptEmergency",
           doNotSaveUrl: false,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
@@ -434,7 +462,9 @@ const routes: Routes = [
         path: "recover-delete",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "deleteAccount",
+          pageTitle: {
+            key: "deleteAccount",
+          },
           titleId: "deleteAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -453,7 +483,9 @@ const routes: Routes = [
         path: "verify-recover-delete",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "deleteAccount",
+          pageTitle: {
+            key: "deleteAccount",
+          },
           titleId: "deleteAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -468,7 +500,9 @@ const routes: Routes = [
         component: RemovePasswordComponent,
         canActivate: [authGuard],
         data: {
-          pageTitle: "removeMasterPassword",
+          pageTitle: {
+            key: "removeMasterPassword",
+          },
           titleId: "removeMasterPassword",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },

apps/web/src/app/tools/send/access.component.ts

@@ -157,8 +157,8 @@ export class AccessComponent implements OnInit {
     if (this.creatorIdentifier != null) {
       this.layoutWrapperDataService.setAnonLayoutWrapperData({
         pageSubtitle: {
-          subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier),
+          key: "sendAccessCreatorIdentifier",
-          translate: false,
+          placeholders: [this.creatorIdentifier],
         },
       });
     }

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts

@@ -4,20 +4,34 @@ import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
 
 import { AnonLayoutComponent } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Icon } from "@bitwarden/components";
+import { Icon, Translation } from "@bitwarden/components";
 
 import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
 
 export interface AnonLayoutWrapperData {
-  pageTitle?: string;
+  /**
-  pageSubtitle?:
+   * The optional title of the page.
-    | string
+   * If a string is provided, it will be presented as is (ex: Organization name)
-    | {
+   * If a Translation object (supports placeholders) is provided, it will be translated
-        subtitle: string;
+   */
-        translate: boolean;
+  pageTitle?: string | Translation;
-      };
+  /**
+   * The optional subtitle of the page.
+   * If a string is provided, it will be presented as is (ex: user's email)
+   * If a Translation object (supports placeholders) is provided, it will be translated
+   */
+  pageSubtitle?: string | Translation;
+  /**
+   * The optional icon to display on the page.
+   */
   pageIcon?: Icon;
+  /**
+   * Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
+   */
   showReadonlyHostname?: boolean;
+  /**
+   * Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
+   */
   maxWidth?: "md" | "3xl";
 }
 
@@ -71,11 +85,11 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
 
     if (firstChildRouteData["pageTitle"] !== undefined) {
-      this.pageTitle = this.i18nService.t(firstChildRouteData["pageTitle"]);
+      this.pageTitle = this.handleStringOrTranslation(firstChildRouteData["pageTitle"]);
     }
 
     if (firstChildRouteData["pageSubtitle"] !== undefined) {
-      this.pageSubtitle = this.i18nService.t(firstChildRouteData["pageSubtitle"]);
+      this.pageSubtitle = this.handleStringOrTranslation(firstChildRouteData["pageSubtitle"]);
     }
 
     if (firstChildRouteData["pageIcon"] !== undefined) {
@@ -101,19 +115,11 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
 
     if (data.pageTitle) {
-      this.pageTitle = this.i18nService.t(data.pageTitle);
+      this.pageTitle = this.handleStringOrTranslation(data.pageTitle);
     }
 
     if (data.pageSubtitle) {
-      // If you pass just a string, we translate it by default
+      this.pageSubtitle = this.handleStringOrTranslation(data.pageSubtitle);
-      if (typeof data.pageSubtitle === "string") {
-        this.pageSubtitle = this.i18nService.t(data.pageSubtitle);
-      } else {
-        // if you pass an object, you can specify if you want to translate it or not
-        this.pageSubtitle = data.pageSubtitle.translate
-          ? this.i18nService.t(data.pageSubtitle.subtitle)
-          : data.pageSubtitle.subtitle;
-      }
     }
 
     if (data.pageIcon) {
@@ -129,6 +135,16 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.changeDetectorRef.detectChanges();
   }
 
+  private handleStringOrTranslation(value: string | Translation): string {
+    if (typeof value === "string") {
+      // If it's a string, return it as is
+      return value;
+    }
+
+    // If it's a Translation object, translate it
+    return this.i18nService.t(value.key, ...(value.placeholders ?? []));
+  }
+
   private resetPageData() {
     this.pageTitle = null;
     this.pageSubtitle = null;

libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts

@@ -163,17 +163,20 @@ export const DefaultContentExample: Story = {
 
 // Dynamic Content Example
 const initialData: AnonLayoutWrapperData = {
-  pageTitle: "setAStrongPassword",
+  pageTitle: {
-  pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+    key: "setAStrongPassword",
+  },
+  pageSubtitle: {
+    key: "finishCreatingYourAccountBySettingAPassword",
+  },
   pageIcon: LockIcon,
 };
 
 const changedData: AnonLayoutWrapperData = {
-  pageTitle: "enterpriseSingleSignOn",
+  pageTitle: {
-  pageSubtitle: {
+    key: "enterpriseSingleSignOn",
-    subtitle: "user@email.com (non-translated)",
-    translate: false,
   },
+  pageSubtitle: "user@email.com (non-translated)",
   pageIcon: RegistrationCheckEmailIcon,
 };
 

libs/auth/src/angular/lock/lock.component.ts

@@ -233,10 +233,7 @@ export class LockV2Component implements OnInit, OnDestroy {
 
   private setEmailAsPageSubtitle(email: string) {
     this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
-      pageSubtitle: {
+      pageSubtitle: email,
-        subtitle: email,
-        translate: false,
-      },
     });
   }