move switch statement to wrapper

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

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

@@ -3,7 +3,12 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
-import { AnonLayoutComponent, IconType } from "./anon-layout.component";
+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,
@@ -15,17 +20,28 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageSubtitle: string;
   protected pageIcon: IconType;
 
+  protected icon: Icon;
+
   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"];
+
+    this.pageIcon = this.route.snapshot.firstChild.data["pageIcon"]; // don't translate
   }
 
   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.html

@@ -3,8 +3,8 @@
 >
   <div class="tw-text-center">
     <div class="tw-px-8">
-      <div *ngIf="pageIcon" class="tw-mb-8">
-        <bit-icon [icon]="pageIcon"></bit-icon>
+      <div *ngIf="icon" class="tw-mb-8">
+        <bit-icon [icon]="icon"></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,9 +6,6 @@ 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,
@@ -19,9 +16,8 @@ export type IconType = "lock"; // add more options as we use more icons
 export class AnonLayoutComponent {
   @Input() title: string;
   @Input() subtitle: string;
-  @Input() icon: IconType;
+  @Input() icon: Icon;
 
-  protected pageIcon: Icon | null;
   protected logo = BitwardenLogo;
   protected version: string;
   protected year = "2024";
@@ -29,14 +25,6 @@ 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,6 +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 { AnonLayoutComponent } from "./anon-layout.component";
 
@@ -27,7 +28,7 @@ export default {
   args: {
     title: "The Page Title",
     subtitle: "The subtitle (optional)",
-    icon: "lock",
+    icon: IconLock,
   },
 } as Meta;
 
@@ -37,14 +38,13 @@ export const WithPrimaryContent: Story = {
   render: (args) => ({
     props: args,
     template:
-      /**
-       * The projected content (i.e. the <div> ) and styling below is just a
-       * sample and could be replaced with any content and styling
-       */
+      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
+        <div class="tw-max-w-md">
+          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
+          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
+        </div>
       </auth-anon-layout>
     `,
   }),
@@ -54,15 +54,16 @@ export const WithSecondaryContent: Story = {
   render: (args) => ({
     props: args,
     template:
-      // Notice that slot="secondary" is requred to project any secondary content:
+      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
+      // Notice that slot="secondary" is requred to project any secondary content.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div>
+        <div class="tw-max-w-md">
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
 
-        <div slot="secondary" class="text-center">
+        <div slot="secondary" class="text-center tw-max-w-md">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <button bitButton>Perform Action</button>
         </div>
@@ -74,18 +75,21 @@ export const WithSecondaryContent: Story = {
 export const WithLongContent: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template:
+      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
+      `
       <auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?">
-        <div>
+        <div class="tw-max-w-md">
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
         </div>
 
-        <div slot="secondary" class="text-center">
+        <div slot="secondary" class="text-center tw-max-w-md">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?          </p>
           <button bitButton>Perform Action</button>
         </div>
+
       </auth-anon-layout>
     `,
   }),
@@ -94,9 +98,11 @@ export const WithLongContent: Story = {
 export const WithIcon: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template:
+      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
+      `
       <auth-anon-layout [title]="title" [subtitle]="subtitle" [icon]="icon">
-        <div>
+        <div class="tw-max-w-md">
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>