From d0bc2b972d2f5138d92193ec64c1c409153da25c Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:46:02 -0700
Subject: [PATCH 01/28] rename legacy components to v1

---
 ...nent.html => login-decryption-options-v1.component.html} | 0
 ...omponent.ts => login-decryption-options-v1.component.ts} | 6 +++---
 apps/browser/src/popup/app-routing.module.ts                | 4 ++--
 apps/browser/src/popup/app.module.ts                        | 4 ++--
 apps/desktop/src/app/app-routing.module.ts                  | 4 ++--
 ...nent.html => login-decryption-options-v1.component.html} | 0
 ...omponent.ts => login-decryption-options-v1.component.ts} | 6 +++---
 apps/desktop/src/auth/login/login.module.ts                 | 4 ++--
 ...nent.html => login-decryption-options-v1.component.html} | 0
 ...omponent.ts => login-decryption-options-v1.component.ts} | 6 +++---
 apps/web/src/app/auth/login/login.module.ts                 | 6 +++---
 apps/web/src/app/oss-routing.module.ts                      | 4 ++--
 ...ent.ts => base-login-decryption-options-v1.component.ts} | 2 +-
 13 files changed, 23 insertions(+), 23 deletions(-)
 rename apps/browser/src/auth/popup/login-decryption-options/{login-decryption-options.component.html => login-decryption-options-v1.component.html} (100%)
 rename apps/browser/src/auth/popup/login-decryption-options/{login-decryption-options.component.ts => login-decryption-options-v1.component.ts} (80%)
 rename apps/desktop/src/auth/login/login-decryption-options/{login-decryption-options.component.html => login-decryption-options-v1.component.html} (100%)
 rename apps/desktop/src/auth/login/login-decryption-options/{login-decryption-options.component.ts => login-decryption-options-v1.component.ts} (56%)
 rename apps/web/src/app/auth/login/login-decryption-options/{login-decryption-options.component.html => login-decryption-options-v1.component.html} (100%)
 rename apps/web/src/app/auth/login/login-decryption-options/{login-decryption-options.component.ts => login-decryption-options-v1.component.ts} (78%)
 rename libs/angular/src/auth/components/{base-login-decryption-options.component.ts => base-login-decryption-options-v1.component.ts} (99%)

diff --git a/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.html b/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options-v1.component.html
similarity index 100%
rename from apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.html
rename to apps/browser/src/auth/popup/login-decryption-options/login-decryption-options-v1.component.html
diff --git a/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.ts b/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options-v1.component.ts
similarity index 80%
rename from apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.ts
rename to apps/browser/src/auth/popup/login-decryption-options/login-decryption-options-v1.component.ts
index 6231b027749..bd8f808c910 100644
--- a/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.ts
+++ b/apps/browser/src/auth/popup/login-decryption-options/login-decryption-options-v1.component.ts
@@ -1,15 +1,15 @@
 import { Component } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
-import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
+import { BaseLoginDecryptionOptionsComponentV1 } from "@bitwarden/angular/auth/components/base-login-decryption-options-v1.component";
 
 import { postLogoutMessageListener$ } from "../utils/post-logout-message-listener";
 
 @Component({
   selector: "browser-login-decryption-options",
-  templateUrl: "login-decryption-options.component.html",
+  templateUrl: "login-decryption-options-v1.component.html",
 })
-export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
+export class LoginDecryptionOptionsComponentV1 extends BaseLoginDecryptionOptionsComponentV1 {
   override async createUser(): Promise<void> {
     try {
       await super.createUser();
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index d53e51e9df2..504abdf8f55 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -49,7 +49,7 @@ import {
 import { HintComponent } from "../auth/popup/hint.component";
 import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
-import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "../auth/popup/login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "../auth/popup/login-v1.component";
 import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
 import { RegisterComponent } from "../auth/popup/register.component";
@@ -218,7 +218,7 @@ const routes: Routes = [
   },
   {
     path: "login-initiated",
-    component: LoginDecryptionOptionsComponent,
+    component: LoginDecryptionOptionsComponentV1,
     canActivate: [tdeDecryptionRequiredGuard()],
     data: { state: "login-initiated" } satisfies RouteDataProperties,
   },
diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts
index 7b2d2ba86b8..e4f9a985f95 100644
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -24,7 +24,7 @@ import { ExtensionAnonLayoutWrapperComponent } from "../auth/popup/extension-ano
 import { HintComponent } from "../auth/popup/hint.component";
 import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
-import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "../auth/popup/login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "../auth/popup/login-v1.component";
 import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
 import { RegisterComponent } from "../auth/popup/register.component";
@@ -161,7 +161,7 @@ import "../platform/popup/locales";
     LockComponent,
     LoginComponentV1,
     LoginViaAuthRequestComponent,
-    LoginDecryptionOptionsComponent,
+    LoginDecryptionOptionsComponentV1,
     NotificationsSettingsV1Component,
     AppearanceComponent,
     GeneratorComponent,
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index f5023cb4249..83c2628f281 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -40,7 +40,7 @@ import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.compo
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
 import { HintComponent } from "../auth/hint.component";
 import { LockComponent } from "../auth/lock.component";
-import { LoginDecryptionOptionsComponent } from "../auth/login/login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "../auth/login/login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "../auth/login/login-v1.component";
 import { LoginViaAuthRequestComponent } from "../auth/login/login-via-auth-request.component";
 import { RegisterComponent } from "../auth/register.component";
@@ -103,7 +103,7 @@ const routes: Routes = [
   ),
   {
     path: "login-initiated",
-    component: LoginDecryptionOptionsComponent,
+    component: LoginDecryptionOptionsComponentV1,
     canActivate: [tdeDecryptionRequiredGuard()],
   },
   { path: "register", component: RegisterComponent },
diff --git a/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.html b/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options-v1.component.html
similarity index 100%
rename from apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.html
rename to apps/desktop/src/auth/login/login-decryption-options/login-decryption-options-v1.component.html
diff --git a/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.ts b/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
similarity index 56%
rename from apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.ts
rename to apps/desktop/src/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
index f64ec977ce7..d9cc07adb7e 100644
--- a/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.ts
+++ b/apps/desktop/src/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
@@ -1,12 +1,12 @@
 import { Component } from "@angular/core";
 
-import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
+import { BaseLoginDecryptionOptionsComponentV1 } from "@bitwarden/angular/auth/components/base-login-decryption-options-v1.component";
 
 @Component({
   selector: "desktop-login-decryption-options",
-  templateUrl: "login-decryption-options.component.html",
+  templateUrl: "login-decryption-options-v1.component.html",
 })
-export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
+export class LoginDecryptionOptionsComponentV1 extends BaseLoginDecryptionOptionsComponentV1 {
   override async createUser(): Promise<void> {
     try {
       await super.createUser();
diff --git a/apps/desktop/src/auth/login/login.module.ts b/apps/desktop/src/auth/login/login.module.ts
index c0b330bf2dd..a1c58ec5622 100644
--- a/apps/desktop/src/auth/login/login.module.ts
+++ b/apps/desktop/src/auth/login/login.module.ts
@@ -5,7 +5,7 @@ import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components
 
 import { SharedModule } from "../../app/shared/shared.module";
 
-import { LoginDecryptionOptionsComponent } from "./login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "./login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "./login-v1.component";
 import { LoginViaAuthRequestComponent } from "./login-via-auth-request.component";
 
@@ -15,7 +15,7 @@ import { LoginViaAuthRequestComponent } from "./login-via-auth-request.component
     LoginComponentV1,
     LoginViaAuthRequestComponent,
     EnvironmentSelectorComponent,
-    LoginDecryptionOptionsComponent,
+    LoginDecryptionOptionsComponentV1,
   ],
   exports: [LoginComponentV1, LoginViaAuthRequestComponent],
 })
diff --git a/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html b/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options-v1.component.html
similarity index 100%
rename from apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html
rename to apps/web/src/app/auth/login/login-decryption-options/login-decryption-options-v1.component.html
diff --git a/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.ts b/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
similarity index 78%
rename from apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.ts
rename to apps/web/src/app/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
index 991fe8b5971..5eb72503b90 100644
--- a/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.ts
+++ b/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options-v1.component.ts
@@ -1,14 +1,14 @@
 import { Component, inject } from "@angular/core";
 
-import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
+import { BaseLoginDecryptionOptionsComponentV1 } from "@bitwarden/angular/auth/components/base-login-decryption-options-v1.component";
 
 import { RouterService } from "../../../core";
 import { AcceptOrganizationInviteService } from "../../organization-invite/accept-organization.service";
 @Component({
   selector: "web-login-decryption-options",
-  templateUrl: "login-decryption-options.component.html",
+  templateUrl: "login-decryption-options-v1.component.html",
 })
-export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
+export class LoginDecryptionOptionsComponentV1 extends BaseLoginDecryptionOptionsComponentV1 {
   protected routerService = inject(RouterService);
   protected acceptOrganizationInviteService = inject(AcceptOrganizationInviteService);
 
diff --git a/apps/web/src/app/auth/login/login.module.ts b/apps/web/src/app/auth/login/login.module.ts
index 53e921d7d2b..6dbfaa9f370 100644
--- a/apps/web/src/app/auth/login/login.module.ts
+++ b/apps/web/src/app/auth/login/login.module.ts
@@ -4,7 +4,7 @@ import { CheckboxModule } from "@bitwarden/components";
 
 import { SharedModule } from "../../../app/shared";
 
-import { LoginDecryptionOptionsComponent } from "./login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "./login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "./login-v1.component";
 import { LoginViaAuthRequestComponent } from "./login-via-auth-request.component";
 import { LoginViaWebAuthnComponent } from "./login-via-webauthn/login-via-webauthn.component";
@@ -14,13 +14,13 @@ import { LoginViaWebAuthnComponent } from "./login-via-webauthn/login-via-webaut
   declarations: [
     LoginComponentV1,
     LoginViaAuthRequestComponent,
-    LoginDecryptionOptionsComponent,
+    LoginDecryptionOptionsComponentV1,
     LoginViaWebAuthnComponent,
   ],
   exports: [
     LoginComponentV1,
     LoginViaAuthRequestComponent,
-    LoginDecryptionOptionsComponent,
+    LoginDecryptionOptionsComponentV1,
     LoginViaWebAuthnComponent,
   ],
 })
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 71d26030b03..e1b28404517 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -44,7 +44,7 @@ import { CreateOrganizationComponent } from "./admin-console/settings/create-org
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
-import { LoginDecryptionOptionsComponent } from "./auth/login/login-decryption-options/login-decryption-options.component";
+import { LoginDecryptionOptionsComponentV1 } from "./auth/login/login-decryption-options/login-decryption-options-v1.component";
 import { LoginComponentV1 } from "./auth/login/login-v1.component";
 import { LoginViaAuthRequestComponent } from "./auth/login/login-via-auth-request.component";
 import { LoginViaWebAuthnComponent } from "./auth/login/login-via-webauthn/login-via-webauthn.component";
@@ -113,7 +113,7 @@ const routes: Routes = [
       },
       {
         path: "login-initiated",
-        component: LoginDecryptionOptionsComponent,
+        component: LoginDecryptionOptionsComponentV1,
         canActivate: [tdeDecryptionRequiredGuard()],
       },
       {
diff --git a/libs/angular/src/auth/components/base-login-decryption-options.component.ts b/libs/angular/src/auth/components/base-login-decryption-options-v1.component.ts
similarity index 99%
rename from libs/angular/src/auth/components/base-login-decryption-options.component.ts
rename to libs/angular/src/auth/components/base-login-decryption-options-v1.component.ts
index f674a32af8b..df99503b6d7 100644
--- a/libs/angular/src/auth/components/base-login-decryption-options.component.ts
+++ b/libs/angular/src/auth/components/base-login-decryption-options-v1.component.ts
@@ -63,7 +63,7 @@ type ExistingUserUntrustedDeviceData = {
 type Data = NewUserData | ExistingUserUntrustedDeviceData;
 
 @Directive()
-export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
+export class BaseLoginDecryptionOptionsComponentV1 implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
   protected State = State;

From f453cc8b6748d62148ca10a413db35f97db3d52e Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 29 Oct 2024 13:21:37 -0700
Subject: [PATCH 02/28] setup new component and routes

---
 apps/browser/src/_locales/en/messages.json    |  6 ++++
 apps/browser/src/popup/app-routing.module.ts  | 30 +++++++++++++++----
 apps/desktop/src/app/app-routing.module.ts    | 28 +++++++++++++----
 apps/desktop/src/locales/en/messages.json     |  6 ++++
 apps/web/src/app/oss-routing.module.ts        | 28 +++++++++++++----
 apps/web/src/locales/en/messages.json         |  6 ++++
 libs/auth/src/angular/index.ts                |  3 ++
 .../login-decryption-options.component.html   |  1 +
 .../login-decryption-options.component.ts     |  8 +++++
 libs/common/src/enums/feature-flag.enum.ts    |  2 +-
 10 files changed, 101 insertions(+), 17 deletions(-)
 create mode 100644 libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
 create mode 100644 libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 92fabdae3ee..330fa66af05 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3240,6 +3240,12 @@
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
+  "deviceApprovalRequiredV2": {
+    "message": "Device approval required"
+  },
+  "selectAnApprovalOptionBelow": {
+    "message": "Select an approval option below"
+  },
   "rememberThisDevice": {
     "message": "Remember this device"
   },
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 504abdf8f55..a73dac00e9e 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -35,6 +35,7 @@ import {
   SetPasswordJitComponent,
   UserLockIcon,
   VaultIcon,
+  LoginDecryptionOptionsComponent,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -216,12 +217,6 @@ const routes: Routes = [
     canActivate: [unauthGuardFn(unauthRouteOverrides)],
     data: { state: "2fa-options" } satisfies RouteDataProperties,
   },
-  {
-    path: "login-initiated",
-    component: LoginDecryptionOptionsComponentV1,
-    canActivate: [tdeDecryptionRequiredGuard()],
-    data: { state: "login-initiated" } satisfies RouteDataProperties,
-  },
   {
     path: "sso",
     component: SsoComponent,
@@ -489,6 +484,29 @@ const routes: Routes = [
       ],
     },
   ),
+  ...unauthUiRefreshSwap(
+    LoginDecryptionOptionsComponentV1,
+    ExtensionAnonLayoutWrapperComponent,
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+      data: { state: "login-initiated" } satisfies RouteDataProperties,
+    },
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+      data: {
+        pageTitle: {
+          key: "deviceApprovalRequiredV2",
+        },
+        pageSubtitle: {
+          key: "selectAnApprovalOptionBelow",
+        },
+        titleId: "deviceApprovalRequiredV2",
+      },
+      children: [{ path: "", component: LoginDecryptionOptionsComponent }],
+    },
+  ),
   {
     path: "",
     component: ExtensionAnonLayoutWrapperComponent,
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index 83c2628f281..4d9ee1d69dc 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -32,6 +32,7 @@ import {
   SetPasswordJitComponent,
   UserLockIcon,
   VaultIcon,
+  LoginDecryptionOptionsComponent,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -101,11 +102,6 @@ const routes: Routes = [
       ],
     },
   ),
-  {
-    path: "login-initiated",
-    component: LoginDecryptionOptionsComponentV1,
-    canActivate: [tdeDecryptionRequiredGuard()],
-  },
   { path: "register", component: RegisterComponent },
   {
     path: "vault",
@@ -200,6 +196,28 @@ const routes: Routes = [
       ],
     },
   ),
+  ...unauthUiRefreshSwap(
+    LoginDecryptionOptionsComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+    },
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+      data: {
+        pageTitle: {
+          key: "deviceApprovalRequiredV2",
+        },
+        pageSubtitle: {
+          key: "selectAnApprovalOptionBelow",
+        },
+        titleId: "deviceApprovalRequiredV2",
+      },
+      children: [{ path: "", component: LoginDecryptionOptionsComponent }],
+    },
+  ),
   {
     path: "",
     component: AnonLayoutWrapperComponent,
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 83aaf2157d7..f081632a6f7 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2779,6 +2779,12 @@
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
+  "deviceApprovalRequiredV2": {
+    "message": "Device approval required"
+  },
+  "selectAnApprovalOptionBelow": {
+    "message": "Select an approval option below"
+  },
   "rememberThisDevice": {
     "message": "Remember this device"
   },
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index e1b28404517..d6c119d45e9 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -31,6 +31,7 @@ import {
   RegistrationLockAltIcon,
   RegistrationExpiredLinkIcon,
   VaultIcon,
+  LoginDecryptionOptionsComponent,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -111,11 +112,6 @@ const routes: Routes = [
         component: LoginViaAuthRequestComponent,
         data: { titleId: "adminApprovalRequested" } satisfies RouteDataProperties,
       },
-      {
-        path: "login-initiated",
-        component: LoginDecryptionOptionsComponentV1,
-        canActivate: [tdeDecryptionRequiredGuard()],
-      },
       {
         path: "register",
         component: TrialInitiationComponent,
@@ -226,6 +222,28 @@ const routes: Routes = [
       ],
     },
   ),
+  ...unauthUiRefreshSwap(
+    LoginDecryptionOptionsComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+    },
+    {
+      path: "login-initiated",
+      canActivate: [tdeDecryptionRequiredGuard()],
+      data: {
+        pageTitle: {
+          key: "deviceApprovalRequiredV2",
+        },
+        pageSubtitle: {
+          key: "selectAnApprovalOptionBelow",
+        },
+        titleId: "deviceApprovalRequiredV2",
+      },
+      children: [{ path: "", component: LoginDecryptionOptionsComponent }],
+    },
+  ),
   ...unauthUiRefreshSwap(
     AnonLayoutWrapperComponent,
     AnonLayoutWrapperComponent,
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index aa7bce04312..bf09fb37ae7 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -7928,6 +7928,12 @@
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
+  "deviceApprovalRequiredV2": {
+    "message": "Device approval required"
+  },
+  "selectAnApprovalOptionBelow": {
+    "message": "Select an approval option below"
+  },
   "rememberThisDevice": {
     "message": "Remember this device"
   },
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index d3d9e600918..0deb9327869 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -24,6 +24,9 @@ export * from "./login/login-secondary-content.component";
 export * from "./login/login-component.service";
 export * from "./login/default-login-component.service";
 
+// login-decryption-options
+export * from "./login-decryption-options/login-decryption-options.component";
+
 // password callout
 export * from "./password-callout/password-callout.component";
 
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
new file mode 100644
index 00000000000..06e454b7c21
--- /dev/null
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -0,0 +1 @@
+<div>login-decryption-options works!</div>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
new file mode 100644
index 00000000000..2304b6b9313
--- /dev/null
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  templateUrl: "./login-decryption-options.component.html",
+  imports: [],
+})
+export class LoginDecryptionOptionsComponent {}
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 84cf5ed521e..7f3cb1893b5 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -68,7 +68,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.ProviderClientVaultPrivacyBanner]: FALSE,
   [FeatureFlag.VaultBulkManagementAction]: FALSE,
   [FeatureFlag.IdpAutoSubmitLogin]: FALSE,
-  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: FALSE,
+  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: true,
   [FeatureFlag.EnableUpgradePasswordManagerSub]: FALSE,
   [FeatureFlag.GenerateIdentityFillScriptRefactor]: FALSE,
   [FeatureFlag.EnableNewCardCombinedExpiryAutofill]: FALSE,

From d8927de4c9543134958144c2f528c883dd60fa5a Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 29 Oct 2024 14:25:28 -0700
Subject: [PATCH 03/28] add template

---
 .../login-decryption-options.component.html   | 35 +++++++++++++++++-
 .../login-decryption-options.component.ts     | 36 +++++++++++++++++--
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 06e454b7c21..d68c04609fe 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -1 +1,34 @@
-<div>login-decryption-options works!</div>
+<ng-container *ngIf="loading">
+  <div class="text-center">
+    <i
+      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  </div>
+</ng-container>
+
+<form *ngIf="!loading" [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="rememberDevice" />
+    <bit-label>{{ "rememberThisDevice" | i18n }}</bit-label>
+    <bit-hint>{{ "uncheckIfPublicDevice" | i18n }}</bit-hint>
+  </bit-form-control>
+
+  <div class="tw-grid tw-gap-3">
+    <button type="button" bitButton block buttonType="primary">
+      {{ "approveFromYourOtherDevice" | i18n }}
+    </button>
+
+    <div class="tw-text-center">{{ "or" | i18n }}</div>
+
+    <button type="button" bitButton block buttonType="secondary">
+      {{ "useMasterPassword" | i18n }}
+    </button>
+
+    <button type="button" bitButton block buttonType="secondary">
+      {{ "requestAdminApproval" | i18n }}
+    </button>
+  </div>
+</form>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 2304b6b9313..2445c06fe3b 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -1,8 +1,38 @@
-import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  CheckboxModule,
+  FormFieldModule,
+} from "@bitwarden/components";
 
 @Component({
   standalone: true,
   templateUrl: "./login-decryption-options.component.html",
-  imports: [],
+  imports: [
+    AsyncActionsModule,
+    ButtonModule,
+    CheckboxModule,
+    CommonModule,
+    FormFieldModule,
+    JslibModule,
+    ReactiveFormsModule,
+  ],
 })
-export class LoginDecryptionOptionsComponent {}
+export class LoginDecryptionOptionsComponent implements OnInit {
+  loading = false;
+
+  formGroup = this.formBuilder.group({
+    rememberDevice: [true],
+  });
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit(): void {}
+
+  submit = () => {};
+}

From 32148cf34edb5a201b14c693e3f5c6d668981d14 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 12:40:58 -0700
Subject: [PATCH 04/28] setup rememberDevice control methods

---
 .../login-decryption-options.component.ts     | 76 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 2445c06fe3b..e913076bd11 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -1,13 +1,21 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms";
+import { Router } from "@angular/router";
+import { defer, firstValueFrom, map, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { UserId } from "@bitwarden/common/types/guid";
 import {
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
   FormFieldModule,
+  ToastService,
 } from "@bitwarden/components";
 
 @Component({
@@ -24,15 +32,75 @@ import {
   ],
 })
 export class LoginDecryptionOptionsComponent implements OnInit {
+  private activeAccountId: UserId;
+  private email: string;
+
   loading = false;
 
+  // Remember device means for the user to trust the device
   formGroup = this.formBuilder.group({
-    rememberDevice: [true],
+    rememberDevice: [false], // TODO-rr-bw: change to true by default after testing
   });
 
-  constructor(private formBuilder: FormBuilder) {}
+  get rememberDeviceControl(): FormControl<boolean> {
+    return this.formGroup.controls.rememberDevice;
+  }
+
+  constructor(
+    private accountService: AccountService,
+    private deviceTrustService: DeviceTrustServiceAbstraction,
+    private formBuilder: FormBuilder,
+    private i18nService: I18nService,
+    private router: Router,
+    private toastService: ToastService,
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    // this.loading = true; // TODO-rr-bw: uncomment after testing
+
+    this.activeAccountId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
+
+    this.email = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.email)),
+    );
+
+    if (!this.email) {
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("userEmailMissing"),
+      });
+
+      await this.router.navigate(["/login"]);
+      return;
+    }
+
+    this.observeAndPersistRememberDeviceValueChanges();
+
+    // Persist user choice from state if it exists
+    await this.setRememberDeviceDefaultValue();
+  }
+
+  private observeAndPersistRememberDeviceValueChanges(): void {
+    this.rememberDeviceControl.valueChanges
+      .pipe(
+        switchMap((value) =>
+          defer(() => this.deviceTrustService.setShouldTrustDevice(this.activeAccountId, value)),
+        ),
+        takeUntilDestroyed(),
+      )
+      .subscribe();
+  }
+
+  private async setRememberDeviceDefaultValue() {
+    const rememberDeviceFromState = await this.deviceTrustService.getShouldTrustDevice(
+      this.activeAccountId,
+    );
+
+    const rememberDevice = rememberDeviceFromState ?? true;
 
-  ngOnInit(): void {}
+    this.rememberDeviceControl.setValue(rememberDevice);
+  }
 
   submit = () => {};
 }

From c4fa33395a66f27674c427d041e9678574ecf2aa Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 12:43:29 -0700
Subject: [PATCH 05/28] use takeUntilDestroyed(this.destroyRef)

---
 .../login-decryption-options.component.ts                    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index e913076bd11..096e69ffd3d 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms";
 import { Router } from "@angular/router";
@@ -48,6 +48,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
 
   constructor(
     private accountService: AccountService,
+    private destroyRef: DestroyRef,
     private deviceTrustService: DeviceTrustServiceAbstraction,
     private formBuilder: FormBuilder,
     private i18nService: I18nService,
@@ -84,10 +85,10 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private observeAndPersistRememberDeviceValueChanges(): void {
     this.rememberDeviceControl.valueChanges
       .pipe(
+        takeUntilDestroyed(this.destroyRef),
         switchMap((value) =>
           defer(() => this.deviceTrustService.setShouldTrustDevice(this.activeAccountId, value)),
         ),
-        takeUntilDestroyed(),
       )
       .subscribe();
   }

From 335958e096d705726c88d89b960ab87854e2d557 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:31:16 -0700
Subject: [PATCH 06/28] migrate loadUntrustedDeviceData() and
 requestAdminApproval() methods

---
 .../login-decryption-options.component.html   | 57 ++++++++----
 .../login-decryption-options.component.ts     | 89 ++++++++++++++++---
 2 files changed, 115 insertions(+), 31 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index d68c04609fe..cb67d6a0a9e 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -9,26 +9,47 @@
   </div>
 </ng-container>
 
-<form *ngIf="!loading" [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-form-control>
-    <input type="checkbox" bitCheckbox formControlName="rememberDevice" />
-    <bit-label>{{ "rememberThisDevice" | i18n }}</bit-label>
-    <bit-hint>{{ "uncheckIfPublicDevice" | i18n }}</bit-hint>
-  </bit-form-control>
+<form *ngIf="!loading" [formGroup]="formGroup">
+  <ng-container *ngIf="data.state === State.ExistingUserUntrustedDevice">
+    <bit-form-control>
+      <input type="checkbox" bitCheckbox formControlName="rememberDevice" />
+      <bit-label>{{ "rememberThisDevice" | i18n }}</bit-label>
+      <bit-hint>{{ "uncheckIfPublicDevice" | i18n }}</bit-hint>
+    </bit-form-control>
 
-  <div class="tw-grid tw-gap-3">
-    <button type="button" bitButton block buttonType="primary">
-      {{ "approveFromYourOtherDevice" | i18n }}
-    </button>
+    <div class="tw-grid tw-gap-3">
+      <button
+        *ngIf="data.showApproveFromOtherDeviceBtn"
+        type="button"
+        bitButton
+        block
+        buttonType="primary"
+      >
+        {{ "approveFromYourOtherDevice" | i18n }}
+      </button>
 
-    <div class="tw-text-center">{{ "or" | i18n }}</div>
+      <div class="tw-text-center">{{ "or" | i18n }}</div>
 
-    <button type="button" bitButton block buttonType="secondary">
-      {{ "useMasterPassword" | i18n }}
-    </button>
+      <button
+        *ngIf="data.showApproveWithMasterPasswordBtn"
+        type="button"
+        bitButton
+        block
+        buttonType="secondary"
+      >
+        {{ "useMasterPassword" | i18n }}
+      </button>
 
-    <button type="button" bitButton block buttonType="secondary">
-      {{ "requestAdminApproval" | i18n }}
-    </button>
-  </div>
+      <button
+        *ngIf="data.showReqAdminApprovalBtn"
+        type="button"
+        bitButton
+        block
+        buttonType="secondary"
+        (click)="requestAdminApproval()"
+      >
+        {{ "requestAdminApproval" | i18n }}
+      </button>
+    </div>
+  </ng-container>
 </form>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 096e69ffd3d..3fc55ca5206 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -6,23 +6,43 @@ import { Router } from "@angular/router";
 import { defer, firstValueFrom, map, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  LoginEmailServiceAbstraction,
+  UserDecryptionOptions,
+  UserDecryptionOptionsServiceAbstraction,
+} from "@bitwarden/auth/common";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { UserId } from "@bitwarden/common/types/guid";
-import {
-  AsyncActionsModule,
-  ButtonModule,
-  CheckboxModule,
-  FormFieldModule,
-  ToastService,
-} from "@bitwarden/components";
+import { ButtonModule, CheckboxModule, FormFieldModule, ToastService } from "@bitwarden/components";
+
+enum State {
+  NewUser,
+  ExistingUserUntrustedDevice,
+}
+
+type NewUserData = {
+  readonly state: State.NewUser;
+  readonly organizationId: string;
+  readonly userEmail: string;
+};
+
+type ExistingUserUntrustedDeviceData = {
+  readonly state: State.ExistingUserUntrustedDevice;
+  readonly showApproveFromOtherDeviceBtn: boolean;
+  readonly showReqAdminApprovalBtn: boolean;
+  readonly showApproveWithMasterPasswordBtn: boolean;
+  readonly userEmail: string;
+};
+
+type Data = NewUserData | ExistingUserUntrustedDeviceData;
 
 @Component({
   standalone: true,
   templateUrl: "./login-decryption-options.component.html",
   imports: [
-    AsyncActionsModule,
     ButtonModule,
     CheckboxModule,
     CommonModule,
@@ -35,11 +55,13 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private activeAccountId: UserId;
   private email: string;
 
-  loading = false;
+  protected data?: Data;
+  protected loading = false;
+  protected State = State;
 
-  // Remember device means for the user to trust the device
-  formGroup = this.formBuilder.group({
-    rememberDevice: [false], // TODO-rr-bw: change to true by default after testing
+  protected formGroup = this.formBuilder.group({
+    // TODO-rr-bw: change to true by default after testing
+    rememberDevice: [false], // Remember device means for the user to trust the device
   });
 
   get rememberDeviceControl(): FormControl<boolean> {
@@ -52,8 +74,11 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     private deviceTrustService: DeviceTrustServiceAbstraction,
     private formBuilder: FormBuilder,
     private i18nService: I18nService,
+    private loginEmailService: LoginEmailServiceAbstraction,
     private router: Router,
     private toastService: ToastService,
+    private userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
+    private validationService: ValidationService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -80,6 +105,23 @@ export class LoginDecryptionOptionsComponent implements OnInit {
 
     // Persist user choice from state if it exists
     await this.setRememberDeviceDefaultValue();
+
+    try {
+      const userDecryptionOptions = await firstValueFrom(
+        this.userDecryptionOptionsService.userDecryptionOptions$,
+      );
+
+      if (
+        !userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval &&
+        !userDecryptionOptions?.hasMasterPassword
+      ) {
+        // this.loadNewUserData();
+      } else {
+        this.loadUntrustedDeviceData(userDecryptionOptions);
+      }
+    } catch (err) {
+      this.validationService.showError(err);
+    }
   }
 
   private observeAndPersistRememberDeviceValueChanges(): void {
@@ -103,5 +145,26 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.rememberDeviceControl.setValue(rememberDevice);
   }
 
-  submit = () => {};
+  private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
+    const showApproveFromOtherDeviceBtn =
+      userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
+
+    const showReqAdminApprovalBtn =
+      !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval || false;
+
+    const showApproveWithMasterPasswordBtn = userDecryptionOptions?.hasMasterPassword || false;
+
+    this.data = {
+      state: State.ExistingUserUntrustedDevice,
+      showApproveFromOtherDeviceBtn,
+      showReqAdminApprovalBtn,
+      showApproveWithMasterPasswordBtn,
+      userEmail: this.email,
+    };
+  }
+
+  protected async requestAdminApproval() {
+    this.loginEmailService.setLoginEmail(this.data.userEmail);
+    await this.router.navigate(["/admin-approval-requested"]);
+  }
 }

From d5660a9a3d855a4d8193733cddf5209ce5c568d1 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:36:43 -0700
Subject: [PATCH 07/28] migrate approveFromOtherDevice() method

---
 .../login-decryption-options.component.html              | 1 +
 .../login-decryption-options.component.ts                | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index cb67d6a0a9e..67ec9f61da6 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -24,6 +24,7 @@
         bitButton
         block
         buttonType="primary"
+        (click)="approveFromOtherDevice()"
       >
         {{ "approveFromYourOtherDevice" | i18n }}
       </button>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 3fc55ca5206..719d1af37d9 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -163,6 +163,15 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     };
   }
 
+  protected async approveFromOtherDevice() {
+    if (this.data.state !== State.ExistingUserUntrustedDevice) {
+      return;
+    }
+
+    this.loginEmailService.setLoginEmail(this.data.userEmail);
+    await this.router.navigate(["/login-with-device"]);
+  }
+
   protected async requestAdminApproval() {
     this.loginEmailService.setLoginEmail(this.data.userEmail);
     await this.router.navigate(["/admin-approval-requested"]);

From a2c3735caa3f3fe1f2fa52d6a178fe4c37b8897e Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:38:25 -0700
Subject: [PATCH 08/28] migrate approveWithMasterPassword() method

---
 .../login-decryption-options.component.html               | 1 +
 .../login-decryption-options.component.ts                 | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 67ec9f61da6..82cd2426832 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -37,6 +37,7 @@
         bitButton
         block
         buttonType="secondary"
+        (click)="approveWithMasterPassword()"
       >
         {{ "useMasterPassword" | i18n }}
       </button>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 719d1af37d9..c0b874e1511 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -172,6 +172,14 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     await this.router.navigate(["/login-with-device"]);
   }
 
+  protected async approveWithMasterPassword() {
+    await this.router.navigate(["/lock"], {
+      queryParams: {
+        from: "login-initiated",
+      },
+    });
+  }
+
   protected async requestAdminApproval() {
     this.loginEmailService.setLoginEmail(this.data.userEmail);
     await this.router.navigate(["/admin-approval-requested"]);

From 6aa416ea665d4eab271543112700fd7ab06f3f54 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:24:42 -0700
Subject: [PATCH 09/28] migrate loadNewUserData() and restructure template

---
 .../login-decryption-options.component.html   | 88 ++++++++++---------
 .../login-decryption-options.component.ts     | 59 +++++++++++--
 2 files changed, 101 insertions(+), 46 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 82cd2426832..385b96a96c5 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -10,48 +10,54 @@
 </ng-container>
 
 <form *ngIf="!loading" [formGroup]="formGroup">
-  <ng-container *ngIf="data.state === State.ExistingUserUntrustedDevice">
-    <bit-form-control>
-      <input type="checkbox" bitCheckbox formControlName="rememberDevice" />
-      <bit-label>{{ "rememberThisDevice" | i18n }}</bit-label>
-      <bit-hint>{{ "uncheckIfPublicDevice" | i18n }}</bit-hint>
-    </bit-form-control>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="rememberDevice" />
+    <bit-label>{{ "rememberThisDevice" | i18n }}</bit-label>
+    <bit-hint bitTypography="body2">{{ "uncheckIfPublicDevice" | i18n }}</bit-hint>
+  </bit-form-control>
+</form>
 
-    <div class="tw-grid tw-gap-3">
-      <button
-        *ngIf="data.showApproveFromOtherDeviceBtn"
-        type="button"
-        bitButton
-        block
-        buttonType="primary"
-        (click)="approveFromOtherDevice()"
-      >
-        {{ "approveFromYourOtherDevice" | i18n }}
-      </button>
+<ng-container *ngIf="data.state === State.NewUser">
+  <button type="button" bitButton block buttonType="primary" [bitAction]="createUserAction">
+    {{ "continue" | i18n }}
+  </button>
+</ng-container>
 
-      <div class="tw-text-center">{{ "or" | i18n }}</div>
+<ng-container *ngIf="data.state === State.ExistingUserUntrustedDevice">
+  <div class="tw-grid tw-gap-3">
+    <button
+      *ngIf="data.showApproveFromOtherDeviceBtn"
+      type="button"
+      bitButton
+      block
+      buttonType="primary"
+      (click)="approveFromOtherDevice()"
+    >
+      {{ "approveFromYourOtherDevice" | i18n }}
+    </button>
 
-      <button
-        *ngIf="data.showApproveWithMasterPasswordBtn"
-        type="button"
-        bitButton
-        block
-        buttonType="secondary"
-        (click)="approveWithMasterPassword()"
-      >
-        {{ "useMasterPassword" | i18n }}
-      </button>
+    <div class="tw-text-center">{{ "or" | i18n }}</div>
 
-      <button
-        *ngIf="data.showReqAdminApprovalBtn"
-        type="button"
-        bitButton
-        block
-        buttonType="secondary"
-        (click)="requestAdminApproval()"
-      >
-        {{ "requestAdminApproval" | i18n }}
-      </button>
-    </div>
-  </ng-container>
-</form>
+    <button
+      *ngIf="data.showApproveWithMasterPasswordBtn"
+      type="button"
+      bitButton
+      block
+      buttonType="secondary"
+      (click)="approveWithMasterPassword()"
+    >
+      {{ "useMasterPassword" | i18n }}
+    </button>
+
+    <button
+      *ngIf="data.showReqAdminApprovalBtn"
+      type="button"
+      bitButton
+      block
+      buttonType="secondary"
+      (click)="requestAdminApproval()"
+    >
+      {{ "requestAdminApproval" | i18n }}
+    </button>
+  </div>
+</ng-container>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index c0b874e1511..6dff069a8e1 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -3,7 +3,7 @@ import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms";
 import { Router } from "@angular/router";
-import { defer, firstValueFrom, map, switchMap } from "rxjs";
+import { catchError, defer, firstValueFrom, from, map, of, switchMap, throwError } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -11,12 +11,21 @@ import {
   UserDecryptionOptions,
   UserDecryptionOptionsServiceAbstraction,
 } from "@bitwarden/auth/common";
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { UserId } from "@bitwarden/common/types/guid";
-import { ButtonModule, CheckboxModule, FormFieldModule, ToastService } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  CheckboxModule,
+  FormFieldModule,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
 
 enum State {
   NewUser,
@@ -43,12 +52,14 @@ type Data = NewUserData | ExistingUserUntrustedDeviceData;
   standalone: true,
   templateUrl: "./login-decryption-options.component.html",
   imports: [
+    AsyncActionsModule,
     ButtonModule,
     CheckboxModule,
     CommonModule,
     FormFieldModule,
     JslibModule,
     ReactiveFormsModule,
+    TypographyModule,
   ],
 })
 export class LoginDecryptionOptionsComponent implements OnInit {
@@ -75,13 +86,15 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     private formBuilder: FormBuilder,
     private i18nService: I18nService,
     private loginEmailService: LoginEmailServiceAbstraction,
+    private organizationApiService: OrganizationApiServiceAbstraction,
     private router: Router,
+    private ssoLoginService: SsoLoginServiceAbstraction,
     private toastService: ToastService,
     private userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
     private validationService: ValidationService,
   ) {}
 
-  async ngOnInit(): Promise<void> {
+  async ngOnInit() {
     // this.loading = true; // TODO-rr-bw: uncomment after testing
 
     this.activeAccountId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
@@ -115,7 +128,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
         !userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval &&
         !userDecryptionOptions?.hasMasterPassword
       ) {
-        // this.loadNewUserData();
+        await this.loadNewUserData();
       } else {
         this.loadUntrustedDeviceData(userDecryptionOptions);
       }
@@ -124,7 +137,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     }
   }
 
-  private observeAndPersistRememberDeviceValueChanges(): void {
+  private observeAndPersistRememberDeviceValueChanges() {
     this.rememberDeviceControl.valueChanges
       .pipe(
         takeUntilDestroyed(this.destroyRef),
@@ -145,7 +158,37 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.rememberDeviceControl.setValue(rememberDevice);
   }
 
+  private async loadNewUserData() {
+    const autoEnrollStatus$ = defer(() =>
+      this.ssoLoginService.getActiveUserOrganizationSsoIdentifier(),
+    ).pipe(
+      switchMap((organizationIdentifier) => {
+        if (organizationIdentifier == undefined) {
+          return throwError(() => new Error(this.i18nService.t("ssoIdentifierRequired")));
+        }
+
+        return from(this.organizationApiService.getAutoEnrollStatus(organizationIdentifier));
+      }),
+      catchError((err: unknown) => {
+        this.validationService.showError(err);
+        return of(undefined);
+      }),
+    );
+
+    const autoEnrollStatus = await firstValueFrom(autoEnrollStatus$);
+
+    this.data = {
+      state: State.NewUser,
+      organizationId: autoEnrollStatus.id,
+      userEmail: this.email,
+    };
+
+    this.loading = false;
+  }
+
   private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
+    this.loading = true;
+
     const showApproveFromOtherDeviceBtn =
       userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
 
@@ -161,6 +204,12 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       showApproveWithMasterPasswordBtn,
       userEmail: this.email,
     };
+
+    this.loading = false;
+  }
+
+  protected async createUserAction() {
+    // TODO-rr-bw: implement
   }
 
   protected async approveFromOtherDevice() {

From b7b613bfbbf1fc6191e7122082405eb6a89ed638 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Fri, 1 Nov 2024 17:12:27 -0700
Subject: [PATCH 10/28] setup services

---
 apps/web/src/app/auth/core/services/index.ts              | 1 +
 .../auth/core/services/login-decryption-options/index.ts  | 1 +
 .../web-login-decryption-options.service.ts               | 8 ++++++++
 apps/web/src/app/core/core.module.ts                      | 7 +++++++
 libs/angular/src/services/jslib-services.module.ts        | 7 +++++++
 libs/auth/src/angular/index.ts                            | 2 ++
 .../default-login-decryption-options.service.ts           | 3 +++
 .../login-decryption-options.service.ts                   | 1 +
 8 files changed, 30 insertions(+)
 create mode 100644 apps/web/src/app/auth/core/services/login-decryption-options/index.ts
 create mode 100644 apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
 create mode 100644 libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
 create mode 100644 libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts

diff --git a/apps/web/src/app/auth/core/services/index.ts b/apps/web/src/app/auth/core/services/index.ts
index a2e674c2a95..c14292d7c6d 100644
--- a/apps/web/src/app/auth/core/services/index.ts
+++ b/apps/web/src/app/auth/core/services/index.ts
@@ -1,4 +1,5 @@
 export * from "./login";
+export * from "./login-decryption-options";
 export * from "./webauthn-login";
 export * from "./set-password-jit";
 export * from "./registration";
diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/index.ts b/apps/web/src/app/auth/core/services/login-decryption-options/index.ts
new file mode 100644
index 00000000000..f0ff30b8727
--- /dev/null
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/index.ts
@@ -0,0 +1 @@
+export * from "./web-login-decryption-options.service";
diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
new file mode 100644
index 00000000000..51ad0c633c1
--- /dev/null
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -0,0 +1,8 @@
+import {
+  LoginDecryptionOptionsService,
+  DefaultLoginDecryptionOptionsService,
+} from "@bitwarden/auth/angular";
+
+export class WebLoginDecryptionOptionsService
+  extends DefaultLoginDecryptionOptionsService
+  implements LoginDecryptionOptionsService {}
diff --git a/apps/web/src/app/core/core.module.ts b/apps/web/src/app/core/core.module.ts
index d1fa3f8ba8c..5b14ccb0406 100644
--- a/apps/web/src/app/core/core.module.ts
+++ b/apps/web/src/app/core/core.module.ts
@@ -30,6 +30,7 @@ import {
   LoginComponentService,
   LockComponentService,
   SetPasswordJitService,
+  LoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
 import {
   InternalUserDecryptionOptionsServiceAbstraction,
@@ -91,6 +92,7 @@ import {
   WebRegistrationFinishService,
   WebLoginComponentService,
   WebLockComponentService,
+  WebLoginDecryptionOptionsService,
 } from "../auth";
 import { AcceptOrganizationInviteService } from "../auth/organization-invite/accept-organization.service";
 import { HtmlStorageService } from "../core/html-storage.service";
@@ -286,6 +288,11 @@ const safeProviders: SafeProvider[] = [
     useClass: LoginEmailService,
     deps: [AccountService, AuthService, StateProvider],
   }),
+  safeProvider({
+    provide: LoginDecryptionOptionsService,
+    useClass: WebLoginDecryptionOptionsService,
+    deps: [],
+  }),
 ];
 
 @NgModule({
diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts
index 5d8822866d6..09aa209c9b4 100644
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@@ -16,6 +16,8 @@ import {
   DefaultAnonLayoutWrapperDataService,
   LoginComponentService,
   DefaultLoginComponentService,
+  LoginDecryptionOptionsService,
+  DefaultLoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
 import {
   AuthRequestServiceAbstraction,
@@ -1365,6 +1367,11 @@ const safeProviders: SafeProvider[] = [
     useClass: DefaultCipherAuthorizationService,
     deps: [CollectionService, OrganizationServiceAbstraction],
   }),
+  safeProvider({
+    provide: LoginDecryptionOptionsService,
+    useClass: DefaultLoginDecryptionOptionsService,
+    deps: [],
+  }),
 ];
 
 @NgModule({
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 0deb9327869..39ae8be9e64 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -26,6 +26,8 @@ export * from "./login/default-login-component.service";
 
 // login-decryption-options
 export * from "./login-decryption-options/login-decryption-options.component";
+export * from "./login-decryption-options/login-decryption-options.service";
+export * from "./login-decryption-options/default-login-decryption-options.service";
 
 // password callout
 export * from "./password-callout/password-callout.component";
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
new file mode 100644
index 00000000000..5d8d28a5c60
--- /dev/null
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
@@ -0,0 +1,3 @@
+import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
+
+export class DefaultLoginDecryptionOptionsService implements LoginDecryptionOptionsService {}
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
new file mode 100644
index 00000000000..964da416b34
--- /dev/null
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
@@ -0,0 +1 @@
+export abstract class LoginDecryptionOptionsService {}

From 869add9d3c32cab514da7b5e99bf52c8806cbd21 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 2 Nov 2024 14:47:08 -0700
Subject: [PATCH 11/28] migrate and refactor createUser() method

---
 .../web-login-decryption-options.service.ts   | 27 +++++++-
 ...efault-login-decryption-options.service.ts |  6 +-
 .../login-decryption-options.component.html   |  2 +-
 .../login-decryption-options.component.ts     | 63 ++++++++++++++++++-
 .../login-decryption-options.service.ts       |  4 +-
 5 files changed, 95 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index 51ad0c633c1..f45dbdff3c4 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -1,8 +1,33 @@
+import { inject } from "@angular/core";
+
 import {
   LoginDecryptionOptionsService,
   DefaultLoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+
+import { RouterService } from "../../../../core/router.service";
+import { AcceptOrganizationInviteService } from "../../../organization-invite/accept-organization.service";
 
 export class WebLoginDecryptionOptionsService
   extends DefaultLoginDecryptionOptionsService
-  implements LoginDecryptionOptionsService {}
+  implements LoginDecryptionOptionsService
+{
+  protected routerService = inject(RouterService);
+  protected acceptOrganizationInviteService = inject(AcceptOrganizationInviteService);
+  protected validationService = inject(ValidationService);
+
+  override async handleCreateUserSuccess(): Promise<void> {
+    try {
+      // Invites from TDE orgs go through here, but the invite is
+      // accepted while being enrolled in admin recovery. So we need to clear
+      // the redirect and stored org invite.
+      await this.routerService.getAndClearLoginRedirectUrl();
+      await this.acceptOrganizationInviteService.clearOrganizationInvitation();
+
+      // await this.router.navigate(["/vault"]); // TODO-rr-bw: move routing to component?
+    } catch (error) {
+      this.validationService.showError(error);
+    }
+  }
+}
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
index 5d8d28a5c60..fa4453adb78 100644
--- a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
@@ -1,3 +1,7 @@
 import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
-export class DefaultLoginDecryptionOptionsService implements LoginDecryptionOptionsService {}
+export class DefaultLoginDecryptionOptionsService implements LoginDecryptionOptionsService {
+  handleCreateUserSuccess(): Promise<void> {
+    return null;
+  }
+}
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 385b96a96c5..58094228b0e 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -18,7 +18,7 @@
 </form>
 
 <ng-container *ngIf="data.state === State.NewUser">
-  <button type="button" bitButton block buttonType="primary" [bitAction]="createUserAction">
+  <button type="button" bitButton block buttonType="primary" [bitAction]="createUser">
     {{ "continue" | i18n }}
   </button>
 </ng-container>
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 6dff069a8e1..ec7a978a041 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -11,11 +11,17 @@ import {
   UserDecryptionOptions,
   UserDecryptionOptionsServiceAbstraction,
 } from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
+import { PasswordResetEnrollmentServiceAbstraction } from "@bitwarden/common/auth/abstractions/password-reset-enrollment.service.abstraction";
 import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { ClientType } from "@bitwarden/common/enums";
+import { KeysRequest } from "@bitwarden/common/models/request/keys.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
@@ -26,6 +32,9 @@ import {
   ToastService,
   TypographyModule,
 } from "@bitwarden/components";
+import { KeyService } from "@bitwarden/key-management";
+
+import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
 enum State {
   NewUser,
@@ -64,6 +73,7 @@ type Data = NewUserData | ExistingUserUntrustedDeviceData;
 })
 export class LoginDecryptionOptionsComponent implements OnInit {
   private activeAccountId: UserId;
+  private clientType: ClientType;
   private email: string;
 
   protected data?: Data;
@@ -81,18 +91,26 @@ export class LoginDecryptionOptionsComponent implements OnInit {
 
   constructor(
     private accountService: AccountService,
+    private apiService: ApiService,
     private destroyRef: DestroyRef,
     private deviceTrustService: DeviceTrustServiceAbstraction,
     private formBuilder: FormBuilder,
     private i18nService: I18nService,
+    private keyService: KeyService,
+    private loginDecryptionOptionsService: LoginDecryptionOptionsService,
     private loginEmailService: LoginEmailServiceAbstraction,
+    private messagingService: MessagingService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private passwordResetEnrollmentService: PasswordResetEnrollmentServiceAbstraction,
+    private platformUtilsService: PlatformUtilsService,
     private router: Router,
     private ssoLoginService: SsoLoginServiceAbstraction,
     private toastService: ToastService,
     private userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
     private validationService: ValidationService,
-  ) {}
+  ) {
+    this.clientType === this.platformUtilsService.getClientType();
+  }
 
   async ngOnInit() {
     // this.loading = true; // TODO-rr-bw: uncomment after testing
@@ -208,8 +226,47 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.loading = false;
   }
 
-  protected async createUserAction() {
-    // TODO-rr-bw: implement
+  async createUser() {
+    if (this.data.state !== State.NewUser) {
+      return;
+    }
+
+    // this.loading to support clients without async-actions-support
+    this.loading = true;
+    // errors must be caught in child components to prevent navigation
+    try {
+      const { publicKey, privateKey } = await this.keyService.initAccount();
+      const keysRequest = new KeysRequest(publicKey, privateKey.encryptedString);
+      await this.apiService.postAccountKeys(keysRequest);
+
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("accountSuccessfullyCreated"),
+      });
+
+      await this.passwordResetEnrollmentService.enroll(this.data.organizationId);
+
+      if (this.formGroup.value.rememberDevice) {
+        await this.deviceTrustService.trustDevice(this.activeAccountId);
+      }
+
+      await this.loginDecryptionOptionsService.handleCreateUserSuccess();
+    } catch (err) {
+      this.validationService.showError(err);
+    } finally {
+      this.loading = false;
+    }
+
+    if (this.clientType === ClientType.Desktop) {
+      this.messagingService.send("redrawMenu");
+    }
+
+    if (this.clientType === ClientType.Browser) {
+      await this.router.navigate(["/tabs/vault"]);
+    } else {
+      await this.router.navigate(["/vault"]);
+    }
   }
 
   protected async approveFromOtherDevice() {
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
index 964da416b34..7b1a2b19401 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
@@ -1 +1,3 @@
-export abstract class LoginDecryptionOptionsService {}
+export abstract class LoginDecryptionOptionsService {
+  abstract handleCreateUserSuccess(): Promise<void>;
+}

From 7f0ff35bcdd649ea66e22a395647753d9848546a Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 2 Nov 2024 14:52:18 -0700
Subject: [PATCH 12/28] remove comment

---
 .../web-login-decryption-options.service.ts                     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index f45dbdff3c4..b9ea5724422 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -24,8 +24,6 @@ export class WebLoginDecryptionOptionsService
       // the redirect and stored org invite.
       await this.routerService.getAndClearLoginRedirectUrl();
       await this.acceptOrganizationInviteService.clearOrganizationInvitation();
-
-      // await this.router.navigate(["/vault"]); // TODO-rr-bw: move routing to component?
     } catch (error) {
       this.validationService.showError(error);
     }

From ab66de10c328547f1ac2c8a5edd0904b4eaead69 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 2 Nov 2024 15:58:03 -0700
Subject: [PATCH 13/28] refactor email usage and loading state

---
 .../web-login-decryption-options.service.ts   |  2 +-
 .../login-decryption-options.component.html   |  2 +-
 .../login-decryption-options.component.ts     | 35 ++++++++-----------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index b9ea5724422..16950e383be 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -25,7 +25,7 @@ export class WebLoginDecryptionOptionsService
       await this.routerService.getAndClearLoginRedirectUrl();
       await this.acceptOrganizationInviteService.clearOrganizationInvitation();
     } catch (error) {
-      this.validationService.showError(error);
+      this.validationService.showError(error); // TODO-rr-bw: rethrow error?
     }
   }
 }
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 58094228b0e..4bc48abffc9 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -50,7 +50,7 @@
     </button>
 
     <button
-      *ngIf="data.showReqAdminApprovalBtn"
+      *ngIf="data.showRequestAdminApprovalBtn"
       type="button"
       bitButton
       block
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index ec7a978a041..30d096bc358 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -44,15 +44,13 @@ enum State {
 type NewUserData = {
   readonly state: State.NewUser;
   readonly organizationId: string;
-  readonly userEmail: string;
 };
 
 type ExistingUserUntrustedDeviceData = {
   readonly state: State.ExistingUserUntrustedDevice;
   readonly showApproveFromOtherDeviceBtn: boolean;
-  readonly showReqAdminApprovalBtn: boolean;
+  readonly showRequestAdminApprovalBtn: boolean;
   readonly showApproveWithMasterPasswordBtn: boolean;
-  readonly userEmail: string;
 };
 
 type Data = NewUserData | ExistingUserUntrustedDeviceData;
@@ -113,7 +111,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   }
 
   async ngOnInit() {
-    // this.loading = true; // TODO-rr-bw: uncomment after testing
+    this.loading = true;
 
     this.activeAccountId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
 
@@ -133,9 +131,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     }
 
     this.observeAndPersistRememberDeviceValueChanges();
-
-    // Persist user choice from state if it exists
-    await this.setRememberDeviceDefaultValue();
+    await this.setRememberDeviceDefaultValueFromState();
 
     try {
       const userDecryptionOptions = await firstValueFrom(
@@ -146,12 +142,19 @@ export class LoginDecryptionOptionsComponent implements OnInit {
         !userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval &&
         !userDecryptionOptions?.hasMasterPassword
       ) {
+        /**
+         * We are dealing with a new account if both are true:
+         * - User does NOT have admin approval (i.e. has not enrolled in admin reset)
+         * - User does NOT have a master password
+         */
         await this.loadNewUserData();
       } else {
         this.loadUntrustedDeviceData(userDecryptionOptions);
       }
     } catch (err) {
       this.validationService.showError(err);
+    } finally {
+      this.loading = false;
     }
   }
 
@@ -166,7 +169,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       .subscribe();
   }
 
-  private async setRememberDeviceDefaultValue() {
+  private async setRememberDeviceDefaultValueFromState() {
     const rememberDeviceFromState = await this.deviceTrustService.getShouldTrustDevice(
       this.activeAccountId,
     );
@@ -198,19 +201,14 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.data = {
       state: State.NewUser,
       organizationId: autoEnrollStatus.id,
-      userEmail: this.email,
     };
-
-    this.loading = false;
   }
 
   private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
-    this.loading = true;
-
     const showApproveFromOtherDeviceBtn =
       userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
 
-    const showReqAdminApprovalBtn =
+    const showRequestAdminApprovalBtn =
       !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval || false;
 
     const showApproveWithMasterPasswordBtn = userDecryptionOptions?.hasMasterPassword || false;
@@ -218,12 +216,9 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.data = {
       state: State.ExistingUserUntrustedDevice,
       showApproveFromOtherDeviceBtn,
-      showReqAdminApprovalBtn,
+      showRequestAdminApprovalBtn,
       showApproveWithMasterPasswordBtn,
-      userEmail: this.email,
     };
-
-    this.loading = false;
   }
 
   async createUser() {
@@ -274,7 +269,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       return;
     }
 
-    this.loginEmailService.setLoginEmail(this.data.userEmail);
+    this.loginEmailService.setLoginEmail(this.email);
     await this.router.navigate(["/login-with-device"]);
   }
 
@@ -287,7 +282,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   }
 
   protected async requestAdminApproval() {
-    this.loginEmailService.setLoginEmail(this.data.userEmail);
+    this.loginEmailService.setLoginEmail(this.email);
     await this.router.navigate(["/admin-approval-requested"]);
   }
 }

From eea4aaceea48ba5fe5ffff7e726eb77329f32904 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 2 Nov 2024 16:15:25 -0700
Subject: [PATCH 14/28] refactor UI data properties

---
 .../login-decryption-options.component.html   | 10 ++--
 .../login-decryption-options.component.ts     | 47 ++++++-------------
 2 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 4bc48abffc9..30ed294d84b 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -17,16 +17,16 @@
   </bit-form-control>
 </form>
 
-<ng-container *ngIf="data.state === State.NewUser">
+<ng-container *ngIf="state === State.NewUser">
   <button type="button" bitButton block buttonType="primary" [bitAction]="createUser">
     {{ "continue" | i18n }}
   </button>
 </ng-container>
 
-<ng-container *ngIf="data.state === State.ExistingUserUntrustedDevice">
+<ng-container *ngIf="state === State.ExistingUserUntrustedDevice">
   <div class="tw-grid tw-gap-3">
     <button
-      *ngIf="data.showApproveFromOtherDeviceBtn"
+      *ngIf="showApproveFromOtherDeviceBtn"
       type="button"
       bitButton
       block
@@ -39,7 +39,7 @@
     <div class="tw-text-center">{{ "or" | i18n }}</div>
 
     <button
-      *ngIf="data.showApproveWithMasterPasswordBtn"
+      *ngIf="showApproveWithMasterPasswordBtn"
       type="button"
       bitButton
       block
@@ -50,7 +50,7 @@
     </button>
 
     <button
-      *ngIf="data.showRequestAdminApprovalBtn"
+      *ngIf="showRequestAdminApprovalBtn"
       type="button"
       bitButton
       block
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 30d096bc358..d9039c60202 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -41,20 +41,6 @@ enum State {
   ExistingUserUntrustedDevice,
 }
 
-type NewUserData = {
-  readonly state: State.NewUser;
-  readonly organizationId: string;
-};
-
-type ExistingUserUntrustedDeviceData = {
-  readonly state: State.ExistingUserUntrustedDevice;
-  readonly showApproveFromOtherDeviceBtn: boolean;
-  readonly showRequestAdminApprovalBtn: boolean;
-  readonly showApproveWithMasterPasswordBtn: boolean;
-};
-
-type Data = NewUserData | ExistingUserUntrustedDeviceData;
-
 @Component({
   standalone: true,
   templateUrl: "./login-decryption-options.component.html",
@@ -73,17 +59,21 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private activeAccountId: UserId;
   private clientType: ClientType;
   private email: string;
+  private newUserOrgId: string;
 
-  protected data?: Data;
   protected loading = false;
+  protected showApproveFromOtherDeviceBtn: boolean;
+  protected showRequestAdminApprovalBtn: boolean;
+  protected showApproveWithMasterPasswordBtn: boolean;
   protected State = State;
+  protected state = State.NewUser;
 
   protected formGroup = this.formBuilder.group({
     // TODO-rr-bw: change to true by default after testing
     rememberDevice: [false], // Remember device means for the user to trust the device
   });
 
-  get rememberDeviceControl(): FormControl<boolean> {
+  private get rememberDeviceControl(): FormControl<boolean> {
     return this.formGroup.controls.rememberDevice;
   }
 
@@ -149,6 +139,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
          */
         await this.loadNewUserData();
       } else {
+        this.state = State.ExistingUserUntrustedDevice;
         this.loadUntrustedDeviceData(userDecryptionOptions);
       }
     } catch (err) {
@@ -198,31 +189,21 @@ export class LoginDecryptionOptionsComponent implements OnInit {
 
     const autoEnrollStatus = await firstValueFrom(autoEnrollStatus$);
 
-    this.data = {
-      state: State.NewUser,
-      organizationId: autoEnrollStatus.id,
-    };
+    this.newUserOrgId = autoEnrollStatus.id;
   }
 
   private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
-    const showApproveFromOtherDeviceBtn =
+    this.showApproveFromOtherDeviceBtn =
       userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
 
-    const showRequestAdminApprovalBtn =
+    this.showRequestAdminApprovalBtn =
       !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval || false;
 
-    const showApproveWithMasterPasswordBtn = userDecryptionOptions?.hasMasterPassword || false;
-
-    this.data = {
-      state: State.ExistingUserUntrustedDevice,
-      showApproveFromOtherDeviceBtn,
-      showRequestAdminApprovalBtn,
-      showApproveWithMasterPasswordBtn,
-    };
+    this.showApproveWithMasterPasswordBtn = userDecryptionOptions?.hasMasterPassword || false;
   }
 
   async createUser() {
-    if (this.data.state !== State.NewUser) {
+    if (this.state !== State.NewUser) {
       return;
     }
 
@@ -240,7 +221,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
         message: this.i18nService.t("accountSuccessfullyCreated"),
       });
 
-      await this.passwordResetEnrollmentService.enroll(this.data.organizationId);
+      await this.passwordResetEnrollmentService.enroll(this.newUserOrgId);
 
       if (this.formGroup.value.rememberDevice) {
         await this.deviceTrustService.trustDevice(this.activeAccountId);
@@ -265,7 +246,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   }
 
   protected async approveFromOtherDevice() {
-    if (this.data.state !== State.ExistingUserUntrustedDevice) {
+    if (this.state !== State.ExistingUserUntrustedDevice) {
       return;
     }
 

From 3e66a057225c2b5e9f6cfc194d0a815d1c9af356 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 2 Nov 2024 16:41:14 -0700
Subject: [PATCH 15/28] refactor properties

---
 .../login-decryption-options.component.html   |  6 ++---
 .../login-decryption-options.component.ts     | 25 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index 30ed294d84b..d326e1a1b13 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -26,7 +26,7 @@
 <ng-container *ngIf="state === State.ExistingUserUntrustedDevice">
   <div class="tw-grid tw-gap-3">
     <button
-      *ngIf="showApproveFromOtherDeviceBtn"
+      *ngIf="canApproveFromOtherDevice"
       type="button"
       bitButton
       block
@@ -39,7 +39,7 @@
     <div class="tw-text-center">{{ "or" | i18n }}</div>
 
     <button
-      *ngIf="showApproveWithMasterPasswordBtn"
+      *ngIf="canApproveWithMasterPassword"
       type="button"
       bitButton
       block
@@ -50,7 +50,7 @@
     </button>
 
     <button
-      *ngIf="showRequestAdminApprovalBtn"
+      *ngIf="canRequestAdminApproval"
       type="button"
       bitButton
       block
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index d9039c60202..9ae9f438efc 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -59,14 +59,10 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private activeAccountId: UserId;
   private clientType: ClientType;
   private email: string;
-  private newUserOrgId: string;
 
   protected loading = false;
-  protected showApproveFromOtherDeviceBtn: boolean;
-  protected showRequestAdminApprovalBtn: boolean;
-  protected showApproveWithMasterPasswordBtn: boolean;
-  protected State = State;
   protected state = State.NewUser;
+  protected State = State;
 
   protected formGroup = this.formBuilder.group({
     // TODO-rr-bw: change to true by default after testing
@@ -77,6 +73,14 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     return this.formGroup.controls.rememberDevice;
   }
 
+  // New User Properties
+  private newUserOrgId: string;
+
+  // Existing User Untrusted Device Properties
+  protected canApproveFromOtherDevice = false;
+  protected canRequestAdminApproval = false;
+  protected canApproveWithMasterPassword = false;
+
   constructor(
     private accountService: AccountService,
     private apiService: ApiService,
@@ -193,13 +197,10 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   }
 
   private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
-    this.showApproveFromOtherDeviceBtn =
-      userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
-
-    this.showRequestAdminApprovalBtn =
-      !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval || false;
-
-    this.showApproveWithMasterPasswordBtn = userDecryptionOptions?.hasMasterPassword || false;
+    this.canApproveFromOtherDevice =
+      !!userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice;
+    this.canRequestAdminApproval = !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval;
+    this.canApproveWithMasterPassword = !!userDecryptionOptions?.hasMasterPassword;
   }
 
   async createUser() {

From ff7fbc7e4775d440f41436c93d977f4b58b8f6f4 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 4 Nov 2024 12:14:39 -0800
Subject: [PATCH 16/28] small reformatting and cleanup

---
 .../login-decryption-options.component.ts     | 43 ++++++++-----------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 9ae9f438efc..47942b3c02d 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -143,8 +143,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
          */
         await this.loadNewUserData();
       } else {
-        this.state = State.ExistingUserUntrustedDevice;
-        this.loadUntrustedDeviceData(userDecryptionOptions);
+        this.handleExistingUserUntrustedDeviceData(userDecryptionOptions);
       }
     } catch (err) {
       this.validationService.showError(err);
@@ -196,11 +195,14 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.newUserOrgId = autoEnrollStatus.id;
   }
 
-  private loadUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
+  private handleExistingUserUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
+    this.state = State.ExistingUserUntrustedDevice;
+
     this.canApproveFromOtherDevice =
-      !!userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice;
-    this.canRequestAdminApproval = !!userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval;
-    this.canApproveWithMasterPassword = !!userDecryptionOptions?.hasMasterPassword;
+      userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
+    this.canRequestAdminApproval =
+      userDecryptionOptions?.trustedDeviceOption?.hasAdminApproval || false;
+    this.canApproveWithMasterPassword = userDecryptionOptions?.hasMasterPassword || false;
   }
 
   async createUser() {
@@ -208,9 +210,6 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       return;
     }
 
-    // this.loading to support clients without async-actions-support
-    this.loading = true;
-    // errors must be caught in child components to prevent navigation
     try {
       const { publicKey, privateKey } = await this.keyService.initAccount();
       const keysRequest = new KeysRequest(publicKey, privateKey.encryptedString);
@@ -229,28 +228,22 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       }
 
       await this.loginDecryptionOptionsService.handleCreateUserSuccess();
-    } catch (err) {
-      this.validationService.showError(err);
-    } finally {
-      this.loading = false;
-    }
 
-    if (this.clientType === ClientType.Desktop) {
-      this.messagingService.send("redrawMenu");
-    }
+      if (this.clientType === ClientType.Desktop) {
+        this.messagingService.send("redrawMenu");
+      }
 
-    if (this.clientType === ClientType.Browser) {
-      await this.router.navigate(["/tabs/vault"]);
-    } else {
-      await this.router.navigate(["/vault"]);
+      if (this.clientType === ClientType.Browser) {
+        await this.router.navigate(["/tabs/vault"]);
+      } else {
+        await this.router.navigate(["/vault"]);
+      }
+    } catch (err) {
+      this.validationService.showError(err);
     }
   }
 
   protected async approveFromOtherDevice() {
-    if (this.state !== State.ExistingUserUntrustedDevice) {
-      return;
-    }
-
     this.loginEmailService.setLoginEmail(this.email);
     await this.router.navigate(["/login-with-device"]);
   }

From 0ff51045e873aa229da5bfc3fd439bfbf185f396 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:56:05 -0800
Subject: [PATCH 17/28] add tests

---
 ...b-login-decryption-options.service.spec.ts | 41 +++++++++++++++++++
 .../web-login-decryption-options.service.ts   | 12 +++---
 ...t-login-decryption-options.service.spec.ts | 13 ++++++
 ...efault-login-decryption-options.service.ts |  4 +-
 .../login-decryption-options.service.ts       |  5 ++-
 5 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
 create mode 100644 libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
new file mode 100644
index 00000000000..82598e9d930
--- /dev/null
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
@@ -0,0 +1,41 @@
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+
+import { RouterService } from "../../../../core/router.service";
+import { AcceptOrganizationInviteService } from "../../../organization-invite/accept-organization.service";
+
+import { WebLoginDecryptionOptionsService } from "./web-login-decryption-options.service";
+
+describe("WebLoginDecryptionOptionsService", () => {
+  let service: WebLoginDecryptionOptionsService;
+
+  let routerService: MockProxy<RouterService>;
+  let acceptOrganizationInviteService: MockProxy<AcceptOrganizationInviteService>;
+  let validationService: MockProxy<ValidationService>;
+
+  beforeEach(() => {
+    routerService = mock<RouterService>();
+    acceptOrganizationInviteService = mock<AcceptOrganizationInviteService>();
+    validationService = mock<ValidationService>();
+
+    service = new WebLoginDecryptionOptionsService(
+      routerService,
+      acceptOrganizationInviteService,
+      validationService,
+    );
+  });
+
+  it("should instantiate the service", () => {
+    expect(service).not.toBeFalsy();
+  });
+
+  describe("handleCreateUserSuccess()", () => {
+    it("should clear the redirect URL and the org invite", async () => {
+      await service.handleCreateUserSuccess();
+
+      expect(routerService.getAndClearLoginRedirectUrl).toHaveBeenCalled();
+      expect(acceptOrganizationInviteService.clearOrganizationInvitation).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index 16950e383be..9b93960d8bb 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -1,5 +1,3 @@
-import { inject } from "@angular/core";
-
 import {
   LoginDecryptionOptionsService,
   DefaultLoginDecryptionOptionsService,
@@ -13,9 +11,13 @@ export class WebLoginDecryptionOptionsService
   extends DefaultLoginDecryptionOptionsService
   implements LoginDecryptionOptionsService
 {
-  protected routerService = inject(RouterService);
-  protected acceptOrganizationInviteService = inject(AcceptOrganizationInviteService);
-  protected validationService = inject(ValidationService);
+  constructor(
+    private routerService: RouterService,
+    private acceptOrganizationInviteService: AcceptOrganizationInviteService,
+    private validationService: ValidationService,
+  ) {
+    super();
+  }
 
   override async handleCreateUserSuccess(): Promise<void> {
     try {
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts
new file mode 100644
index 00000000000..ab199670dba
--- /dev/null
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts
@@ -0,0 +1,13 @@
+import { DefaultLoginDecryptionOptionsService } from "./default-login-decryption-options.service";
+
+describe("DefaultLoginDecryptionOptionsService", () => {
+  let service: DefaultLoginDecryptionOptionsService;
+
+  beforeEach(() => {
+    service = new DefaultLoginDecryptionOptionsService();
+  });
+
+  it("should instantiate the service", () => {
+    expect(service).not.toBeFalsy();
+  });
+});
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
index fa4453adb78..8e3c3f63650 100644
--- a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
@@ -1,7 +1,9 @@
 import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
 export class DefaultLoginDecryptionOptionsService implements LoginDecryptionOptionsService {
-  handleCreateUserSuccess(): Promise<void> {
+  constructor() {}
+
+  handleCreateUserSuccess(): Promise<void | null> {
     return null;
   }
 }
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
index 7b1a2b19401..3eb96470ed3 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
@@ -1,3 +1,6 @@
 export abstract class LoginDecryptionOptionsService {
-  abstract handleCreateUserSuccess(): Promise<void>;
+  /**
+   * Handles client-specific logic that runs after a user was successfully created
+   */
+  abstract handleCreateUserSuccess(): Promise<void | null>;
 }

From f72c2a026ab4ce63cec293b94dfd1f7bd40b6bcd Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:04:17 -0800
Subject: [PATCH 18/28] extract functions - handleMissingEmail and
 handleCreateUserSuccessNavigation

---
 .../web-login-decryption-options.service.ts   |  4 +-
 apps/web/src/app/core/core.module.ts          |  2 +-
 .../login-decryption-options.component.ts     | 40 ++++++++++++-------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index 9b93960d8bb..b5f70eb895b 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -2,7 +2,6 @@ import {
   LoginDecryptionOptionsService,
   DefaultLoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
-import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 
 import { RouterService } from "../../../../core/router.service";
 import { AcceptOrganizationInviteService } from "../../../organization-invite/accept-organization.service";
@@ -14,7 +13,6 @@ export class WebLoginDecryptionOptionsService
   constructor(
     private routerService: RouterService,
     private acceptOrganizationInviteService: AcceptOrganizationInviteService,
-    private validationService: ValidationService,
   ) {
     super();
   }
@@ -27,7 +25,7 @@ export class WebLoginDecryptionOptionsService
       await this.routerService.getAndClearLoginRedirectUrl();
       await this.acceptOrganizationInviteService.clearOrganizationInvitation();
     } catch (error) {
-      this.validationService.showError(error); // TODO-rr-bw: rethrow error?
+      throw new Error(error); // TODO-rr-bw: rethrow error instead of validation service?
     }
   }
 }
diff --git a/apps/web/src/app/core/core.module.ts b/apps/web/src/app/core/core.module.ts
index 5b14ccb0406..b64c93d8c1c 100644
--- a/apps/web/src/app/core/core.module.ts
+++ b/apps/web/src/app/core/core.module.ts
@@ -291,7 +291,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: LoginDecryptionOptionsService,
     useClass: WebLoginDecryptionOptionsService,
-    deps: [],
+    deps: [RouterService, AcceptOrganizationInviteService],
   }),
 ];
 
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 47942b3c02d..0c3fb84d44e 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -114,13 +114,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     );
 
     if (!this.email) {
-      this.toastService.showToast({
-        variant: "error",
-        title: null,
-        message: this.i18nService.t("userEmailMissing"),
-      });
-
-      await this.router.navigate(["/login"]);
+      await this.handleMissingEmail();
       return;
     }
 
@@ -143,7 +137,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
          */
         await this.loadNewUserData();
       } else {
-        this.handleExistingUserUntrustedDeviceData(userDecryptionOptions);
+        this.loadExistingUserUntrustedDeviceData(userDecryptionOptions);
       }
     } catch (err) {
       this.validationService.showError(err);
@@ -152,6 +146,16 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     }
   }
 
+  private async handleMissingEmail() {
+    this.toastService.showToast({
+      variant: "error",
+      title: null,
+      message: this.i18nService.t("userEmailMissing"),
+    });
+
+    await this.router.navigate(["/login"]);
+  }
+
   private observeAndPersistRememberDeviceValueChanges() {
     this.rememberDeviceControl.valueChanges
       .pipe(
@@ -174,6 +178,8 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   }
 
   private async loadNewUserData() {
+    this.state = State.NewUser;
+
     const autoEnrollStatus$ = defer(() =>
       this.ssoLoginService.getActiveUserOrganizationSsoIdentifier(),
     ).pipe(
@@ -195,7 +201,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.newUserOrgId = autoEnrollStatus.id;
   }
 
-  private handleExistingUserUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
+  private loadExistingUserUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
     this.state = State.ExistingUserUntrustedDevice;
 
     this.canApproveFromOtherDevice =
@@ -205,7 +211,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.canApproveWithMasterPassword = userDecryptionOptions?.hasMasterPassword || false;
   }
 
-  async createUser() {
+  protected async createUser() {
     if (this.state !== State.NewUser) {
       return;
     }
@@ -233,16 +239,20 @@ export class LoginDecryptionOptionsComponent implements OnInit {
         this.messagingService.send("redrawMenu");
       }
 
-      if (this.clientType === ClientType.Browser) {
-        await this.router.navigate(["/tabs/vault"]);
-      } else {
-        await this.router.navigate(["/vault"]);
-      }
+      await this.handleCreateUserSuccessNavigation();
     } catch (err) {
       this.validationService.showError(err);
     }
   }
 
+  private async handleCreateUserSuccessNavigation() {
+    if (this.clientType === ClientType.Browser) {
+      await this.router.navigate(["/tabs/vault"]);
+    } else {
+      await this.router.navigate(["/vault"]);
+    }
+  }
+
   protected async approveFromOtherDevice() {
     this.loginEmailService.setLoginEmail(this.email);
     await this.router.navigate(["/login-with-device"]);

From ac97fae036d2880f24434a30a53b032176907e98 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:42:58 -0800
Subject: [PATCH 19/28] update AnonLayout properties via
 AnonLayoutWrapperDataService

---
 apps/browser/src/_locales/en/messages.json    |  6 +++++
 apps/desktop/src/locales/en/messages.json     |  6 +++++
 apps/web/src/app/oss-routing.module.ts        | 10 +-------
 apps/web/src/locales/en/messages.json         |  3 +++
 .../login-decryption-options.component.ts     | 23 ++++++++++++++++++-
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 330fa66af05..e394774848d 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3237,6 +3237,9 @@
   "opensInANewWindow": {
     "message": "Opens in a new window"
   },
+  "rememberThisDeviceToMakeFutureLoginsSeamless": {
+    "message": "Remember this device to make future logins seamless"
+  },
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
@@ -3755,6 +3758,9 @@
   "accessing": {
     "message": "Accessing"
   },
+  "loggedInExclamation": {
+    "message": "Logged in!"
+  },
   "passkeyNotCopied": {
     "message": "Passkey will not be copied"
   },
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index f081632a6f7..78471cacc4a 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2746,6 +2746,9 @@
   "checkForBreaches": {
     "message": "Check known data breaches for this password"
   },
+  "loggedInExclamation": {
+    "message": "Logged in!"
+  },
   "important": {
     "message": "Important:"
   },
@@ -2776,6 +2779,9 @@
   "windowsBiometricUpdateWarningTitle": {
     "message": "Recommended Settings Update"
   },
+  "rememberThisDeviceToMakeFutureLoginsSeamless": {
+    "message": "Remember this device to make future logins seamless"
+  },
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 5de7ec49803..3e5b47f94d8 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -232,15 +232,7 @@ const routes: Routes = [
     {
       path: "login-initiated",
       canActivate: [tdeDecryptionRequiredGuard()],
-      data: {
-        pageTitle: {
-          key: "deviceApprovalRequiredV2",
-        },
-        pageSubtitle: {
-          key: "selectAnApprovalOptionBelow",
-        },
-        titleId: "deviceApprovalRequiredV2",
-      },
+      data: {},
       children: [{ path: "", component: LoginDecryptionOptionsComponent }],
     },
   ),
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 76af7dd6d18..a26171d75bb 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -7958,6 +7958,9 @@
   "loginInitiated": {
     "message": "Login initiated"
   },
+  "rememberThisDeviceToMakeFutureLoginsSeamless": {
+    "message": "Remember this device to make future logins seamless"
+  },
   "deviceApprovalRequired": {
     "message": "Device approval required. Select an approval option below:"
   },
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 0c3fb84d44e..c0d1a4f38d5 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -34,6 +34,8 @@ import {
 } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
+import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
+
 import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
 enum State {
@@ -61,7 +63,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private email: string;
 
   protected loading = false;
-  protected state = State.NewUser;
+  protected state: State;
   protected State = State;
 
   protected formGroup = this.formBuilder.group({
@@ -83,6 +85,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
 
   constructor(
     private accountService: AccountService,
+    private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
     private apiService: ApiService,
     private destroyRef: DestroyRef,
     private deviceTrustService: DeviceTrustServiceAbstraction,
@@ -180,6 +183,15 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private async loadNewUserData() {
     this.state = State.NewUser;
 
+    this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
+      pageTitle: {
+        key: "loggedInExclamation",
+      },
+      pageSubtitle: {
+        key: "rememberThisDeviceToMakeFutureLoginsSeamless",
+      },
+    });
+
     const autoEnrollStatus$ = defer(() =>
       this.ssoLoginService.getActiveUserOrganizationSsoIdentifier(),
     ).pipe(
@@ -204,6 +216,15 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   private loadExistingUserUntrustedDeviceData(userDecryptionOptions: UserDecryptionOptions) {
     this.state = State.ExistingUserUntrustedDevice;
 
+    this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
+      pageTitle: {
+        key: "deviceApprovalRequiredV2",
+      },
+      pageSubtitle: {
+        key: "selectAnApprovalOptionBelow",
+      },
+    });
+
     this.canApproveFromOtherDevice =
       userDecryptionOptions?.trustedDeviceOption?.hasLoginApprovingDevice || false;
     this.canRequestAdminApproval =

From 14ffc1f6bd93f87b01ea0ef2bfd2c8e8e3824158 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:50:35 -0800
Subject: [PATCH 20/28] add devices icon

---
 apps/web/src/app/oss-routing.module.ts      |  5 +-
 libs/auth/src/angular/icons/devices.icon.ts | 52 +++++++++++++++++++++
 libs/auth/src/angular/icons/index.ts        |  1 +
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 libs/auth/src/angular/icons/devices.icon.ts

diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 3e5b47f94d8..c799e727867 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -32,6 +32,7 @@ import {
   RegistrationExpiredLinkIcon,
   VaultIcon,
   LoginDecryptionOptionsComponent,
+  DevicesIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -232,7 +233,9 @@ const routes: Routes = [
     {
       path: "login-initiated",
       canActivate: [tdeDecryptionRequiredGuard()],
-      data: {},
+      data: {
+        pageIcon: DevicesIcon,
+      },
       children: [{ path: "", component: LoginDecryptionOptionsComponent }],
     },
   ),
diff --git a/libs/auth/src/angular/icons/devices.icon.ts b/libs/auth/src/angular/icons/devices.icon.ts
new file mode 100644
index 00000000000..54acea5b087
--- /dev/null
+++ b/libs/auth/src/angular/icons/devices.icon.ts
@@ -0,0 +1,52 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const DevicesIcon = svgIcon`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
+    <path
+      class="tw-fill-art-primary"
+      fill-rule="evenodd"
+      d="M41.212 87.309c0-.335.271-.606.606-.606H76.97a.606.606 0 0 1 0 1.212H41.818a.606.606 0 0 1-.606-.606Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-primary"
+      fill-rule="evenodd"
+      d="M53.176 87.31V76.542h1.212V87.31h-1.212Zm12.103 0V76.542h1.212V87.31h-1.212Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-primary"
+      fill-rule="evenodd"
+      d="M16.363 29.733a8.485 8.485 0 0 1 8.485-8.485h70.303a8.485 8.485 0 0 1 8.485 8.485v3.637h-2.424v-3.637a6.06 6.06 0 0 0-6.06-6.06H24.847a6.06 6.06 0 0 0-6.06 6.06v9.697h-2.425v-9.697Zm9.091 44.849H76.97v2.424H25.454v-2.424Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-accent"
+      fill-rule="evenodd"
+      d="M21.212 30.34c0-2.344 1.9-4.243 4.242-4.243h69.091c2.343 0 4.243 1.9 4.243 4.242v3.03h-1.212v-3.03a3.03 3.03 0 0 0-3.03-3.03H25.453a3.03 3.03 0 0 0-3.03 3.03v9.091h-1.212v-9.09Zm4.242 40.605H76.97v1.212H25.454v-1.212Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-primary"
+      fill-rule="evenodd"
+      d="M75.758 38.218a6.06 6.06 0 0 1 6.06-6.06h32.122a6.06 6.06 0 0 1 6.06 6.06v48.485a6.06 6.06 0 0 1-6.06 6.06H81.818a6.06 6.06 0 0 1-6.06-6.06V38.218Zm6.06-3.636a3.636 3.636 0 0 0-3.636 3.636v48.485a3.636 3.636 0 0 0 3.636 3.636h32.122a3.636 3.636 0 0 0 3.636-3.636V38.218a3.636 3.636 0 0 0-3.636-3.636H81.818Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-accent"
+      d="M99.394 87.31a1.212 1.212 0 1 1-2.424 0 1.212 1.212 0 0 1 2.424 0Z"
+    />
+    <path
+      class="tw-fill-art-primary"
+      fill-rule="evenodd"
+      d="M20.606 40.642H6.061a3.636 3.636 0 0 0-3.637 3.636V80.64a3.636 3.636 0 0 0 3.637 3.637h14.545a3.636 3.636 0 0 0 3.636-3.637V44.278a3.636 3.636 0 0 0-3.636-3.636ZM6.061 38.217A6.06 6.06 0 0 0 0 44.277v36.364a6.06 6.06 0 0 0 6.06 6.061h14.546a6.06 6.06 0 0 0 6.06-6.06V44.277a6.06 6.06 0 0 0-6.06-6.06H6.061Z"
+      clip-rule="evenodd"
+    />
+    <path
+      class="tw-fill-art-accent"
+      fill-rule="evenodd"
+      d="M12.345 43.556c0-.334.272-.606.606-.606h.753a.606.606 0 1 1 0 1.212h-.753a.606.606 0 0 1-.606-.606Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+`;
diff --git a/libs/auth/src/angular/icons/index.ts b/libs/auth/src/angular/icons/index.ts
index 70460a7aea4..9c444df5702 100644
--- a/libs/auth/src/angular/icons/index.ts
+++ b/libs/auth/src/angular/icons/index.ts
@@ -1,5 +1,6 @@
 export * from "./bitwarden-logo.icon";
 export * from "./bitwarden-shield.icon";
+export * from "./devices.icon";
 export * from "./lock.icon";
 export * from "./registration-check-email.icon";
 export * from "./user-lock.icon";

From c1a6655e23a8bce928200f90999bf53928d6524b Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:55:32 -0800
Subject: [PATCH 21/28] remove TODO comments

---
 .../web-login-decryption-options.service.ts                    | 2 +-
 .../login-decryption-options.component.ts                      | 3 +--
 libs/common/src/enums/feature-flag.enum.ts                     | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index b5f70eb895b..a4f3dd03eb5 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -25,7 +25,7 @@ export class WebLoginDecryptionOptionsService
       await this.routerService.getAndClearLoginRedirectUrl();
       await this.acceptOrganizationInviteService.clearOrganizationInvitation();
     } catch (error) {
-      throw new Error(error); // TODO-rr-bw: rethrow error instead of validation service?
+      throw new Error(error);
     }
   }
 }
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index c0d1a4f38d5..04399c44290 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -67,8 +67,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
   protected State = State;
 
   protected formGroup = this.formBuilder.group({
-    // TODO-rr-bw: change to true by default after testing
-    rememberDevice: [false], // Remember device means for the user to trust the device
+    rememberDevice: [true], // Remember device means for the user to trust the device
   });
 
   private get rememberDeviceControl(): FormControl<boolean> {
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index b712981a487..ea016e34350 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -66,7 +66,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.ProviderClientVaultPrivacyBanner]: FALSE,
   [FeatureFlag.VaultBulkManagementAction]: FALSE,
   [FeatureFlag.IdpAutoSubmitLogin]: FALSE,
-  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: true,
+  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: FALSE,
   [FeatureFlag.EnableUpgradePasswordManagerSub]: FALSE,
   [FeatureFlag.GenerateIdentityFillScriptRefactor]: FALSE,
   [FeatureFlag.EnableNewCardCombinedExpiryAutofill]: FALSE,

From e94bffd2d1d92c790ef40d0b8dc09c645875c5ce Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:18:28 -0800
Subject: [PATCH 22/28] update logic for when the 'or' text is shown

---
 .../login-decryption-options.component.html   | 19 ++++++++-----------
 .../login-decryption-options.component.ts     |  4 ++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index d326e1a1b13..cb340f646f1 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -25,18 +25,15 @@
 
 <ng-container *ngIf="state === State.ExistingUserUntrustedDevice">
   <div class="tw-grid tw-gap-3">
-    <button
-      *ngIf="canApproveFromOtherDevice"
-      type="button"
-      bitButton
-      block
-      buttonType="primary"
-      (click)="approveFromOtherDevice()"
-    >
-      {{ "approveFromYourOtherDevice" | i18n }}
-    </button>
+    <ng-container *ngIf="canApproveFromOtherDevice">
+      <button type="button" bitButton block buttonType="primary" (click)="approveFromOtherDevice()">
+        {{ "approveFromYourOtherDevice" | i18n }}
+      </button>
 
-    <div class="tw-text-center">{{ "or" | i18n }}</div>
+      <div *ngIf="canApproveWithMasterPassword || canRequestAdminApproval" class="tw-text-center">
+        {{ "or" | i18n }}
+      </div>
+    </ng-container>
 
     <button
       *ngIf="canApproveWithMasterPassword"
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 04399c44290..6629ffd79b5 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -231,7 +231,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.canApproveWithMasterPassword = userDecryptionOptions?.hasMasterPassword || false;
   }
 
-  protected async createUser() {
+  protected createUser = async () => {
     if (this.state !== State.NewUser) {
       return;
     }
@@ -263,7 +263,7 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     } catch (err) {
       this.validationService.showError(err);
     }
-  }
+  };
 
   private async handleCreateUserSuccessNavigation() {
     if (this.clientType === ClientType.Browser) {

From aab0f60c491425485a9359d01ed29b3cad4a3ed6 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:35:05 -0800
Subject: [PATCH 23/28] better handling of missing email case

---
 ...ension-login-decryption-options.service.ts | 37 +++++++++++++++++++
 .../src/popup/services/services.module.ts     |  8 ++++
 .../web-login-decryption-options.service.ts   |  4 +-
 apps/web/src/app/core/core.module.ts          |  3 +-
 .../src/services/jslib-services.module.ts     |  2 +-
 ...efault-login-decryption-options.service.ts |  8 +++-
 .../login-decryption-options.component.ts     |  7 +++-
 .../login-decryption-options.service.ts       |  4 ++
 8 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.ts

diff --git a/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.ts b/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.ts
new file mode 100644
index 00000000000..ea529e277e6
--- /dev/null
+++ b/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.ts
@@ -0,0 +1,37 @@
+import { Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import {
+  DefaultLoginDecryptionOptionsService,
+  LoginDecryptionOptionsService,
+} from "@bitwarden/auth/angular";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
+import { postLogoutMessageListener$ } from "../utils/post-logout-message-listener";
+
+export class ExtensionLoginDecryptionOptionsService
+  extends DefaultLoginDecryptionOptionsService
+  implements LoginDecryptionOptionsService
+{
+  constructor(
+    protected messagingService: MessagingService,
+    private router: Router,
+  ) {
+    super(messagingService);
+  }
+
+  override async logOut(): Promise<void> {
+    // start listening for "switchAccountFinish" or "doneLoggingOut"
+    const messagePromise = firstValueFrom(postLogoutMessageListener$);
+
+    super.logOut();
+
+    // wait for messages
+    const command = await messagePromise;
+
+    // doneLoggingOut already has a message handler that will navigate us
+    if (command === "switchAccountFinish") {
+      await this.router.navigate(["/"]);
+    }
+  }
+}
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index 919cf8c0b19..d24e4dd54b5 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -1,4 +1,5 @@
 import { APP_INITIALIZER, NgModule, NgZone } from "@angular/core";
+import { Router } from "@angular/router";
 import { Subject, merge, of } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
@@ -22,6 +23,7 @@ import {
   AnonLayoutWrapperDataService,
   LoginComponentService,
   LockComponentService,
+  LoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
 import { LockService, LoginEmailService, PinServiceAbstraction } from "@bitwarden/auth/common";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -111,6 +113,7 @@ import { PasswordRepromptService } from "@bitwarden/vault";
 import { ForegroundLockService } from "../../auth/popup/accounts/foreground-lock.service";
 import { ExtensionAnonLayoutWrapperDataService } from "../../auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service";
 import { ExtensionLoginComponentService } from "../../auth/popup/login/extension-login-component.service";
+import { ExtensionLoginDecryptionOptionsService } from "../../auth/popup/login-decryption-options/extension-login-decryption-options.service";
 import { AutofillService as AutofillServiceAbstraction } from "../../autofill/services/abstractions/autofill.service";
 import AutofillService from "../../autofill/services/autofill.service";
 import { InlineMenuFieldQualificationService } from "../../autofill/services/inline-menu-field-qualification.service";
@@ -581,6 +584,11 @@ const safeProviders: SafeProvider[] = [
     useClass: ExtensionAnonLayoutWrapperDataService,
     deps: [],
   }),
+  safeProvider({
+    provide: LoginDecryptionOptionsService,
+    useClass: ExtensionLoginDecryptionOptionsService,
+    deps: [MessagingServiceAbstraction, Router],
+  }),
 ];
 
 @NgModule({
diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
index a4f3dd03eb5..30654decdc3 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.ts
@@ -2,6 +2,7 @@ import {
   LoginDecryptionOptionsService,
   DefaultLoginDecryptionOptionsService,
 } from "@bitwarden/auth/angular";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 
 import { RouterService } from "../../../../core/router.service";
 import { AcceptOrganizationInviteService } from "../../../organization-invite/accept-organization.service";
@@ -11,10 +12,11 @@ export class WebLoginDecryptionOptionsService
   implements LoginDecryptionOptionsService
 {
   constructor(
+    protected messagingService: MessagingService,
     private routerService: RouterService,
     private acceptOrganizationInviteService: AcceptOrganizationInviteService,
   ) {
-    super();
+    super(messagingService);
   }
 
   override async handleCreateUserSuccess(): Promise<void> {
diff --git a/apps/web/src/app/core/core.module.ts b/apps/web/src/app/core/core.module.ts
index b64c93d8c1c..0cc730b5744 100644
--- a/apps/web/src/app/core/core.module.ts
+++ b/apps/web/src/app/core/core.module.ts
@@ -61,6 +61,7 @@ import {
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sdk-client-factory";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
@@ -291,7 +292,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: LoginDecryptionOptionsService,
     useClass: WebLoginDecryptionOptionsService,
-    deps: [RouterService, AcceptOrganizationInviteService],
+    deps: [MessagingService, RouterService, AcceptOrganizationInviteService],
   }),
 ];
 
diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts
index a20eddf0b3d..bd08398ba45 100644
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@@ -1382,7 +1382,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: LoginDecryptionOptionsService,
     useClass: DefaultLoginDecryptionOptionsService,
-    deps: [],
+    deps: [MessagingServiceAbstraction],
   }),
 ];
 
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
index 8e3c3f63650..17ea0bc9653 100644
--- a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.ts
@@ -1,9 +1,15 @@
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
 import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
 export class DefaultLoginDecryptionOptionsService implements LoginDecryptionOptionsService {
-  constructor() {}
+  constructor(protected messagingService: MessagingService) {}
 
   handleCreateUserSuccess(): Promise<void | null> {
     return null;
   }
+
+  async logOut(): Promise<void> {
+    this.messagingService.send("logout");
+  }
 }
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 6629ffd79b5..0c6c9679e04 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -155,7 +155,12 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       message: this.i18nService.t("userEmailMissing"),
     });
 
-    await this.router.navigate(["/login"]);
+    this.loading = true;
+
+    // We can't simply redirect to `/login` because the user is authed and the unauthGuard
+    // will prevent navigation. We must logout the user first via messagingService, which
+    // redirects to `/`, which will be handled by the redirectGuard to navigate the user appropriately.
+    await this.loginDecryptionOptionsService.logOut();
   }
 
   private observeAndPersistRememberDeviceValueChanges() {
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
index 3eb96470ed3..d81d56d6393 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.service.ts
@@ -3,4 +3,8 @@ export abstract class LoginDecryptionOptionsService {
    * Handles client-specific logic that runs after a user was successfully created
    */
   abstract handleCreateUserSuccess(): Promise<void | null>;
+  /**
+   * Logs the user out
+   */
+  abstract logOut(): Promise<void>;
 }

From 224b1d896c4e91c703dacb85ccee822e8c17f3c9 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 20 Nov 2024 09:31:23 -0800
Subject: [PATCH 24/28] add setTimeout to missingEmail handler to give user
 time to see toast before process reload

---
 apps/browser/src/popup/app-routing.module.ts        |  9 ++-------
 apps/desktop/src/app/app-routing.module.ts          |  9 ++-------
 .../login-decryption-options.component.ts           | 13 +++++++------
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index a73dac00e9e..dcc7ef8b707 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -36,6 +36,7 @@ import {
   UserLockIcon,
   VaultIcon,
   LoginDecryptionOptionsComponent,
+  DevicesIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -496,13 +497,7 @@ const routes: Routes = [
       path: "login-initiated",
       canActivate: [tdeDecryptionRequiredGuard()],
       data: {
-        pageTitle: {
-          key: "deviceApprovalRequiredV2",
-        },
-        pageSubtitle: {
-          key: "selectAnApprovalOptionBelow",
-        },
-        titleId: "deviceApprovalRequiredV2",
+        pageIcon: DevicesIcon,
       },
       children: [{ path: "", component: LoginDecryptionOptionsComponent }],
     },
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index 4d9ee1d69dc..6fddf9561e9 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -33,6 +33,7 @@ import {
   UserLockIcon,
   VaultIcon,
   LoginDecryptionOptionsComponent,
+  DevicesIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -207,13 +208,7 @@ const routes: Routes = [
       path: "login-initiated",
       canActivate: [tdeDecryptionRequiredGuard()],
       data: {
-        pageTitle: {
-          key: "deviceApprovalRequiredV2",
-        },
-        pageSubtitle: {
-          key: "selectAnApprovalOptionBelow",
-        },
-        titleId: "deviceApprovalRequiredV2",
+        pageIcon: DevicesIcon,
       },
       children: [{ path: "", component: LoginDecryptionOptionsComponent }],
     },
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 0c6c9679e04..2df1b24770f 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -155,12 +155,13 @@ export class LoginDecryptionOptionsComponent implements OnInit {
       message: this.i18nService.t("userEmailMissing"),
     });
 
-    this.loading = true;
-
-    // We can't simply redirect to `/login` because the user is authed and the unauthGuard
-    // will prevent navigation. We must logout the user first via messagingService, which
-    // redirects to `/`, which will be handled by the redirectGuard to navigate the user appropriately.
-    await this.loginDecryptionOptionsService.logOut();
+    setTimeout(async () => {
+      // We can't simply redirect to `/login` because the user is authed and the unauthGuard
+      // will prevent navigation. We must logout the user first via messagingService, which
+      // redirects to `/`, which will be handled by the redirectGuard to navigate the user appropriately.
+      // The timeout gives the user a chance to see the error toast before process reload kicks on logout.
+      await this.loginDecryptionOptionsService.logOut();
+    }, 5000);
   }
 
   private observeAndPersistRememberDeviceValueChanges() {

From 8edea2ab39f2a2ad32fb13c211f4f1c07ee1b938 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:31:00 -0800
Subject: [PATCH 25/28] update error message

---
 apps/browser/src/_locales/en/messages.json                  | 3 +++
 apps/desktop/src/locales/en/messages.json                   | 3 +++
 apps/web/src/locales/en/messages.json                       | 3 +++
 .../login-decryption-options.component.ts                   | 6 +++---
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index adff28d6e4b..22a12e18f81 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3334,6 +3334,9 @@
   "userEmailMissing": {
     "message": "User email missing"
   },
+  "activeUserEmailNotFoundLoggingYouOut": {
+    "message": "Active user email not found. Logging you out."
+  },
   "deviceTrusted": {
     "message": "Device trusted"
   },
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 2da9f5e29ae..6b765225a75 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2894,6 +2894,9 @@
   "userEmailMissing": {
     "message": "User email missing"
   },
+  "activeUserEmailNotFoundLoggingYouOut": {
+    "message": "Active user email not found. Logging you out."
+  },
   "deviceTrusted": {
     "message": "Device trusted"
   },
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 7b60186ecb8..7bce43fb736 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8251,6 +8251,9 @@
   "userEmailMissing": {
     "message": "User email missing"
   },
+  "activeUserEmailNotFoundLoggingYouOut": {
+    "message": "Active user email not found. Logging you out."
+  },
   "deviceTrusted": {
     "message": "Device trusted"
   },
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 2df1b24770f..38771f9dada 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -152,14 +152,14 @@ export class LoginDecryptionOptionsComponent implements OnInit {
     this.toastService.showToast({
       variant: "error",
       title: null,
-      message: this.i18nService.t("userEmailMissing"),
+      message: this.i18nService.t("activeUserEmailNotFoundLoggingYouOut"),
     });
 
     setTimeout(async () => {
       // We can't simply redirect to `/login` because the user is authed and the unauthGuard
       // will prevent navigation. We must logout the user first via messagingService, which
-      // redirects to `/`, which will be handled by the redirectGuard to navigate the user appropriately.
-      // The timeout gives the user a chance to see the error toast before process reload kicks on logout.
+      // redirects to `/`, which will be handled by the redirectGuard to navigate the user to `/login`.
+      // The timeout just gives the user a chance to see the error toast before process reload runs on logout.
       await this.loginDecryptionOptionsService.logOut();
     }, 5000);
   }

From 2356f6f8b266e0a850399af309c694efbdecbfcb Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:43:44 -0800
Subject: [PATCH 26/28] remove duplicate icon imports

---
 apps/browser/src/popup/app-routing.module.ts | 1 -
 apps/desktop/src/app/app-routing.module.ts   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 7166522eff0..5e6f38e80b0 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -21,7 +21,6 @@ import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
-  DevicesIcon,
   LoginComponent,
   LoginSecondaryContentComponent,
   LockIcon,
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index c08c95cf1b8..e61335859c4 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -18,7 +18,6 @@ import { extensionRefreshRedirect } from "@bitwarden/angular/utils/extension-ref
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
-  DevicesIcon,
   LoginComponent,
   LoginSecondaryContentComponent,
   LockIcon,

From 58f6243e957d80d2b15f2b9c9cb42a5eeeb76b27 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:29:37 -0800
Subject: [PATCH 27/28] update tests for default service

---
 ...b-login-decryption-options.service.spec.ts |  8 +++---
 ...t-login-decryption-options.service.spec.ts | 26 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
index 82598e9d930..31df33a6ece 100644
--- a/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
+++ b/apps/web/src/app/auth/core/services/login-decryption-options/web-login-decryption-options.service.spec.ts
@@ -1,6 +1,6 @@
 import { MockProxy, mock } from "jest-mock-extended";
 
-import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 
 import { RouterService } from "../../../../core/router.service";
 import { AcceptOrganizationInviteService } from "../../../organization-invite/accept-organization.service";
@@ -10,19 +10,19 @@ import { WebLoginDecryptionOptionsService } from "./web-login-decryption-options
 describe("WebLoginDecryptionOptionsService", () => {
   let service: WebLoginDecryptionOptionsService;
 
+  let messagingService: MockProxy<MessagingService>;
   let routerService: MockProxy<RouterService>;
   let acceptOrganizationInviteService: MockProxy<AcceptOrganizationInviteService>;
-  let validationService: MockProxy<ValidationService>;
 
   beforeEach(() => {
+    messagingService = mock<MessagingService>();
     routerService = mock<RouterService>();
     acceptOrganizationInviteService = mock<AcceptOrganizationInviteService>();
-    validationService = mock<ValidationService>();
 
     service = new WebLoginDecryptionOptionsService(
+      messagingService,
       routerService,
       acceptOrganizationInviteService,
-      validationService,
     );
   });
 
diff --git a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts
index ab199670dba..735b7667540 100644
--- a/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts
+++ b/libs/auth/src/angular/login-decryption-options/default-login-decryption-options.service.spec.ts
@@ -1,13 +1,37 @@
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
 import { DefaultLoginDecryptionOptionsService } from "./default-login-decryption-options.service";
 
 describe("DefaultLoginDecryptionOptionsService", () => {
   let service: DefaultLoginDecryptionOptionsService;
 
+  let messagingService: MockProxy<MessagingService>;
+
   beforeEach(() => {
-    service = new DefaultLoginDecryptionOptionsService();
+    messagingService = mock<MessagingService>();
+
+    service = new DefaultLoginDecryptionOptionsService(messagingService);
   });
 
   it("should instantiate the service", () => {
     expect(service).not.toBeFalsy();
   });
+
+  describe("handleCreateUserSuccess()", () => {
+    it("should return null", async () => {
+      const result = await service.handleCreateUserSuccess();
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("logOut()", () => {
+    it("should send a logout message", async () => {
+      await service.logOut();
+
+      expect(messagingService.send).toHaveBeenCalledWith("logout");
+    });
+  });
 });

From 7e73fe35325875b64462eac77fef8295064fc9be Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 20 Nov 2024 21:25:08 -0800
Subject: [PATCH 28/28] add tests for extension service

---
 ...n-login-decryption-options.service.spec.ts | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.spec.ts

diff --git a/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.spec.ts b/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.spec.ts
new file mode 100644
index 00000000000..8f3199cdfce
--- /dev/null
+++ b/apps/browser/src/auth/popup/login-decryption-options/extension-login-decryption-options.service.spec.ts
@@ -0,0 +1,64 @@
+import { Router } from "@angular/router";
+import { MockProxy, mock } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
+import { postLogoutMessageListener$ } from "../utils/post-logout-message-listener";
+
+import { ExtensionLoginDecryptionOptionsService } from "./extension-login-decryption-options.service";
+
+// Mock the module providing postLogoutMessageListener$
+jest.mock("../utils/post-logout-message-listener", () => {
+  return {
+    postLogoutMessageListener$: new BehaviorSubject<string>(""), // Replace with mock subject
+  };
+});
+
+describe("ExtensionLoginDecryptionOptionsService", () => {
+  let service: ExtensionLoginDecryptionOptionsService;
+
+  let messagingService: MockProxy<MessagingService>;
+  let router: MockProxy<Router>;
+  let postLogoutMessageSubject: BehaviorSubject<string>;
+
+  beforeEach(() => {
+    messagingService = mock<MessagingService>();
+    router = mock<Router>();
+
+    // Cast postLogoutMessageListener$ to BehaviorSubject for dynamic control
+    postLogoutMessageSubject = postLogoutMessageListener$ as BehaviorSubject<string>;
+
+    service = new ExtensionLoginDecryptionOptionsService(messagingService, router);
+  });
+
+  it("should instantiate the service", () => {
+    expect(service).not.toBeFalsy();
+  });
+
+  describe("logOut()", () => {
+    it("should send a logout message", async () => {
+      postLogoutMessageSubject.next("switchAccountFinish");
+
+      await service.logOut();
+
+      expect(messagingService.send).toHaveBeenCalledWith("logout");
+    });
+
+    it("should navigate to root on 'switchAccountFinish'", async () => {
+      postLogoutMessageSubject.next("switchAccountFinish");
+
+      await service.logOut();
+
+      expect(router.navigate).toHaveBeenCalledWith(["/"]);
+    });
+
+    it("should not navigate for 'doneLoggingOut'", async () => {
+      postLogoutMessageSubject.next("doneLoggingOut");
+
+      await service.logOut();
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+});