move icon to router file

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

@@ -8,7 +8,7 @@ import {
   tdeDecryptionRequiredGuard,
   UnauthGuard,
 } from "@bitwarden/angular/auth/guards";
-import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
+import { AnonLayoutWrapperComponent, LockIcon } from "@bitwarden/auth/angular";
 
 import { flagEnabled, Flags } from "../utils/flags";
 
@@ -190,7 +190,7 @@ const routes: Routes = [
     ],
   },
 
-  // TODO: remove this example
+  // TODO-rr-bw: remove this example
   {
     path: "",
     component: AnonLayoutWrapperComponent,
@@ -211,12 +211,12 @@ const routes: Routes = [
         data: {
           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
+          pageIcon: LockIcon, // example of an icon to pass in
         },
       },
     ],
   },
-  // TODO: remove this example
+  // TODO-rr-bw: remove this example
 
   {
     path: "",

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

@@ -1,4 +1,4 @@
-<auth-anon-layout [title]="pageTitle" [subtitle]="pageSubtitle" [icon]="icon">
+<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

@@ -4,12 +4,9 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { Icon } from "../../../../components/src/icon";
-import { IconLock } from "../../icons/icon-lock";
 
 import { AnonLayoutComponent } from "./anon-layout.component";
 
-export type IconType = "lock"; // add more options as we use more icons
-
 @Component({
   standalone: true,
   templateUrl: "anon-layout-wrapper.component.html",
@@ -18,9 +15,7 @@ export type IconType = "lock"; // add more options as we use more icons
 export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageTitle: string;
   protected pageSubtitle: string;
-  protected pageIcon: IconType;
-
-  protected icon: Icon;
+  protected pageIcon: Icon;
 
   constructor(
     private route: ActivatedRoute,
@@ -34,14 +29,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     document.body.classList.add("layout_frontend");
-
-    switch (this.pageIcon) {
-      case "lock":
-        this.icon = IconLock;
-        break;
-      default:
-        this.icon = null;
-    }
   }
 
   ngOnDestroy() {

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

@@ -5,7 +5,7 @@ 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 { BitwardenLogo } from "../icons/bitwarden-logo.icon";
 
 @Component({
   standalone: true,

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

@@ -3,7 +3,7 @@ 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 { LockIcon } from "../icons";
 
 import { AnonLayoutComponent } from "./anon-layout.component";
 
@@ -28,7 +28,7 @@ export default {
   args: {
     title: "The Page Title",
     subtitle: "The subtitle (optional)",
-    icon: IconLock,
+    icon: LockIcon,
   },
 } as Meta;
 

libs/auth/src/angular/icons/index.ts

@@ -1 +1,3 @@
+export * from "./bitwarden-logo.icon";
+export * from "./lock.icon";
 export * from "./user-verification-biometrics-fingerprint.icon";

libs/auth/src/angular/icons/lock.icon.ts

@@ -1,6 +1,6 @@
 import { svgIcon } from "@bitwarden/components";
 
-export const IconLock = svgIcon`
+export const LockIcon = svgIcon`
   <svg width="65" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path class="tw-fill-primary-500" d="M36.554 52.684a4.133 4.133 0 0 0-.545-2.085 4.088 4.088 0 0 0-1.514-1.518 4.022 4.022 0 0 0-4.114.072 4.094 4.094 0 0 0-1.461 1.57 4.153 4.153 0 0 0 .175 4.16c.393.616.94 1.113 1.588 1.44v6.736a1.864 1.864 0 0 0 .498 1.365c.17.18.376.328.603.425a1.781 1.781 0 0 0 1.437 0c.227-.097.432-.242.603-.425a1.864 1.864 0 0 0 .499-1.365v-6.745a4.05 4.05 0 0 0 1.62-1.498c.392-.64.604-1.377.611-2.132ZM57.86 25.527h-2.242c-.175 0-.35-.037-.514-.105a1.3 1.3 0 0 1-.434-.297 1.379 1.379 0 0 1-.39-.963v-1a23 23 0 0 0-5.455-15.32A22.46 22.46 0 0 0 34.673.101a21.633 21.633 0 0 0-8.998 1.032 21.777 21.777 0 0 0-7.813 4.637 22.118 22.118 0 0 0-5.286 7.446 22.376 22.376 0 0 0-1.855 8.975v1.62c0 .03-.118 1.705-1.555 1.73h-2.02A6.723 6.723 0 0 0 2.37 27.56 6.887 6.887 0 0 0 .4 32.403V73.12a6.905 6.905 0 0 0 1.97 4.847A6.76 6.76 0 0 0 7.146 80h50.713a6.746 6.746 0 0 0 4.77-2.03 6.925 6.925 0 0 0 1.971-4.845V32.403a6.91 6.91 0 0 0-1.965-4.85 6.793 6.793 0 0 0-2.19-1.493 6.676 6.676 0 0 0-2.588-.53l.002-.003Zm-42.2-3.335c-.007-2.55.549-5.07 1.625-7.373a17.085 17.085 0 0 1 4.606-5.945 16.8 16.8 0 0 1 6.684-3.358 16.71 16.71 0 0 1 7.462-.115c3.835.91 7.245 3.12 9.665 6.266a17.61 17.61 0 0 1 3.64 11.02v1.475c0 .18-.035.358-.102.523a1.349 1.349 0 0 1-1.244.842H17.722a1.876 1.876 0 0 1-.744-.085 1.894 1.894 0 0 1-1.119-.957 1.98 1.98 0 0 1-.204-.728v-1.565h.005ZM59.663 73.12c0 .487-.19.952-.529 1.3a1.796 1.796 0 0 1-1.279.545H7.146a1.826 1.826 0 0 1-1.807-1.845V32.403a1.85 1.85 0 0 1 .523-1.3c.168-.17.365-.308.585-.4.22-.093.454-.14.691-.143h50.719c.479.005.938.2 1.276.545.339.345.526.81.526 1.295v40.717l.003.003Z" />
   </svg>