Fix active account and searchBar observables/subscriptions (#3268)

* Change subscription to rely on observables and not on BehaviourSubject

* Ensure OnDestroy is added to AppComponent

* Fix check for no active accounts to redirect to the login page instead of lock

* Change subscription handling on SearchBarService

* Fix naming convention: Observables should have a $ suffix

* Remove obsolete linter hint

* Fix activeAccountUnlocked getting exposed as Observable but is instantiated as BehaviourSubject

libs/angular/src/components/lock.component.ts

@@ -1,5 +1,6 @@
-import { Directive, NgZone, OnInit } from "@angular/core";
+import { Directive, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
+import { Subscription } from "rxjs";
 import { take } from "rxjs/operators";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -20,7 +21,7 @@ import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetricCry
 import { SecretVerificationRequest } from "@bitwarden/common/models/request/secretVerificationRequest";
 
 @Directive()
-export class LockComponent implements OnInit {
+export class LockComponent implements OnInit, OnDestroy {
   masterPassword = "";
   pin = "";
   showPassword = false;
@@ -39,6 +40,8 @@ export class LockComponent implements OnInit {
   private invalidPinAttempts = 0;
   private pinSet: [boolean, boolean];
 
+  private activeAccountSubscription: Subscription;
+
   constructor(
     protected router: Router,
     protected i18nService: I18nService,
@@ -57,11 +60,15 @@ export class LockComponent implements OnInit {
   async ngOnInit() {
     // Load the first and observe updates
     await this.load();
-    this.stateService.activeAccount.subscribe(async () => {
+    this.activeAccountSubscription = this.stateService.activeAccount$.subscribe(async () => {
       await this.load();
     });
   }
 
+  ngOnDestroy() {
+    this.activeAccountSubscription.unsubscribe();
+  }
+
   async submit() {
     if (this.pinLock && (this.pin == null || this.pin === "")) {
       this.platformUtilsService.showToast(

libs/common/spec/services/folder.service.spec.ts

@@ -32,7 +32,7 @@ describe("Folder Service", () => {
     stateService.getEncryptedFolders().resolves({
       "1": folderData("1", "test"),
     });
-    stateService.activeAccount.returns(activeAccount);
+    stateService.activeAccount$.returns(activeAccount);
     stateService.activeAccountUnlocked.returns(activeAccountUnlocked);
     (window as any).bitwardenContainerService = new ContainerService(cryptoService);
 

libs/common/src/abstractions/state.service.ts

@@ -26,9 +26,8 @@ import { SendView } from "../models/view/sendView";
 
 export abstract class StateService<T extends Account = Account> {
   accounts: BehaviorSubject<{ [userId: string]: T }>;
-  activeAccount: BehaviorSubject<string>;
-
-  activeAccountUnlocked: Observable<boolean>;
+  activeAccount$: Observable<string>;
+  activeAccountUnlocked$: Observable<boolean>;
 
   addAccount: (account: T) => Promise<void>;
   setActiveUser: (userId: string) => Promise<void>;

libs/common/src/services/environment.service.ts

@@ -22,7 +22,7 @@ export class EnvironmentService implements EnvironmentServiceAbstraction {
   private scimUrl: string = null;
 
   constructor(private stateService: StateService) {
-    this.stateService.activeAccount.subscribe(async () => {
+    this.stateService.activeAccount$.subscribe(async () => {
       await this.setUrlsFromStorage();
     });
   }

libs/common/src/services/folder/folder.service.ts

@@ -25,7 +25,7 @@ export class FolderService implements InternalFolderServiceAbstraction {
     private cipherService: CipherService,
     private stateService: StateService
   ) {
-    this.stateService.activeAccountUnlocked.subscribe(async (unlocked) => {
+    this.stateService.activeAccountUnlocked$.subscribe(async (unlocked) => {
       if ((Utils.global as any).bitwardenContainerService == null) {
         return;
       }

libs/common/src/services/state.service.ts

@@ -55,8 +55,11 @@ export class StateService<
 > implements StateServiceAbstraction<TAccount>
 {
   accounts = new BehaviorSubject<{ [userId: string]: TAccount }>({});
-  activeAccount = new BehaviorSubject<string>(null);
-  activeAccountUnlocked = new BehaviorSubject<boolean>(false);
+  private activeAccountSubject = new BehaviorSubject<string>(null);
+  activeAccount$ = this.activeAccountSubject.asObservable();
+
+  private activeAccountUnlockedSubject = new BehaviorSubject<boolean>(false);
+  activeAccountUnlocked$ = this.activeAccountUnlockedSubject.asObservable();
 
   private hasBeenInited = false;
   private isRecoveredSession = false;
@@ -73,17 +76,17 @@ export class StateService<
     protected useAccountCache: boolean = true
   ) {
     // If the account gets changed, verify the new account is unlocked
-    this.activeAccount.subscribe(async (userId) => {
-      if (userId == null && this.activeAccountUnlocked.getValue() == false) {
+    this.activeAccountSubject.subscribe(async (userId) => {
+      if (userId == null && this.activeAccountUnlockedSubject.getValue() == false) {
         return;
       } else if (userId == null) {
-        this.activeAccountUnlocked.next(false);
+        this.activeAccountUnlockedSubject.next(false);
       }
 
       // FIXME: This should be refactored into AuthService or a similar service,
       //  as checking for the existance of the crypto key is a low level
       //  implementation detail.
-      this.activeAccountUnlocked.next((await this.getCryptoMasterKey()) != null);
+      this.activeAccountUnlockedSubject.next((await this.getCryptoMasterKey()) != null);
     });
   }
 
@@ -125,7 +128,7 @@ export class StateService<
         state.activeUserId = storedActiveUser;
       }
       await this.pushAccounts();
-      this.activeAccount.next(state.activeUserId);
+      this.activeAccountSubject.next(state.activeUserId);
 
       return state;
     });
@@ -154,7 +157,7 @@ export class StateService<
     await this.scaffoldNewAccountStorage(account);
     await this.setLastActive(new Date().getTime(), { userId: account.profile.userId });
     await this.setActiveUser(account.profile.userId);
-    this.activeAccount.next(account.profile.userId);
+    this.activeAccountSubject.next(account.profile.userId);
   }
 
   async setActiveUser(userId: string): Promise<void> {
@@ -162,7 +165,7 @@ export class StateService<
     await this.updateState(async (state) => {
       state.activeUserId = userId;
       await this.storageService.save(keys.activeUserId, userId);
-      this.activeAccount.next(state.activeUserId);
+      this.activeAccountSubject.next(state.activeUserId);
       return state;
     });
 
@@ -497,12 +500,12 @@ export class StateService<
       this.reconcileOptions(options, await this.defaultInMemoryOptions())
     );
 
-    if (options.userId == this.activeAccount.getValue()) {
+    if (options.userId == this.activeAccountSubject.getValue()) {
       const nextValue = value != null;
 
       // Avoid emitting if we are already unlocked
-      if (this.activeAccountUnlocked.getValue() != nextValue) {
-        this.activeAccountUnlocked.next(nextValue);
+      if (this.activeAccountUnlockedSubject.getValue() != nextValue) {
+        this.activeAccountUnlockedSubject.next(nextValue);
       }
     }
   }