Auth/PM-9449 - UI Refresh + Client component consolidation into new L…

…ockV2 Component (#10451)

* PM-9449 - Init stub of new lock comp

* PM-9449 - (1) Add new lock screen title to all clients (2) Add to temp web routing module config

* PM-9449 - LockV2Comp - Building now with web HTML

* PM-9449 - Libs/Auth LockComp - bring in all desktop ts code; WIP, need to stand up LockCompService to facilitate ipc communication.

* PM-9449 - Create LockComponentService for facilitating client logic; potentially will decompose later.

* PM-9449 - Add extension lock comp service.

* PM-9449 - Libs/auth LockComp - bring in browser extension logic

* PM-9449 - Libs/auth LockComp html start

* PM-9449 - Libs/Auth LockComp - (1) Remove unused dep (2) Update setEmailAsPageSubtitle to work.

* PM-9449 - Add getBiometricsError to lock comp service for extension.

* PM-9449 - LockComp - (1) Save off client type as public comp var (2) Rename biometricLock as biometricLockSet

* PM-9449 - Work on lock comp service getAvailableUnlockOptions

* PM-9449 - WIP libs/auth LockComp

* PM-9449 - (1) Remove default lock comp svc (2) Add web lock comp svc.

* PM-9449 - UnlockOptions - replace incorrect type

* PM-9449 - DesktopLockComponentService -get most of observable based getAvailableUnlockOptions$ logic in place.

* PM-9449 - LockCompSvc - getAvailableUnlockOptions in place for all clients.

* PM-9449 - Add getBiometricsUnlockBtnText to LockCompSvc and put TODO for wiring it up later

* PM-9449 - Lock Comp - Replace all manual bools with unlock options.

* PM-9449 - Desktop Lock Comp Svc - adjust spacing

* PM-9449 - LockCompSvc - remove biometricsEnabled method

* PM-9449 - LockComp - Clean up commented out code

* PM-9449 - LockComp - webVaultHostname --> envHostName

* PM-9449 - Fix lock comp svc deps

* PM-9449 - LockComp - HTML progress

* PM-9449 - LockComp cleanup

* PM-9449 - Web Routing Module - wire up lock vs lockv2 using extension swap

* PM-9449 - Wire up loading state

* PM-9449 - LockComp - start wiring up listenForActiveUnlockOptionChanges logic with reactivity

* PM-9449 - Update desktop & extension lock comp service to use new biometrics service vs platform utils for biometrics information.

* PM-9449 - LockV2 - Swap platform util usage with toast svc

* PM-9449 - LockV2Comp - Bring over user id logic from PM-8933

* PM-9449 - LockV2Comp - Adjust everything to use activeAccount.id.

* PM-9449 - LockV2Comp - Progress on wiring up unlock option reactive stream.

* PM-9449 - LockComp ts - some refactoring and minor progress.

* PM-9449 - LockComp HTML - refactoring based on new idea to keep unlock options as separate as possible.

* PM-9449 - Add PIN translation to web

* PM-9449 - (1) Lock HTML refactor to make as independent verticals as possible (2) Refactor Lock ts (3) LockSvc - replace type with enum.

* PM-9449 - LockV2Comp - remove hardcoded await.

* PM-9449 - LockComp HTML - add todo

* PM-9449 - Web - Routing module - cleanup commented out stuff

* PM-9449 - LockV2Comp - Wire up biometrics + mild refactor.

* PM-9449 - Desktop - Wire up lockV2 redirection

* PM-9449 - LockV2 - Desktop - don't focus until unlock opts defined.

* PM-9449 - Fix accidental check in

* PM-9449 - LockV2 - loading state depends on unlock opts

* PM-9449 - LockV2 comp - remove unnecessary hr

* PM-9449 - Migrate  "yourVaultIsLockedV2" translation to desktop & browser.

* PM-9449 - LockV2 - Layout tweaks for biometrics

* PM-9449 - LockV2 - Biometric btn text

* PM-9449 - LockV2 - Wire up biometrics loading / disable state + remove unnecessary conditions around biometricsUnlockBtnText

* PM-9449 - DesktopLockSvc - Per discussion with Bernd, remove interval polling and just check once for biometric support and availability.

* PM-9449 - AuthGuard - Add todo to remove promptBiometric

* PM-9449 - LockV2 - Refactor primary and desktop init logic + misc clean up

* PM-9449 - LockV2 - Reorder init methods

* PM-9449 - LockV2 - Per discussion with Product, deprecate windows biometric settings update warning

* PM-9449 - Add TODO per discussion with Justin and remove TODO

* PM-9449 - LockV2 - Restore hide password on desktop window hidden functionality.

* PM-9449 - Clean up accomplished todo

* PM-9449 - LockV2 - Refactor func name.

* PM-9449 - LockV2 Comp - (1) TODO cleanup (2) Add browser logic to handleBiometricsUnlockEnabled

* PM-9449 - LockCompSvc changes - (1) Observability for isFido2Session (2) Adjust errors and returns per discussion with Justin

* PM-9449 - Per product, no longer need to support special fido2 case on extension.

* PM-9449 - LockCompSvc - add getPreviousUrl support

* PM-9449 - LockV2 - Continued ts cleanup

* PM-9449 - LockV2Comp - clean up unused props

* PM-9449 - LockV2Comp - Rename response to masterPasswordVerificationResponse

* PM-9449 - LockV2 - Remove unused formPromise prop

* PM-9449 - Add missing translations + update desktop to showReadonlyHostName

* PM-9449 - LockV2 - cleanup TODO

* PM-9449 - LockV2 - more cleanup

* PM-9449 - Desktop Routing Module - only allow LockV2 access if extension refresh flag is enabled.

* PM-9449 - Extension - AppRoutingModule - Add extension redirect + new lockV2 route.

* PM-9449 - Extension - AppRoutingModule - Add lockV2 to the ExtensionAnonLayoutWrapperComponent intead of the regular one.

* PM-9449 - Extension - CurrentAccountComp - add null checks as anon layout components don't have a state today. This prevents the account switcher from working on the new lockV2 comp.

* PM-9449 - Extension AppRoutingModule - LockV2 should use ExtensionAnonLayoutWrapperData

* PM-9449 - LockComp - BiometricUnlock - cancelling is a valid action.

* PM-9449 - LockV2 - Biometric autoprompt cleanup

* PM-9449 - LockV2 - (1) Add TODO for KM team (2) Fix submit logic.

* PM-9449 - Tweak TODO to add task #

* PM-9449 - Test WebLockComponentService

* PM-9449 - ExtensionLockComponentService tested

* PM-9449 - Tweak extension lock comp svc test

* PM-9449 - DesktopLockComponentService tested

* PM-9449 - Add task # to TODO

* PM-9449 - Update apps/browser/src/services/extension-lock-component.service.ts per PR feedback

Co-authored-by: Justin Baur <19896123+justindbaur@users.noreply.github.com>

* PM-9449 - Per PR feedback, replace from with defer for better reactive execution of promise based functions.

* PM-9449 - Per PR feedback replace enum with type.

* PM-9449 - Fix imports and tests due to key management file moves.

* PM-9449 - Another test file import fix

---------

Co-authored-by: Justin Baur <19896123+justindbaur@users.noreply.github.com>

apps/browser/src/_locales/en/messages.json

@@ -604,6 +604,15 @@
   "yourVaultIsLocked": {
     "message": "Your vault is locked. Verify your identity to continue."
   },
+  "yourVaultIsLockedV2": {
+    "message": "Your vault is locked"
+  },
+  "yourAccountIsLocked": {
+    "message": "Your account is locked"
+  },
+  "or": {
+    "message": "or"
+  },
   "unlock": {
     "message": "Unlock"
   },
@@ -1936,6 +1945,9 @@
   "unlockWithBiometrics": {
     "message": "Unlock with biometrics"
   },
+  "unlockWithMasterPassword": {
+    "message": "Unlock with master password"
+  },
   "awaitDesktop": {
     "message": "Awaiting confirmation from desktop"
   },
@@ -3623,6 +3635,9 @@
   "typePasskey": {
     "message": "Passkey"
   },
+  "accessing": {
+    "message": "Accessing"
+  },
   "passkeyNotCopied": {
     "message": "Passkey will not be copied"
   },

apps/browser/src/auth/popup/account-switching/current-account.component.ts

@@ -59,7 +59,7 @@ export class CurrentAccountComponent {
   }
 
   async currentAccountClicked() {
-    if (this.route.snapshot.data.state.includes("account-switcher")) {
+    if (this.route.snapshot.data?.state?.includes("account-switcher")) {
       this.location.back();
     } else {
       await this.router.navigate(["/account-switcher"]);

apps/browser/src/popup/app-routing.module.ts

@@ -17,6 +17,8 @@ import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
+  LockIcon,
+  LockV2Component,
   PasswordHintComponent,
   RegistrationFinishComponent,
   RegistrationStartComponent,
@@ -181,6 +183,7 @@ const routes: Routes = [
     path: "lock",
     component: LockComponent,
     canActivate: [lockGuard()],
+    canMatch: [extensionRefreshRedirect("/lockV2")],
     data: { state: "lock", doNotSaveUrl: true } satisfies RouteDataProperties,
   },
   ...twofactorRefactorSwap(
@@ -438,6 +441,28 @@ const routes: Routes = [
       ],
     },
   ),
+  {
+    path: "",
+    component: ExtensionAnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "lockV2",
+        canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
+        data: {
+          pageIcon: LockIcon,
+          pageTitle: "yourVaultIsLockedV2",
+          showReadonlyHostname: true,
+          showAcctSwitcher: true,
+        } satisfies ExtensionAnonLayoutWrapperData,
+        children: [
+          {
+            path: "",
+            component: LockV2Component,
+          },
+        ],
+      },
+    ],
+  },
   {
     path: "",
     component: AnonLayoutWrapperComponent,

apps/browser/src/popup/services/services.module.ts

@@ -16,7 +16,7 @@ import {
   CLIENT_TYPE,
 } from "@bitwarden/angular/services/injection-tokens";
 import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
-import { AnonLayoutWrapperDataService } from "@bitwarden/auth/angular";
+import { AnonLayoutWrapperDataService, LockComponentService } from "@bitwarden/auth/angular";
 import { LockService, PinServiceAbstraction } from "@bitwarden/auth/common";
 import { EventCollectionService as EventCollectionServiceAbstraction } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -117,6 +117,7 @@ import { ForegroundTaskSchedulerService } from "../../platform/services/task-sch
 import { BrowserStorageServiceProvider } from "../../platform/storage/browser-storage-service.provider";
 import { ForegroundMemoryStorageService } from "../../platform/storage/foreground-memory-storage.service";
 import { fromChromeRuntimeMessaging } from "../../platform/utils/from-chrome-runtime-messaging";
+import { ExtensionLockComponentService } from "../../services/extension-lock-component.service";
 import { ForegroundVaultTimeoutService } from "../../services/vault-timeout/foreground-vault-timeout.service";
 import { BrowserSendStateService } from "../../tools/popup/services/browser-send-state.service";
 import { FilePopoutUtilsService } from "../../tools/popup/services/file-popout-utils.service";
@@ -536,6 +537,11 @@ const safeProviders: SafeProvider[] = [
     provide: CLIENT_TYPE,
     useValue: ClientType.Browser,
   }),
+  safeProvider({
+    provide: LockComponentService,
+    useClass: ExtensionLockComponentService,
+    deps: [],
+  }),
   safeProvider({
     provide: Fido2UserVerificationService,
     useClass: Fido2UserVerificationService,