PM-1049 - LoginDecryptionOptions - (1) Wire up loading logic (2) Retrieve User Acct Decryption options to determine whether or not to show request admin approval btn and approve w/ MP (3) Write up future logic for requestAdminApproval (4) approveWithMasterPassword takes you to the lock screen to login.

apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.ts

@@ -1,15 +1,22 @@
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
+import { Router } from "@angular/router";
 
 import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
 import { DevicesApiServiceAbstraction } from "@bitwarden/common/abstractions/devices/devices-api.service.abstraction";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
 @Component({
   selector: "browser-login-decryption-options",
   templateUrl: "login-decryption-options.component.html",
 })
 export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
-  constructor(formBuilder: FormBuilder, devicesApiService: DevicesApiServiceAbstraction) {
+  constructor(
-    super(formBuilder, devicesApiService);
+    formBuilder: FormBuilder,
+    devicesApiService: DevicesApiServiceAbstraction,
+    stateService: StateService,
+    router: Router
+  ) {
+    super(formBuilder, devicesApiService, stateService, router);
   }
 }

apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.ts

@@ -1,15 +1,22 @@
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
+import { Router } from "@angular/router";
 
 import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
 import { DevicesApiServiceAbstraction } from "@bitwarden/common/abstractions/devices/devices-api.service.abstraction";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
 @Component({
   selector: "desktop-login-decryption-options",
   templateUrl: "login-decryption-options.component.html",
 })
 export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
-  constructor(formBuilder: FormBuilder, devicesApiService: DevicesApiServiceAbstraction) {
+  constructor(
-    super(formBuilder, devicesApiService);
+    formBuilder: FormBuilder,
+    devicesApiService: DevicesApiServiceAbstraction,
+    stateService: StateService,
+    router: Router
+  ) {
+    super(formBuilder, devicesApiService, stateService, router);
   }
 }

apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html

@@ -1,3 +1,12 @@
+<ng-container *ngIf="loading">
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+
 <div class="tw-container tw-mx-auto">
   <div
     class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
@@ -23,6 +32,7 @@
 
       <div class="tw-flex tw-flex-col">
         <button
+          *ngIf="showApproveFromOtherDeviceBtn"
           bitButton
           type="button"
           buttonType="primary"
@@ -34,6 +44,7 @@
         </button>
 
         <button
+          *ngIf="showReqAdminApprovalBtn"
           bitButton
           type="button"
           buttonType="secondary"
@@ -44,6 +55,8 @@
         </button>
 
         <button
+          *ngIf="showApproveWithMasterPasswordBtn"
+          (click)="approveWithMasterPassword()"
           bitButton
           type="button"
           buttonType="secondary"

apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.ts

@@ -1,14 +1,21 @@
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
+import { Router } from "@angular/router";
 
 import { BaseLoginDecryptionOptionsComponent } from "@bitwarden/angular/auth/components/base-login-decryption-options.component";
 import { DevicesApiServiceAbstraction } from "@bitwarden/common/abstractions/devices/devices-api.service.abstraction";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 @Component({
   selector: "web-login-decryption-options",
   templateUrl: "login-decryption-options.component.html",
 })
 export class LoginDecryptionOptionsComponent extends BaseLoginDecryptionOptionsComponent {
-  constructor(formBuilder: FormBuilder, devicesApiService: DevicesApiServiceAbstraction) {
+  constructor(
-    super(formBuilder, devicesApiService);
+    formBuilder: FormBuilder,
+    devicesApiService: DevicesApiServiceAbstraction,
+    stateService: StateService,
+    router: Router
+  ) {
+    super(formBuilder, devicesApiService, stateService, router);
   }
 }

libs/angular/src/auth/components/base-login-decryption-options.component.ts

@@ -1,10 +1,12 @@
 import { Directive, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
+import { Router } from "@angular/router";
 import { Subject } from "rxjs";
 
 import { DevicesApiServiceAbstraction } from "@bitwarden/common/abstractions/devices/devices-api.service.abstraction";
-import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { DeviceType } from "@bitwarden/common/enums/device-type.enum";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { AccountDecryptionOptions } from "@bitwarden/common/platform/models/domain/account";
 
 @Directive()
 export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
@@ -14,31 +16,20 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
     rememberDevice: [true],
   });
 
-  hasMobileOrDesktopDevice = false;
+  loading = true;
 
-  orgMasterPasswordResetPolicy: Policy;
+  showApproveFromOtherDeviceBtn = false;
+  showReqAdminApprovalBtn = false;
+  showApproveWithMasterPasswordBtn = false;
 
   constructor(
     protected formBuilder: FormBuilder,
-    protected devicesApiService: DevicesApiServiceAbstraction
+    protected devicesApiService: DevicesApiServiceAbstraction,
+    protected stateService: StateService,
+    protected router: Router
   ) {}
 
   async ngOnInit() {
-    // User is authN via SSO or FIDO2 here
-
-    // How do I know which org they user is logging into?
-    // -- SSO - org SSO id entered during login, but what do we have post login?
-    // --- we might have SSO org id and we need to get org id in order to filter policies
-    // ------ I don't know when policies are loaded so might have to retrieve them
-
-    // -- FIDO2 - what is FIDO2 login flow - Kyle & Andreas passkey work
-
-    // Things to determine
-    // showApproveFromOtherDeviceButton == hasMobileOrDesktopDevice
-    // showRequestAdminApprovalButton == userInOrgWithTrustedDeviceEncryptionEnabled || userInOrgWithMasterPasswordResetPolicyEnabled
-
-    // Has user opted into master password reset? - only applies to new users; old users can have MP still
-
     // Determine if the user has any mobile or desktop devices
     // to determine if we should show the approve from other device button
     const devicesListResponse = await this.devicesApiService.getDevices();
@@ -52,10 +43,39 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
         device.type === DeviceType.LinuxDesktop ||
         device.type === DeviceType.UWP
       ) {
-        this.hasMobileOrDesktopDevice = true;
+        this.showApproveFromOtherDeviceBtn = true;
         break;
       }
     }
+
+    const acctDecryptionOptions: AccountDecryptionOptions =
+      await this.stateService.getAcctDecryptionOptions();
+
+    // Show the admin approval btn if user has TDE enabled and the org admin approval policy is set
+    this.showReqAdminApprovalBtn = !!acctDecryptionOptions.trustedDeviceOption?.hasAdminApproval;
+
+    this.showApproveWithMasterPasswordBtn = acctDecryptionOptions.hasMasterPassword;
+
+    this.loading = false;
+  }
+
+  approveFromOtherDevice() {
+    // this.devicesApiService.sendApproval();
+  }
+
+  requestAdminApproval() {
+    // TODO: add create admin approval request on new OrganizationAuthRequestsController on the server
+    // once https://github.com/bitwarden/server/pull/2993 is merged
+    // Client with create an AdminAuthRequest without org id and send it to the server
+    // Server will look up the org id(s) based on the user id and create the AdminAuthRequest(s)
+    // Note: must lookup if the user has an account recovery key set in the org
+    // (means they've opted into the Admin Acct Recovery feature)
+    // Per discussion with Micah, fire out requests to all admins in any orgs the user is a member of
+    // UNTIL the Admin Console team finishes their work to turn on Single Org policy when Admin Acct Recovery is enabled.
+  }
+
+  approveWithMasterPassword() {
+    this.router.navigate(["lock"]);
   }
 
   ngOnDestroy(): void {