[PM-6688] Use AccountService as account source (#8893)

* Use account service to track accounts and active account

* Remove state service active account Observables.

* Add email verified to account service

* Do not store account info on logged out accounts

* Add account activity tracking to account service

* Use last account activity from account service

* migrate or replicate account service data

* Add `AccountActivityService` that handles storing account last active data

* Move active and next active user to account service

* Remove authenticated accounts from state object

* Fold account activity into account service

* Fix builds

* Fix desktop app switch

* Fix logging out non active user

* Expand helper to handle new authenticated accounts location

* Prefer view observable to tons of async pipes

* Fix `npm run test:types`

* Correct user activity sorting test

* Be more precise about log out messaging

* Fix dev compare errors

All stored values are serializable, the next step wasn't necessary and was erroring on some types that lack `toString`.

* If the account in unlocked on load of lock component, navigate away from lock screen

* Handle no users case for auth service statuses

* Specify account to switch to

* Filter active account out of inactive accounts

* Prefer constructor init

* Improve comparator

* Use helper methods internally

* Fixup component tests

* Clarify name

* Ensure accounts object has only valid userIds

* Capitalize const values

* Prefer descriptive, single-responsibility guards

* Update libs/common/src/state-migrations/migrate.ts

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

* Fix merge

* Add user Id validation

activity for undefined was being set, which was resulting in requests for the auth status of `"undefined"` (string) userId, due to key enumeration. These changes stop that at both locations, as well as account add for good measure.

---------

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

apps/web/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { DOCUMENT } from "@angular/common";
 import { Component, Inject, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 import * as jq from "jquery";
-import { Subject, switchMap, takeUntil, timer } from "rxjs";
+import { Subject, firstValueFrom, map, switchMap, takeUntil, timer } from "rxjs";
 
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -10,6 +10,7 @@ import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service";
 import { InternalOrganizationServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { InternalPolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
 import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction";
@@ -51,7 +52,7 @@ const PaymentMethodWarningsRefresh = 60000; // 1 Minute
   templateUrl: "app.component.html",
 })
 export class AppComponent implements OnDestroy, OnInit {
-  private lastActivity: number = null;
+  private lastActivity: Date = null;
   private idleTimer: number = null;
   private isIdle = false;
   private destroy$ = new Subject<void>();
@@ -86,6 +87,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private stateEventRunnerService: StateEventRunnerService,
     private paymentMethodWarningService: PaymentMethodWarningService,
     private organizationService: InternalOrganizationServiceAbstraction,
+    private accountService: AccountService,
   ) {}
 
   ngOnInit() {
@@ -298,15 +300,16 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   private async recordActivity() {
-    const now = new Date().getTime();
-    if (this.lastActivity != null && now - this.lastActivity < 250) {
+    const activeUserId = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.id)),
+    );
+    const now = new Date();
+    if (this.lastActivity != null && now.getTime() - this.lastActivity.getTime() < 250) {
       return;
     }
 
     this.lastActivity = now;
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.stateService.setLastActive(now);
+    await this.accountService.setAccountActivity(activeUserId, now);
     // Idle states
     if (this.isIdle) {
       this.isIdle = false;

apps/web/src/app/layouts/header/web-header.component.html

@@ -58,7 +58,7 @@
             [bitMenuTriggerFor]="accountMenu"
             class="tw-border-0 tw-bg-transparent tw-p-0"
           >
-            <dynamic-avatar [id]="account.userId" [text]="account | userName"></dynamic-avatar>
+            <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
           </button>
 
           <bit-menu #accountMenu>
@@ -67,7 +67,7 @@
                 class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-info"
                 appStopProp
               >
-                <dynamic-avatar [id]="account.userId" [text]="account | userName"></dynamic-avatar>
+                <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
                 <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                   <span>{{ "loggedInAs" | i18n }}</span>
                   <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">

apps/web/src/app/layouts/header/web-header.component.ts

@@ -1,16 +1,17 @@
 import { Component, Input } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { combineLatest, map, Observable } from "rxjs";
+import { map, Observable } from "rxjs";
 
+import { User } from "@bitwarden/angular/pipes/user-name.pipe";
 import { UnassignedItemsBannerService } from "@bitwarden/angular/services/unassigned-items-banner.service";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
+import { UserId } from "@bitwarden/common/types/guid";
 
 @Component({
   selector: "app-header",
@@ -28,7 +29,7 @@ export class WebHeaderComponent {
   @Input() icon: string;
 
   protected routeData$: Observable<{ titleId: string }>;
-  protected account$: Observable<AccountProfile>;
+  protected account$: Observable<User & { id: UserId }>;
   protected canLock$: Observable<boolean>;
   protected selfHosted: boolean;
   protected hostname = location.hostname;
@@ -38,12 +39,12 @@ export class WebHeaderComponent {
 
   constructor(
     private route: ActivatedRoute,
-    private stateService: StateService,
     private platformUtilsService: PlatformUtilsService,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private messagingService: MessagingService,
     protected unassignedItemsBannerService: UnassignedItemsBannerService,
     private configService: ConfigService,
+    private accountService: AccountService,
   ) {
     this.routeData$ = this.route.data.pipe(
       map((params) => {
@@ -55,14 +56,7 @@ export class WebHeaderComponent {
 
     this.selfHosted = this.platformUtilsService.isSelfHost();
 
-    this.account$ = combineLatest([
-      this.stateService.activeAccount$,
-      this.stateService.accounts$,
-    ]).pipe(
-      map(([activeAccount, accounts]) => {
-        return accounts[activeAccount]?.profile;
-      }),
-    );
+    this.account$ = this.accountService.activeAccount$;
     this.canLock$ = this.vaultTimeoutSettingsService
       .availableVaultTimeoutActions$()
       .pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));

apps/web/src/app/tools/send/add-edit.component.ts

@@ -5,6 +5,7 @@ import { FormBuilder } from "@angular/forms";
 
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/tools/send/add-edit.component";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -40,6 +41,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     billingAccountProfileStateService: BillingAccountProfileStateService,
     protected dialogRef: DialogRef,
     @Inject(DIALOG_DATA) params: { sendId: string },
+    accountService: AccountService,
   ) {
     super(
       i18nService,
@@ -55,6 +57,7 @@ export class AddEditComponent extends BaseAddEditComponent {
       dialogService,
       formBuilder,
       billingAccountProfileStateService,
+      accountService,
     );
 
     this.sendId = params.sendId;

apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

@@ -55,7 +55,6 @@ export default {
         {
           provide: StateService,
           useValue: {
-            activeAccount$: new BehaviorSubject("1").asObservable(),
             accounts$: new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable(),
             async getShowFavicon() {
               return true;