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

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

@@ -24,6 +24,11 @@ import {
   SsoKeyIcon,
   LockIcon,
   BrowserExtensionIcon,
+  ActiveSendIcon,
+  TwoFactorAuthAuthenticatorIcon,
+  AccountWarning,
+  BusinessWelcome,
+  DomainIcon,
 } from "@bitwarden/assets/svg";
 import {
   PasswordHintComponent,
@@ -295,6 +300,7 @@ const routes: Routes = [
             key: "viewSend",
           },
           showReadonlyHostname: true,
+          pageIcon: ActiveSendIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
           {
@@ -314,6 +320,7 @@ const routes: Routes = [
         component: SetInitialPasswordComponent,
         data: {
           maxWidth: "lg",
+          pageIcon: LockIcon,
         } satisfies AnonLayoutWrapperData,
       },
       {
@@ -379,6 +386,8 @@ const routes: Routes = [
           pageTitle: {
             key: "verifyYourIdentity",
           },
+          // `TwoFactorAuthComponent` manually sets its icon based on the 2fa type
+          pageIcon: null,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -439,6 +448,7 @@ const routes: Routes = [
             key: "recoverAccountTwoStep",
           },
           titleId: "recoverAccountTwoStep",
+          pageIcon: TwoFactorAuthAuthenticatorIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -469,6 +479,7 @@ const routes: Routes = [
           },
           titleId: "acceptEmergency",
           doNotSaveUrl: false,
+          pageIcon: VaultIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
           {
@@ -488,6 +499,7 @@ const routes: Routes = [
             key: "deleteAccount",
           },
           titleId: "deleteAccount",
+          pageIcon: AccountWarning,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
           {
@@ -509,6 +521,7 @@ const routes: Routes = [
             key: "deleteAccount",
           },
           titleId: "deleteAccount",
+          pageIcon: AccountWarning,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
           {
@@ -526,6 +539,7 @@ const routes: Routes = [
             key: "removeMasterPassword",
           },
           titleId: "removeMasterPassword",
+          pageIcon: LockIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -537,6 +551,7 @@ const routes: Routes = [
             key: "confirmKeyConnectorDomain",
           },
           titleId: "confirmKeyConnectorDomain",
+          pageIcon: DomainIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -548,6 +563,7 @@ const routes: Routes = [
         },
         data: {
           maxWidth: "3xl",
+          pageIcon: BusinessWelcome,
         } satisfies AnonLayoutWrapperData,
       },
       {
@@ -559,6 +575,7 @@ const routes: Routes = [
         },
         data: {
           maxWidth: "3xl",
+          pageIcon: BusinessWelcome,
         } satisfies AnonLayoutWrapperData,
       },
       {
@@ -582,12 +599,15 @@ const routes: Routes = [
         path: "change-password",
         component: ChangePasswordComponent,
         canActivate: [authGuard],
+        data: {
+          pageIcon: LockIcon,
+        } satisfies AnonLayoutWrapperData,
       },
       {
         path: "setup-extension",
         data: {
           hideCardWrapper: true,
-          hideIcon: true,
+          pageIcon: null,
           maxWidth: "4xl",
         } satisfies AnonLayoutWrapperData,
         children: [

apps/web/src/app/tools/send/send-access/access.component.html

@@ -11,12 +11,12 @@
       (setPasswordEvent)="setPassword($event)"
       *ngIf="passwordRequired && !error"
     ></app-send-access-password>
-    <bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="unavailable">
-      <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
-    </bit-no-items>
-    <bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="error">
-      <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
-    </bit-no-items>
+    <div class="tw-text-main tw-text-center" *ngIf="unavailable">
+      <p bitTypography="body1">{{ "sendAccessUnavailable" | i18n }}</p>
+    </div>
+    <div class="tw-text-main tw-text-center" *ngIf="error">
+      <p bitTypography="body1">{{ "unexpectedErrorSend" | i18n }}</p>
+    </div>
     <div *ngIf="!passwordRequired && send && !error && !unavailable">
       <p class="tw-text-center">
         <b>{{ send.name }}</b>

apps/web/src/app/tools/send/send-access/access.component.ts

@@ -4,7 +4,6 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
-import { ActiveSendIcon } from "@bitwarden/assets/svg";
 import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -17,7 +16,7 @@ import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
 import { SEND_KDF_ITERATIONS } from "@bitwarden/common/tools/send/send-kdf";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
-import { AnonLayoutWrapperDataService, NoItemsModule, ToastService } from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
 import { SharedModule } from "../../../shared";
@@ -34,7 +33,6 @@ import { SendAccessTextComponent } from "./send-access-text.component";
     SendAccessTextComponent,
     SendAccessPasswordComponent,
     SharedModule,
-    NoItemsModule,
   ],
 })
 export class AccessComponent implements OnInit {
@@ -49,7 +47,6 @@ export class AccessComponent implements OnInit {
   protected hideEmail = false;
   protected decKey: SymmetricCryptoKey;
   protected accessRequest: SendAccessRequest;
-  protected sendIcon = ActiveSendIcon;
 
   protected formGroup = this.formBuilder.group({});
 

apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts

@@ -138,7 +138,6 @@ describe("SetupExtensionComponent", () => {
             key: "somethingWentWrong",
           },
           pageIcon: BrowserExtensionIcon,
-          hideIcon: false,
           hideCardWrapper: false,
           maxWidth: "md",
         });

apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts

@@ -164,7 +164,6 @@ export class SetupExtensionComponent implements OnInit, OnDestroy {
           key: "somethingWentWrong",
         },
         pageIcon: BrowserExtensionIcon,
-        hideIcon: false,
         hideCardWrapper: false,
         maxWidth: "md",
       });