[CL-850] Remove anon layout default icon and require either icon or no icon (#16433)

libs/components/src/anon-layout/anon-layout-wrapper-data.service.ts

@@ -11,10 +11,10 @@ export abstract class AnonLayoutWrapperDataService {
    *
    * @param data - The data to set on the AnonLayoutWrapperComponent to feed into the AnonLayoutComponent.
    */
-  abstract setAnonLayoutWrapperData(data: AnonLayoutWrapperData): void;
+  abstract setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>): void;
 
   /**
    * Reactively gets the current AnonLayoutWrapperData.
    */
-  abstract anonLayoutWrapperData$(): Observable<AnonLayoutWrapperData>;
+  abstract anonLayoutWrapperData$(): Observable<Partial<AnonLayoutWrapperData>>;
 }

libs/components/src/anon-layout/anon-layout-wrapper.component.html

@@ -5,7 +5,6 @@
   [showReadonlyHostname]="showReadonlyHostname"
   [maxWidth]="maxWidth"
   [hideCardWrapper]="hideCardWrapper"
-  [hideIcon]="hideIcon"
   [hideBackgroundIllustration]="hideBackgroundIllustration"
 >
   <router-outlet></router-outlet>

libs/components/src/anon-layout/anon-layout-wrapper.component.ts

@@ -25,13 +25,9 @@ export interface AnonLayoutWrapperData {
    */
   pageSubtitle?: string | Translation | null;
   /**
-   * The optional icon to display on the page.
+   * The icon to display on the page. Pass null to hide the icon.
    */
-  pageIcon?: Icon | null;
-  /**
-   * Hides the default Bitwarden shield icon.
-   */
-  hideIcon?: boolean;
+  pageIcon: Icon | null;
   /**
    * Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
    */
@@ -59,11 +55,10 @@ export class AnonLayoutWrapperComponent implements OnInit {
 
   protected pageTitle?: string | null;
   protected pageSubtitle?: string | null;
-  protected pageIcon?: Icon | null;
+  protected pageIcon: Icon | null = null;
   protected showReadonlyHostname?: boolean | null;
   protected maxWidth?: AnonLayoutMaxWidth | null;
   protected hideCardWrapper?: boolean | null;
-  protected hideIcon?: boolean | null;
   protected hideBackgroundIllustration?: boolean | null;
 
   constructor(
@@ -115,10 +110,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
       this.pageIcon = firstChildRouteData["pageIcon"];
     }
 
-    if (firstChildRouteData["hideIcon"] !== undefined) {
-      this.hideIcon = firstChildRouteData["hideIcon"];
-    }
-
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
     this.maxWidth = firstChildRouteData["maxWidth"];
     this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
@@ -129,12 +120,12 @@ export class AnonLayoutWrapperComponent implements OnInit {
     this.anonLayoutWrapperDataService
       .anonLayoutWrapperData$()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((data: AnonLayoutWrapperData) => {
+      .subscribe((data: Partial<AnonLayoutWrapperData>) => {
         this.setAnonLayoutWrapperData(data);
       });
   }
 
-  private setAnonLayoutWrapperData(data: AnonLayoutWrapperData) {
+  private setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>) {
     if (!data) {
       return;
     }
@@ -166,11 +157,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
     if (data.hideBackgroundIllustration !== undefined) {
       this.hideBackgroundIllustration = data.hideBackgroundIllustration;
     }
-
-    if (data.hideIcon !== undefined) {
-      this.hideIcon = data.hideIcon;
-    }
-
     if (data.maxWidth !== undefined) {
       this.maxWidth = data.maxWidth;
     }
@@ -197,7 +183,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
     this.showReadonlyHostname = null;
     this.maxWidth = null;
     this.hideCardWrapper = null;
-    this.hideIcon = null;
     this.hideBackgroundIllustration = null;
   }
 }

libs/components/src/anon-layout/anon-layout-wrapper.stories.ts

@@ -147,7 +147,9 @@ export const DefaultContentExample: Story = {
         children: [
           {
             path: "default-example",
-            data: {},
+            data: {
+              pageIcon: LockIcon,
+            } satisfies AnonLayoutWrapperData,
             children: [
               {
                 path: "",

libs/components/src/anon-layout/anon-layout.component.html

@@ -14,13 +14,15 @@
   </a>
 
   <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
+    @let iconInput = icon();
+
     <!-- In some scenarios this icon's size is not limited by container width correctly -->
     <!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
     <div
-      *ngIf="!hideIcon()"
+      *ngIf="iconInput !== null"
       class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
     >
-      <bit-icon [icon]="icon()"></bit-icon>
+      <bit-icon [icon]="iconInput"></bit-icon>
     </div>
 
     <ng-container *ngIf="title()">

libs/components/src/anon-layout/anon-layout.component.ts

@@ -12,7 +12,6 @@ import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import {
-  AnonLayoutBitwardenShield,
   BackgroundLeftIllustration,
   BackgroundRightIllustration,
   BitwardenLogo,
@@ -45,11 +44,10 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
 
   readonly title = input<string>();
   readonly subtitle = input<string>();
-  readonly icon = model<Icon>();
+  readonly icon = model.required<Icon | null>();
   readonly showReadonlyHostname = input<boolean>(false);
   readonly hideLogo = input<boolean>(false);
   readonly hideFooter = input<boolean>(false);
-  readonly hideIcon = input<boolean>(false);
   readonly hideCardWrapper = input<boolean>(false);
   readonly hideBackgroundIllustration = input<boolean>(false);
 
@@ -99,11 +97,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
     this.maxWidth.set(this.maxWidth() ?? "md");
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
-
-    // If there is no icon input, then use the default icon
-    if (this.icon() == null) {
-      this.icon.set(AnonLayoutBitwardenShield);
-    }
   }
 
   async ngOnChanges(changes: SimpleChanges) {

libs/components/src/anon-layout/anon-layout.stories.ts

@@ -62,12 +62,8 @@ export default {
     }),
   ],
   render: (args) => {
-    const { useDefaultIcon, icon, ...rest } = args;
     return {
-      props: {
-        ...rest,
-        icon: useDefaultIcon ? null : icon,
-      },
+      props: args,
       template: /*html*/ `
         <auth-anon-layout
           [title]="title"
@@ -76,7 +72,6 @@ export default {
           [showReadonlyHostname]="showReadonlyHostname"
           [maxWidth]="maxWidth"
           [hideCardWrapper]="hideCardWrapper"
-          [hideIcon]="hideIcon"
           [hideLogo]="hideLogo"
           [hideFooter]="hideFooter"
           [hideBackgroundIllustration]="hideBackgroundIllustration"
@@ -110,11 +105,6 @@ export default {
     subtitle: { control: "text" },
 
     icon: { control: false, table: { disable: true } },
-    useDefaultIcon: {
-      control: false,
-      table: { disable: true },
-      description: "If true, passes null so component falls back to its built-in icon",
-    },
 
     showReadonlyHostname: { control: "boolean" },
     maxWidth: {
@@ -123,7 +113,6 @@ export default {
     },
 
     hideCardWrapper: { control: "boolean" },
-    hideIcon: { control: "boolean" },
     hideLogo: { control: "boolean" },
     hideFooter: { control: "boolean" },
     hideBackgroundIllustration: { control: "boolean" },
@@ -144,7 +133,6 @@ export default {
     showReadonlyHostname: false,
     maxWidth: "md",
     hideCardWrapper: false,
-    hideIcon: false,
     hideLogo: false,
     hideFooter: false,
     hideBackgroundIllustration: false,
@@ -208,12 +196,8 @@ export const NoWrapper: Story = {
   args: { hideCardWrapper: true },
 };
 
-export const DefaultIcon: Story = {
-  args: { useDefaultIcon: true },
-};
-
 export const NoIcon: Story = {
-  args: { hideIcon: true },
+  args: { icon: null },
 };
 
 export const NoLogo: Story = {
@@ -238,7 +222,7 @@ export const MinimalState: Story = {
     subtitle: undefined,
     contentLength: "normal",
     hideCardWrapper: true,
-    hideIcon: true,
+    icon: null,
     hideLogo: true,
     hideFooter: true,
     hideBackgroundIllustration: true,

libs/components/src/anon-layout/default-anon-layout-wrapper-data.service.ts

@@ -4,13 +4,13 @@ import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service
 import { AnonLayoutWrapperData } from "./anon-layout-wrapper.component";
 
 export class DefaultAnonLayoutWrapperDataService implements AnonLayoutWrapperDataService {
-  protected anonLayoutWrapperDataSubject = new Subject<AnonLayoutWrapperData>();
+  protected anonLayoutWrapperDataSubject = new Subject<Partial<AnonLayoutWrapperData>>();
 
-  setAnonLayoutWrapperData(data: AnonLayoutWrapperData): void {
+  setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>): void {
     this.anonLayoutWrapperDataSubject.next(data);
   }
 
-  anonLayoutWrapperData$(): Observable<AnonLayoutWrapperData> {
+  anonLayoutWrapperData$(): Observable<Partial<AnonLayoutWrapperData>> {
     return this.anonLayoutWrapperDataSubject.asObservable();
   }
 }