From d2c6757626e135c1bf1d0e433b1e9dc4517d7126 Mon Sep 17 00:00:00 2001 From: Vicki League Date: Mon, 20 Oct 2025 14:07:48 -0400 Subject: [PATCH] [CL-850] Remove anon layout default icon and require either icon or no icon (#16433) --- .../pages/phishing-warning.stories.ts | 2 +- apps/browser/src/popup/app-routing.module.ts | 11 +++++-- ...ension-anon-layout-wrapper-data.service.ts | 8 +++-- ...tension-anon-layout-wrapper.component.html | 1 - ...extension-anon-layout-wrapper.component.ts | 11 ------- .../extension-anon-layout-wrapper.stories.ts | 10 +++--- apps/desktop/src/app/app-routing.module.ts | 8 +++++ apps/web/src/app/oss-routing.module.ts | 22 ++++++++++++- .../send/send-access/access.component.html | 12 +++---- .../send/send-access/access.component.ts | 5 +-- .../setup-extension.component.spec.ts | 1 - .../setup-extension.component.ts | 1 - .../src/svg/svgs/account-warning.icon.ts | 18 +++++++++++ .../src/svg/svgs/business-welcome.icon.ts | 32 +++++++++++++++++++ libs/assets/src/svg/svgs/index.ts | 2 ++ libs/assets/src/svg/svgs/shield.ts | 11 +------ .../anon-layout-wrapper-data.service.ts | 4 +-- .../anon-layout-wrapper.component.html | 1 - .../anon-layout-wrapper.component.ts | 25 +++------------ .../anon-layout-wrapper.stories.ts | 4 ++- .../anon-layout/anon-layout.component.html | 6 ++-- .../src/anon-layout/anon-layout.component.ts | 9 +----- .../src/anon-layout/anon-layout.stories.ts | 22 ++----------- ...efault-anon-layout-wrapper-data.service.ts | 6 ++-- 24 files changed, 129 insertions(+), 103 deletions(-) create mode 100644 libs/assets/src/svg/svgs/account-warning.icon.ts create mode 100644 libs/assets/src/svg/svgs/business-welcome.icon.ts diff --git a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts index 30d3b7faee..b29d97451b 100644 --- a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts +++ b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts @@ -87,7 +87,7 @@ export default { props: args, template: /*html*/ ` diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index cb5e597e78..e3d63d20c1 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -23,6 +23,7 @@ import { UserLockIcon, VaultIcon, LockIcon, + DomainIcon, TwoFactorAuthSecurityKeyIcon, } from "@bitwarden/assets/svg"; import { @@ -565,6 +566,8 @@ const routes: Routes = [ key: "verifyYourIdentity", }, showBackButton: true, + // `TwoFactorAuthComponent` manually sets its icon based on the 2fa type + pageIcon: null, } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData, }, { @@ -572,6 +575,7 @@ const routes: Routes = [ data: { elevation: 1, hideFooter: true, + pageIcon: LockIcon, } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData, children: [ { @@ -617,9 +621,9 @@ const routes: Routes = [ path: "", component: IntroCarouselComponent, data: { - hideIcon: true, + pageIcon: null, hideFooter: true, - }, + } satisfies ExtensionAnonLayoutWrapperData, }, ], }, @@ -637,6 +641,7 @@ const routes: Routes = [ key: "confirmKeyConnectorDomain", }, showBackButton: true, + pageIcon: DomainIcon, } satisfies ExtensionAnonLayoutWrapperData, }, ], @@ -722,7 +727,7 @@ const routes: Routes = [ }, ], data: { - hideIcon: true, + pageIcon: null, hideBackgroundIllustration: true, showReadonlyHostname: true, } satisfies AnonLayoutWrapperData, diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service.ts b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service.ts index 952c42b836..659ab70110 100644 --- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service.ts +++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service.ts @@ -11,13 +11,15 @@ export class ExtensionAnonLayoutWrapperDataService extends DefaultAnonLayoutWrapperDataService implements AnonLayoutWrapperDataService { - protected override anonLayoutWrapperDataSubject = new Subject(); + protected override anonLayoutWrapperDataSubject = new Subject< + Partial + >(); - override setAnonLayoutWrapperData(data: ExtensionAnonLayoutWrapperData): void { + override setAnonLayoutWrapperData(data: Partial): void { this.anonLayoutWrapperDataSubject.next(data); } - override anonLayoutWrapperData$(): Observable { + override anonLayoutWrapperData$(): Observable> { return this.anonLayoutWrapperDataSubject.asObservable(); } } diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html index d389fd8d78..dcd0496ed3 100644 --- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html +++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html @@ -23,7 +23,6 @@ [hideLogo]="true" [maxWidth]="maxWidth" [hideFooter]="hideFooter" - [hideIcon]="hideIcon" [hideCardWrapper]="hideCardWrapper" > diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts index c1694d8066..8fca1b057f 100644 --- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts +++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts @@ -27,7 +27,6 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData { showBackButton?: boolean; showLogo?: boolean; hideFooter?: boolean; - hideIcon?: boolean; } @Component({ @@ -50,7 +49,6 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { protected showAcctSwitcher: boolean; protected showBackButton: boolean; protected showLogo: boolean = true; - protected hideIcon: boolean = false; protected pageTitle: string; protected pageSubtitle: string; @@ -134,10 +132,6 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { this.showLogo = Boolean(firstChildRouteData["showLogo"]); } - if (firstChildRouteData["hideIcon"] !== undefined) { - this.hideIcon = Boolean(firstChildRouteData["hideIcon"]); - } - if (firstChildRouteData["hideCardWrapper"] !== undefined) { this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]); } @@ -196,10 +190,6 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { if (data.showLogo !== undefined) { this.showLogo = data.showLogo; } - - if (data.hideIcon !== undefined) { - this.hideIcon = data.hideIcon; - } } private handleStringOrTranslation(value: string | Translation): string { @@ -222,7 +212,6 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { this.showLogo = null; this.maxWidth = null; this.hideFooter = null; - this.hideIcon = null; this.hideCardWrapper = null; } diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts index 4e6f2fb452..7c97bc764f 100644 --- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts +++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts @@ -208,7 +208,9 @@ export const DefaultContentExample: Story = { children: [ { path: "default-example", - data: {}, + data: { + pageIcon: LockIcon, + } satisfies ExtensionAnonLayoutWrapperData, children: [ { path: "", @@ -244,7 +246,6 @@ const initialData: ExtensionAnonLayoutWrapperData = { showAcctSwitcher: true, showBackButton: true, showLogo: true, - hideIcon: false, }; const changedData: ExtensionAnonLayoutWrapperData = { @@ -258,7 +259,6 @@ const changedData: ExtensionAnonLayoutWrapperData = { showAcctSwitcher: false, showBackButton: false, showLogo: false, - hideIcon: false, }; @Component({ @@ -337,9 +337,9 @@ export const HasLoggedInAccountExample: Story = { { path: "has-logged-in-account", data: { - hasLoggedInAccount: true, showAcctSwitcher: true, - }, + pageIcon: LockIcon, + } satisfies ExtensionAnonLayoutWrapperData, children: [ { path: "", diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts index b07c1c0871..a809a1b23a 100644 --- a/apps/desktop/src/app/app-routing.module.ts +++ b/apps/desktop/src/app/app-routing.module.ts @@ -21,6 +21,7 @@ import { UserLockIcon, VaultIcon, LockIcon, + DomainIcon, } from "@bitwarden/assets/svg"; import { LoginComponent, @@ -289,6 +290,8 @@ const routes: Routes = [ pageTitle: { key: "verifyYourIdentity", }, + // `TwoFactorAuthComponent` manually sets its icon based on the 2fa type + pageIcon: null, } satisfies RouteDataProperties & AnonLayoutWrapperData, }, { @@ -297,12 +300,16 @@ const routes: Routes = [ component: SetInitialPasswordComponent, data: { maxWidth: "lg", + pageIcon: LockIcon, } satisfies AnonLayoutWrapperData, }, { path: "change-password", component: ChangePasswordComponent, canActivate: [authGuard], + data: { + pageIcon: LockIcon, + } satisfies AnonLayoutWrapperData, }, { path: "confirm-key-connector-domain", @@ -312,6 +319,7 @@ const routes: Routes = [ pageTitle: { key: "confirmKeyConnectorDomain", }, + pageIcon: DomainIcon, } satisfies RouteDataProperties & AnonLayoutWrapperData, }, ], diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 7ffe69b7ee..45ed6dc8eb 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/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: [ diff --git a/apps/web/src/app/tools/send/send-access/access.component.html b/apps/web/src/app/tools/send/send-access/access.component.html index 16c1fcf074..aec6e2a10b 100644 --- a/apps/web/src/app/tools/send/send-access/access.component.html +++ b/apps/web/src/app/tools/send/send-access/access.component.html @@ -11,12 +11,12 @@ (setPasswordEvent)="setPassword($event)" *ngIf="passwordRequired && !error" > - - {{ "sendAccessUnavailable" | i18n }} - - - {{ "unexpectedErrorSend" | i18n }} - +
+

{{ "sendAccessUnavailable" | i18n }}

+
+
+

{{ "unexpectedErrorSend" | i18n }}

+

{{ send.name }} diff --git a/apps/web/src/app/tools/send/send-access/access.component.ts b/apps/web/src/app/tools/send/send-access/access.component.ts index a21644da92..df7ab83d36 100644 --- a/apps/web/src/app/tools/send/send-access/access.component.ts +++ 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({}); diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts index f755c83832..fbf61f9a27 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts +++ b/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", }); diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts index a04c529004..012ac370c7 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts +++ b/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", }); diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts new file mode 100644 index 0000000000..80e29dad87 --- /dev/null +++ b/libs/assets/src/svg/svgs/account-warning.icon.ts @@ -0,0 +1,18 @@ +import { svgIcon } from "../icon-service"; + +export const AccountWarning = svgIcon` + + + + + + + + + + + + + + +`; diff --git a/libs/assets/src/svg/svgs/business-welcome.icon.ts b/libs/assets/src/svg/svgs/business-welcome.icon.ts new file mode 100644 index 0000000000..06c4950ec1 --- /dev/null +++ b/libs/assets/src/svg/svgs/business-welcome.icon.ts @@ -0,0 +1,32 @@ +import { svgIcon } from "../icon-service"; + +export const BusinessWelcome = svgIcon` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/libs/assets/src/svg/svgs/index.ts b/libs/assets/src/svg/svgs/index.ts index 40a91f78d4..3c6fe4b830 100644 --- a/libs/assets/src/svg/svgs/index.ts +++ b/libs/assets/src/svg/svgs/index.ts @@ -1,3 +1,4 @@ +export * from "./account-warning.icon"; export * from "./active-send.icon"; export { default as AdminConsoleLogo } from "./admin-console"; export * from "./background-left-illustration"; @@ -6,6 +7,7 @@ export * from "./bitwarden-icon"; export * from "./bitwarden-logo.icon"; export * from "./browser-extension"; export { default as BusinessUnitPortalLogo } from "./business-unit-portal"; +export * from "./business-welcome.icon"; export * from "./carousel-icon"; export * from "./credit-card.icon"; export * from "./deactivated-org"; diff --git a/libs/assets/src/svg/svgs/shield.ts b/libs/assets/src/svg/svgs/shield.ts index eaf9780773..38d429604a 100644 --- a/libs/assets/src/svg/svgs/shield.ts +++ b/libs/assets/src/svg/svgs/shield.ts @@ -1,14 +1,5 @@ import { svgIcon } from "../icon-service"; -/** - * Shield logo with extra space in the viewbox. - */ -const AnonLayoutBitwardenShield = svgIcon` - - - -`; - const BitwardenShield = svgIcon` @@ -22,4 +13,4 @@ const BitwardenShield = svgIcon` `; -export { AnonLayoutBitwardenShield, BitwardenShield }; +export { BitwardenShield }; diff --git a/libs/components/src/anon-layout/anon-layout-wrapper-data.service.ts b/libs/components/src/anon-layout/anon-layout-wrapper-data.service.ts index 4135e6e0fd..4789ac5c46 100644 --- a/libs/components/src/anon-layout/anon-layout-wrapper-data.service.ts +++ b/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): void; /** * Reactively gets the current AnonLayoutWrapperData. */ - abstract anonLayoutWrapperData$(): Observable; + abstract anonLayoutWrapperData$(): Observable>; } diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.html b/libs/components/src/anon-layout/anon-layout-wrapper.component.html index b08418c39a..73a3d34261 100644 --- a/libs/components/src/anon-layout/anon-layout-wrapper.component.html +++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.html @@ -5,7 +5,6 @@ [showReadonlyHostname]="showReadonlyHostname" [maxWidth]="maxWidth" [hideCardWrapper]="hideCardWrapper" - [hideIcon]="hideIcon" [hideBackgroundIllustration]="hideBackgroundIllustration" > diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts index 5785609189..a17e11b424 100644 --- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts +++ b/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) => { this.setAnonLayoutWrapperData(data); }); } - private setAnonLayoutWrapperData(data: AnonLayoutWrapperData) { + private setAnonLayoutWrapperData(data: Partial) { 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; } } diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.stories.ts b/libs/components/src/anon-layout/anon-layout-wrapper.stories.ts index 08f04eca9f..7fc022a5ad 100644 --- a/libs/components/src/anon-layout/anon-layout-wrapper.stories.ts +++ b/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: "", diff --git a/libs/components/src/anon-layout/anon-layout.component.html b/libs/components/src/anon-layout/anon-layout.component.html index 84ad874205..f88bdd3f92 100644 --- a/libs/components/src/anon-layout/anon-layout.component.html +++ b/libs/components/src/anon-layout/anon-layout.component.html @@ -14,13 +14,15 @@

+ @let iconInput = icon(); +
- +
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts index 9decb7cb4f..c58b8d7e16 100644 --- a/libs/components/src/anon-layout/anon-layout.component.ts +++ b/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(); readonly subtitle = input(); - readonly icon = model(); + readonly icon = model.required(); readonly showReadonlyHostname = input(false); readonly hideLogo = input(false); readonly hideFooter = input(false); - readonly hideIcon = input(false); readonly hideCardWrapper = input(false); readonly hideBackgroundIllustration = input(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) { diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts index 3593cb4f30..3994fc2885 100644 --- a/libs/components/src/anon-layout/anon-layout.stories.ts +++ b/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*/ ` (); + protected anonLayoutWrapperDataSubject = new Subject>(); - setAnonLayoutWrapperData(data: AnonLayoutWrapperData): void { + setAnonLayoutWrapperData(data: Partial): void { this.anonLayoutWrapperDataSubject.next(data); } - anonLayoutWrapperData$(): Observable { + anonLayoutWrapperData$(): Observable> { return this.anonLayoutWrapperDataSubject.asObservable(); } }