[PM-8214] New Device Verification Notice UI (#12360)

* starting

* setup first page for new device verification notice

* update designs for first page. rename components and files

* added second page for new device verification notice

* update notice page one with bit radio buttons. routing logic. user email

* updated routing for new device verification notice to show before vault based on flags, and can navigate back to vault after submission

* fix translations. added remind me later link and nav to page 2

* sync the design for mobile and web

* update routes in desktop

* updated styles for desktop

* moved new device verification notice guard

* update types for new device notice page one

* add null check to page one

* types

* types for page one, page two, service, and guard

* types

* update component and guard for null check

* add navigation to two step login btn and account email btn

* remove empty file

* update fill of icons to support light & dark modes

* add question mark to email access verification copy

* remove unused map

* use links for navigation elements
- an empty href is needed so the links are keyboard accessible

* remove clip path from exclamation svg

- No noticeable difference in the end result

* inline email message into markup

---------

Co-authored-by: Nick Krantz <nick@livefront.com>

libs/angular/src/services/jslib-services.module.ts

@@ -298,6 +298,7 @@ import {
   IndividualVaultExportServiceAbstraction,
 } from "@bitwarden/vault-export-core";
 
+import { NewDeviceVerificationNoticeService } from "../../../vault/src/services/new-device-verification-notice.service";
 import { FormValidationErrorsService as FormValidationErrorsServiceAbstraction } from "../platform/abstractions/form-validation-errors.service";
 import { ViewCacheService } from "../platform/abstractions/view-cache.service";
 import { FormValidationErrorsService } from "../platform/services/form-validation-errors.service";
@@ -1401,6 +1402,7 @@ const safeProviders: SafeProvider[] = [
     useClass: DefaultLoginDecryptionOptionsService,
     deps: [MessagingServiceAbstraction],
   }),
+  safeProvider(NewDeviceVerificationNoticeService),
   safeProvider({
     provide: UserAsymmetricKeysRegenerationApiService,
     useClass: DefaultUserAsymmetricKeysRegenerationApiService,

libs/angular/src/vault/guards/index.ts

@@ -0,0 +1 @@
+export * from "./new-device-verification-notice.guard";

libs/angular/src/vault/guards/new-device-verification-notice.guard.ts

@@ -0,0 +1,51 @@
+import { inject } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivateFn, Router } from "@angular/router";
+import { Observable, firstValueFrom, map } from "rxjs";
+
+import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import { NewDeviceVerificationNoticeService } from "../../../../vault/src/services/new-device-verification-notice.service";
+
+export const NewDeviceVerificationNoticeGuard: CanActivateFn = async (
+  route: ActivatedRouteSnapshot,
+) => {
+  const router = inject(Router);
+  const configService = inject(ConfigService);
+  const newDeviceVerificationNoticeService = inject(NewDeviceVerificationNoticeService);
+  const accountService = inject(AccountService);
+
+  if (route.queryParams["fromNewDeviceVerification"]) {
+    return true;
+  }
+
+  const tempNoticeFlag = await configService.getFeatureFlag(
+    FeatureFlag.NewDeviceVerificationTemporaryDismiss,
+  );
+  const permNoticeFlag = await configService.getFeatureFlag(
+    FeatureFlag.NewDeviceVerificationPermanentDismiss,
+  );
+
+  const currentAcct$: Observable<Account | null> = accountService.activeAccount$.pipe(
+    map((acct) => acct),
+  );
+  const currentAcct = await firstValueFrom(currentAcct$);
+
+  if (!currentAcct) {
+    return router.createUrlTree(["/login"]);
+  }
+
+  const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcct.id);
+  const userItems = await firstValueFrom(userItems$);
+
+  if (
+    userItems?.last_dismissal == null &&
+    (userItems?.permanent_dismissal == null || !userItems?.permanent_dismissal) &&
+    (tempNoticeFlag || permNoticeFlag)
+  ) {
+    return router.createUrlTree(["/new-device-notice"]);
+  }
+
+  return true;
+};