[AC-217] Migrate to Banner Component

[nick-livefront]

Type of change

- [ ] Bug fix
- [ ] New feature development
- [x] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Migrate Minimum Browser, Low KDF, Email Verification, & Premium cards to the component library banner.

Code changes

• vault-banners.component.ts
  • Contains the UI for each of the banners
• vault-banners.service.ts
  • Consolidated all logic for when a individual banner should be shown & handling when they're dismissed
  • All of the logic was pre-existing in vault.component.ts
• state-definitions.ts
  • Added keys for localStorage & sessionStorage integrations for the banners.
• vault.component.ts
  • Removed all logic for showing/hiding banners (migrated to vault-banners.service.ts)
  • Removed classes for displaying a shortened grid when the old cards were visible.
• verify-email.component.ts
  • Refactor VerifyEmailComponent to use the component library banner rather than a card UI.
• low-kdf.component.ts
  • Removed this component as it was only UI and easy to implement within the VaultBannersComponent

Screenshots

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team
• Ensure that all UI additions follow WCAG AA requirements

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 82.69231% with 18 lines in your changes are missing coverage. Please review.

Project coverage is 28.18%. Comparing base (ee690cd) to head (cb22956).

Files	Patch %	Lines
...lt/vault-banners/services/vault-banners.service.ts	83.11%	5 Missing and 8 partials :warning:
...web/src/app/vault/individual-vault/vault.module.ts	0.00%	4 Missing :warning:
...ual-vault/vault-banners/vault-banners.component.ts	94.11%	0 Missing and 1 partial :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8899      +/-   ##
==========================================
+ Coverage   28.08%   28.18%   +0.09%     
==========================================
  Files        2435     2436       +1     
  Lines       70502    70576      +74     
  Branches    13135    13150      +15     
==========================================
+ Hits        19804    19895      +91     
+ Misses      49159    49134      -25     
- Partials     1539     1547       +8     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

Checkmarx One – Scan Summary & Details – 23bd9ee3-6bea-44cf-97be-6dc3d41daeb7

Fixed Issues

Severity	Issue	Source File / Package
	Client_DOM_Code_Injection	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Code_Injection	/apps/browser/src/autofill/services/collect-autofill-content.service.ts: 1054
	Client_DOM_Stored_XSS	/apps/web/src/connectors/sso.ts: 33
	Client_DOM_XSS	/apps/browser/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/browser/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/desktop/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/desktop/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 21
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 19
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 15
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 347
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 315
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 347
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 315
	Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.html: 1
	Client_Privacy_Violation	/apps/browser/src/background/runtime.background.ts: 308
	Client_Privacy_Violation	/apps/web/src/app/tools/reports/pages/breach-report.component.html: 14
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 25
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 26
	Client_Privacy_Violation	/apps/desktop/src/auth/lock.component.html: 32
	Client_Privacy_Violation	/apps/web/src/app/auth/lock.component.html: 18
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 30
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 70
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 80
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 149
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 138
	Client_Privacy_Violation	/apps/desktop/src/auth/lock.component.html: 32
	Client_Privacy_Violation	/apps/web/src/app/auth/recover-two-factor.component.html: 37
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.html: 46
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 534
	Client_Privacy_Violation	/apps/web/src/connectors/webauthn-fallback.ts: 116
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts: 161
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts: 161
	Client_Privacy_Violation	/apps/web/src/app/auth/lock.component.html: 18
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 14
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 60
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 56
	Client_Privacy_Violation	/apps/browser/src/tools/popup/generator/password-generator-history.component.html: 26
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault/password-history.component.html: 18
	Client_Privacy_Violation	/apps/desktop/src/app/tools/password-generator-history.component.html: 15
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/password-history.component.html: 12
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 50
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 14
	Client_Privacy_Violation	/apps/browser/src/tools/popup/generator/password-generator-history.component.html: 26
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault/password-history.component.html: 18
	Client_Privacy_Violation	/apps/desktop/src/app/tools/password-generator-history.component.html: 15
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/password-history.component.html: 12
	Missing_HSTS_Header	/apps/cli/src/auth/commands/login.command.ts: 707
	SSRF	/libs/importer/src/importers/lastpass/access/services/rest-client.ts: 69
	SSRF	/libs/importer/src/importers/lastpass/access/services/rest-client.ts: 69
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/avatar/avatar.component.ts: 80
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/apps/desktop/src/app/components/avatar.component.ts: 75
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/icon/icon.component.ts: 18
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/icon/icon.component.ts: 18
	Client_DOM_Open_Redirect	/apps/browser/src/platform/popup/layout/popup-header.component.ts: 29
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/accessibility-cookie.component.html: 18
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 21
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 19
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 15
	Client_DOM_Open_Redirect	/apps/browser/src/tools/popup/generator/password-generator-history.component.ts: 18
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 60
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/account-switching/current-account.component.ts: 31
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/login-via-auth-request.component.ts: 52
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 60
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/login-via-auth-request.component.ts: 52
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/account-switching/account.component.ts: 24
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/password-history.component.ts: 21
	Client_DOM_Open_Redirect	/apps/browser/src/billing/popup/settings/premium.component.ts: 27
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/attachments.component.ts: 32
	Client_DOM_Open_Redirect	/libs/common/src/auth/iframe-component.ts: 49
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/libs/common/src/auth/webauthn-iframe.ts: 25
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/libs/common/src/auth/webauthn-iframe.ts: 25
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_Hardcoded_Domain	/apps/web/src/app/billing/shared/payment.component.ts: 56
	Client_Hardcoded_Domain	/apps/web/src/app/billing/shared/payment.component.ts: 56
	Client_Hardcoded_Domain	/apps/web/src/connectors/captcha.ts: 57
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/auth/commands/login.command.ts: 575
	Client_JQuery_Deprecated_Symbols	/libs/angular/src/auth/components/update-temp-password.component.ts: 132
	Client_JQuery_Deprecated_Symbols	/libs/angular/src/auth/components/change-password.component.ts: 91
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/program.ts: 615
	Client_Use_Of_Iframe_Without_Sandbox	/apps/browser/src/autofill/content/notification-bar.ts: 868
	Client_Use_Of_Iframe_Without_Sandbox	/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts: 90
	Client_Use_Of_Iframe_Without_Sandbox	/apps/web/src/connectors/duo.ts: 8
	Client_Use_Of_Iframe_Without_Sandbox	/apps/web/src/connectors/duo.ts: 8
	Client_Weak_Cryptographic_Hash	/libs/common/src/platform/services/web-crypto-function.service.ts: 142
	Client_Weak_Cryptographic_Hash	/apps/desktop/src/proxy/ipc.ts: 24
	Missing_CSP_Header	/apps/cli/src/auth/commands/login.command.ts: 707
	Unprotected_Cookie	/apps/web/src/app/auth/two-factor.component.ts: 143
	Unprotected_Cookie	/apps/web/src/connectors/duo-redirect.ts: 57
	Unprotected_Cookie	/apps/web/src/connectors/duo-redirect.ts: 112
	Unprotected_Cookie	/apps/web/src/connectors/sso.ts: 33
	Unprotected_Cookie	/apps/web/src/app/auth/sso.component.ts: 137
	Unsafe_Use_Of_Target_blank	/apps/web/src/app/auth/settings/two-factor-recovery.component.ts: 25
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/pin-service.factory.ts: 64
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/device-trust-service.factory.ts: 83
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/device-trust-service.factory.ts: 82
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/auth-request-service.factory.ts: 54
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/login-strategy-service.factory.ts: 130
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/import-service.factory.ts: 63
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/key-generation-service.factory.ts: 23
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/user-verification-service.factory.ts: 77
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/collection-service.factory.ts: 37
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/totp-service.factory.ts: 34
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/cli/src/vault/create.command.ts: 68
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/auth-service.factory.ts: 51
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/key-connector-service.factory.ts: 70
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/send-service.factory.ts: 50
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/vault-timeout-settings-service.factory.ts: 73
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/crypto-service.factory.ts: 78
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/cipher-service.factory.ts: 75
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/folder-service.factory.ts: 42
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/password-generation-service.factory.ts: 41
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/password-generation-service.factory.ts: 41
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/encrypt-service.factory.ts: 34
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/password-generation-service.factory.ts: 41
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/password-generation-service.factory.ts: 41

[nick-livefront]

@justindbaur @ike-kottlowski When you have some time, would you be able to review this PR?

[nick-livefront]

@shane-melton @gbubemismith @jlf0dev @justindbaur I addressed two defects here:

• AC-2588 -> 6bf83ff
• AC-2589 -> 1ba0a0c

[nick-livefront]

@jlf0dev @gbubemismith When you have some time, could you give this one another review?