[PM-8214] New Device Verification Notice UI

[Jingo88]

🎟️ Tracking

Browser UI
Web and Desktop

📔 Objective

Create the components and design for all three clients.

• Translation keys added
• New svg's added
• New Route Guard added to vault routes
• New guard will check for NewDeviceVerification feature flags and state values
• Clicking on two step login or account email buttons will navigate to those settings pages
• Clicking through the flow will navigate to vault and update state

NOTE: This PR implements the designs, full guard and state retention logic will be added afterwards here PM-14347

📸 Screenshots

Screen Recording of Web Flow
https://github.com/user-attachments/assets/fa4074f0-debc-4aae-9411-12550d311f3b

Screen Recording of Browser Flow
https://github.com/user-attachments/assets/c643c02c-56c4-4e82-9461-ec8052191b14

Screen Recording of Browser Navigating to Settings
https://github.com/user-attachments/assets/669e18e7-fba0-4041-9647-2b057f39914a

Screenshots of Desktop

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 65dd07cb-9422-4f10-adb1-5017cfc3461f

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/tools/access-intelligence/password-health.component.html: 40	Attack Vector
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/tools/access-intelligence/password-health.component.html: 50	Attack Vector

Fixed Issues

Severity	Issue	Source File / Package
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/tools/access-intelligence/password-health.component.html: 40
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/tools/access-intelligence/password-health.component.html: 50

[codecov]

Codecov Report

Attention: Patch coverage is 27.11864% with 86 lines in your changes missing coverage. Please review.

Project coverage is 33.50%. Comparing base (1d874b4) to head (2ac259d).
Report is 18 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ult/guards/new-device-verification-notice.guard.ts	0.00%	29 Missing ⚠️
...w-device-verification-notice-page-two.component.ts	30.00%	24 Missing and 4 partials ⚠️
...w-device-verification-notice-page-one.component.ts	36.36%	17 Missing and 4 partials ⚠️
apps/browser/src/popup/app-routing.module.ts	0.00%	2 Missing ⚠️
apps/desktop/src/app/app-routing.module.ts	0.00%	2 Missing ⚠️
apps/web/src/app/oss-routing.module.ts	0.00%	2 Missing ⚠️
libs/angular/src/services/jslib-services.module.ts	0.00%	1 Missing ⚠️
libs/angular/src/vault/guards/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12360      +/-   ##
==========================================
- Coverage   33.52%   33.50%   -0.02%     
==========================================
  Files        2913     2921       +8     
  Lines       91086    91229     +143     
  Branches    17338    17358      +20     
==========================================
+ Hits        30540    30570      +30     
- Misses      58139    58251     +112     
- Partials     2407     2408       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nick-livefront]

Nice! This is working as I'd expect, just a nit and a question.

[nick-livefront]

⛏️ (non-blocking) this logic could be cleaned up by deconstructing userItems. The types don't suggest that userItems can be null so I removed the optional chaining as well.

Suggested change

	if (
	userItems?.last_dismissal == null &&
	(userItems?.permanent_dismissal == null || !userItems?.permanent_dismissal) &&
	(tempNoticeFlag || permNoticeFlag)
	) {
	const { last_dismissal, permanent_dismissal } = userItems;
	if (last_dismissal == null && !permanent_dismissal && (tempNoticeFlag || permNoticeFlag)) {

[nick-livefront]

I have this code altered in my following work so this is does not need to be changed here.

[nick-livefront]

❓ Is this needed?

[nick-livefront]

Removed: 78fd445

[nick-livefront]

🎨 Should the icon use tailwind for fill to support light/dark mode?

[nick-livefront]

Updated for both icons: 54d872a

[shane-melton]

Looks pretty good to me, just two questions before approval (and a few non-blocking nits)