translate page title/subtitle, and refactor how icon is added

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

@@ -209,8 +209,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "The Page Title",
-          pageSubtitle: "The Page Subtitle",
+          pageTitle: "logIn", // example of a translation key from messages.json
+          pageSubtitle: "loginWithMasterPassword", // example of a translation key from messages.json
+          pageIcon: "lock", // example of a string (of type IconType) that will show a specified icon
         },
       },
     ],

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

@@ -1,4 +1,4 @@
-<auth-anon-layout [title]="pageTitle" [subtitle]="pageSubtitle">
+<auth-anon-layout [title]="pageTitle" [subtitle]="pageSubtitle" [icon]="pageIcon">
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>
 </auth-anon-layout>

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

@@ -1,7 +1,9 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
 
-import { AnonLayoutComponent } from "./anon-layout.component";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { AnonLayoutComponent, IconType } from "./anon-layout.component";
 
 @Component({
   standalone: true,
@@ -9,17 +11,23 @@ import { AnonLayoutComponent } from "./anon-layout.component";
   imports: [AnonLayoutComponent, RouterModule],
 })
 export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
-  pageTitle: string;
-  pageSubtitle: string;
+  protected pageTitle: string;
+  protected pageSubtitle: string;
+  protected pageIcon: IconType;
 
-  constructor(private route: ActivatedRoute) {
-    this.pageTitle = this.route.snapshot.firstChild.data["pageTitle"];
-    this.pageSubtitle = this.route.snapshot.firstChild.data["pageSubtitle"];
+  constructor(
+    private route: ActivatedRoute,
+    private i18nService: I18nService,
+  ) {
+    this.pageTitle = this.i18nService.t(this.route.snapshot.firstChild.data["pageTitle"]);
+    this.pageSubtitle = this.i18nService.t(this.route.snapshot.firstChild.data["pageSubtitle"]);
+    this.pageIcon = this.route.snapshot.firstChild.data["pageIcon"];
   }
 
-  async ngOnInit() {
+  ngOnInit() {
     document.body.classList.add("layout_frontend");
   }
+
   ngOnDestroy() {
     document.body.classList.remove("layout_frontend");
   }

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -3,8 +3,8 @@
 >
   <div class="tw-text-center">
     <div class="tw-px-8">
-      <div *ngIf="icon" class="tw-mb-8">
-        <bit-icon [icon]="icon"></bit-icon>
+      <div *ngIf="pageIcon" class="tw-mb-8">
+        <bit-icon [icon]="pageIcon"></bit-icon>
       </div>
       <bit-icon [icon]="logo" class="tw-mx-auto tw-block tw-max-w-72 sm:tw-max-w-xs"></bit-icon>
     </div>

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

@@ -6,6 +6,9 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { IconModule, Icon } from "../../../../components/src/icon";
 import { TypographyModule } from "../../../../components/src/typography";
 import { BitwardenLogo } from "../../icons/bitwarden-logo";
+import { IconLock } from "../../icons/icon-lock";
+
+export type IconType = "lock"; // add more options as we use more icons
 
 @Component({
   standalone: true,
@@ -16,8 +19,9 @@ import { BitwardenLogo } from "../../icons/bitwarden-logo";
 export class AnonLayoutComponent {
   @Input() title: string;
   @Input() subtitle: string;
-  @Input() icon: Icon;
+  @Input() icon: IconType;
 
+  protected pageIcon: Icon | null;
   protected logo = BitwardenLogo;
   protected version: string;
   protected year = "2024";
@@ -25,6 +29,14 @@ export class AnonLayoutComponent {
   constructor(private platformUtilsService: PlatformUtilsService) {}
 
   async ngOnInit() {
+    switch (this.icon) {
+      case "lock":
+        this.pageIcon = IconLock;
+        break;
+      default:
+        this.pageIcon = null;
+    }
+
     this.year = new Date().getFullYear().toString();
     this.version = await this.platformUtilsService.getApplicationVersion();
   }

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

@@ -3,7 +3,6 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { ButtonModule } from "../../../../components/src/button";
-import { IconLock } from "../../icons/icon-lock";
 
 import { AnonLayoutComponent } from "./anon-layout.component";
 
@@ -28,7 +27,7 @@ export default {
   args: {
     title: "The Page Title",
     subtitle: "The subtitle (optional)",
-    icon: IconLock,
+    icon: "lock",
   },
 } as Meta;