[PM-8236] Allow for additional data properties (#9278)

* allow for additional properties

* create interface for DataProperties and extend AnonLayouWrapperData

* move data properties to RouterService

* add docs

* add comment

* rewrite comment

apps/web/src/app/core/router.service.ts

@@ -12,6 +12,14 @@ import {
   GlobalState,
 } from "@bitwarden/common/platform/state";
 
+/**
+ * Data properties acceptable for use in route objects (see usage in oss-routing.module.ts for example)
+ */
+export interface DataProperties {
+  titleId?: string; // sets the title of the current HTML document (shows in browser tab)
+  doNotSaveUrl?: boolean; // choose to not keep track of the previous URL in memory
+}
+
 const DEEP_LINK_REDIRECT_URL = new KeyDefinition(ROUTER_DISK, "deepLinkRedirectUrl", {
   deserializer: (value: string) => value,
 });

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

@@ -40,6 +40,7 @@ import { UpdatePasswordComponent } from "./auth/update-password.component";
 import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "./auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "./auth/verify-recover-delete.component";
+import { DataProperties } from "./core";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { UserLayoutComponent } from "./layouts/user-layout.component";
 import { DomainRulesComponent } from "./settings/domain-rules.component";
@@ -54,7 +55,7 @@ const routes: Routes = [
   {
     path: "",
     component: FrontendLayoutComponent,
-    data: { doNotSaveUrl: true },
+    data: { doNotSaveUrl: true } satisfies DataProperties,
     children: [
       {
         path: "",
@@ -66,17 +67,17 @@ const routes: Routes = [
       {
         path: "login-with-device",
         component: LoginViaAuthRequestComponent,
-        data: { titleId: "loginWithDevice" },
+        data: { titleId: "loginWithDevice" } satisfies DataProperties,
       },
       {
         path: "login-with-passkey",
         component: LoginViaWebAuthnComponent,
-        data: { titleId: "loginWithPasskey" },
+        data: { titleId: "loginWithPasskey" } satisfies DataProperties,
       },
       {
         path: "admin-approval-requested",
         component: LoginViaAuthRequestComponent,
-        data: { titleId: "adminApprovalRequested" },
+        data: { titleId: "adminApprovalRequested" } satisfies DataProperties,
       },
       { path: "2fa", component: TwoFactorComponent, canActivate: [UnauthGuard] },
       {
@@ -88,7 +89,7 @@ const routes: Routes = [
         path: "register",
         component: TrialInitiationComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "createAccount" },
+        data: { titleId: "createAccount" } satisfies DataProperties,
       },
       {
         path: "trial",
@@ -99,18 +100,18 @@ const routes: Routes = [
         path: "sso",
         component: SsoComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "enterpriseSingleSignOn" },
+        data: { titleId: "enterpriseSingleSignOn" } satisfies DataProperties,
       },
       {
         path: "set-password",
         component: SetPasswordComponent,
-        data: { titleId: "setMasterPassword" },
+        data: { titleId: "setMasterPassword" } satisfies DataProperties,
       },
       {
         path: "hint",
         component: HintComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "passwordHint" },
+        data: { titleId: "passwordHint" } satisfies DataProperties,
       },
       {
         path: "lock",
@@ -122,12 +123,12 @@ const routes: Routes = [
         path: "accept-organization",
         canActivate: [deepLinkGuard()],
         component: AcceptOrganizationComponent,
-        data: { titleId: "joinOrganization", doNotSaveUrl: false },
+        data: { titleId: "joinOrganization", doNotSaveUrl: false } satisfies DataProperties,
       },
       {
         path: "accept-emergency",
         canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptEmergency", doNotSaveUrl: false },
+        data: { titleId: "acceptEmergency", doNotSaveUrl: false } satisfies DataProperties,
         loadComponent: () =>
           import("./auth/emergency-access/accept/accept-emergency.component").then(
             (mod) => mod.AcceptEmergencyComponent,
@@ -137,26 +138,26 @@ const routes: Routes = [
         path: "accept-families-for-enterprise",
         component: AcceptFamilySponsorshipComponent,
         canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false },
+        data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
       },
       { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
       {
         path: "recover-2fa",
         component: RecoverTwoFactorComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "recoverAccountTwoStep" },
+        data: { titleId: "recoverAccountTwoStep" } satisfies DataProperties,
       },
       {
         path: "recover-delete",
         component: RecoverDeleteComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
       },
       {
         path: "verify-recover-delete",
         component: VerifyRecoverDeleteComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
       },
       {
         path: "verify-recover-delete-org",
@@ -168,30 +169,30 @@ const routes: Routes = [
         path: "verify-recover-delete-provider",
         component: VerifyRecoverDeleteProviderComponent,
         canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
       },
       {
         path: "send/:sendId/:key",
         component: AccessComponent,
-        data: { title: "Bitwarden Send" },
+        data: { titleId: "Bitwarden Send" } satisfies DataProperties,
       },
       {
         path: "update-temp-password",
         component: UpdateTempPasswordComponent,
         canActivate: [AuthGuard],
-        data: { titleId: "updateTempPassword" },
+        data: { titleId: "updateTempPassword" } satisfies DataProperties,
       },
       {
         path: "update-password",
         component: UpdatePasswordComponent,
         canActivate: [AuthGuard],
-        data: { titleId: "updatePassword" },
+        data: { titleId: "updatePassword" } satisfies DataProperties,
       },
       {
         path: "remove-password",
         component: RemovePasswordComponent,
         canActivate: [AuthGuard],
-        data: { titleId: "removeMasterPassword" },
+        data: { titleId: "removeMasterPassword" } satisfies DataProperties,
       },
       {
         path: "migrate-legacy-encryption",
@@ -211,21 +212,29 @@ const routes: Routes = [
         path: "vault",
         loadChildren: () => VaultModule,
       },
-      { path: "sends", component: SendComponent, data: { titleId: "send" } },
+      {
+        path: "sends",
+        component: SendComponent,
+        data: { titleId: "send" } satisfies DataProperties,
+      },
       {
         path: "create-organization",
         component: CreateOrganizationComponent,
-        data: { titleId: "newOrganization" },
+        data: { titleId: "newOrganization" } satisfies DataProperties,
       },
       {
         path: "settings",
         children: [
           { path: "", pathMatch: "full", redirectTo: "account" },
-          { path: "account", component: AccountComponent, data: { titleId: "myAccount" } },
+          {
+            path: "account",
+            component: AccountComponent,
+            data: { titleId: "myAccount" } satisfies DataProperties,
+          },
           {
             path: "preferences",
             component: PreferencesComponent,
-            data: { titleId: "preferences" },
+            data: { titleId: "preferences" } satisfies DataProperties,
           },
           {
             path: "security",
@@ -234,7 +243,7 @@ const routes: Routes = [
           {
             path: "domain-rules",
             component: DomainRulesComponent,
-            data: { titleId: "domainRules" },
+            data: { titleId: "domainRules" } satisfies DataProperties,
           },
           {
             path: "subscription",
@@ -249,19 +258,19 @@ const routes: Routes = [
               {
                 path: "",
                 component: EmergencyAccessComponent,
-                data: { titleId: "emergencyAccess" },
+                data: { titleId: "emergencyAccess" } satisfies DataProperties,
               },
               {
                 path: ":id",
                 component: EmergencyAccessViewComponent,
-                data: { titleId: "emergencyAccess" },
+                data: { titleId: "emergencyAccess" } satisfies DataProperties,
               },
             ],
           },
           {
             path: "sponsored-families",
             component: SponsoredFamiliesComponent,
-            data: { titleId: "sponsoredFamilies" },
+            data: { titleId: "sponsoredFamilies" } satisfies DataProperties,
           },
         ],
       },
@@ -276,7 +285,7 @@ const routes: Routes = [
               import("./tools/import/import-web.component").then((mod) => mod.ImportWebComponent),
             data: {
               titleId: "importData",
-            },
+            } satisfies DataProperties,
           },
           {
             path: "export",
@@ -286,7 +295,7 @@ const routes: Routes = [
           {
             path: "generator",
             component: GeneratorComponent,
-            data: { titleId: "generator" },
+            data: { titleId: "generator" } satisfies DataProperties,
           },
         ],
       },