[Account Switching] [Feature] Add the ability to maintain state for up to 5 accounts at once (#1079)

* [refactor] Remove references to deprecated services * [feature] Implement account switching * [bug] Fix state handling for authentication dependent system menu items * [bug] Enable the account switcher to fucntion properly when switching to a locked accounts * [feature] Enable locking any account from the menu * [bug] Ensure the avatar instance used in the account switcher updates on account change * [style] Fix lint complaints * [bug] Ensure the logout command callback can handle any user in state * [style] Fix lint complaints * rollup * [style] Fix lint complaints * [bug] Don't clean up state until everything else is done on logout * [bug] Navigate to vault on a succesful account switch * [bug] Init the state service on start * [feature] Limit account switching to 5 account maximum * [bug] Resolve app lock state with 5 logged out accounts * [chore] Update account refrences to match recent jslib restructuring * [bug] Add missing awaits * [bug] Update app menu on logout * [bug] Hide the switcher if there are no authed accounts * [bug] Move authenticationStatus display information out of jslib * [bug] Remove unused active style from scss * [refactor] Rewrite the menu bar * [style] Fix lint complaints * [bug] Clean state of loggout out user after redirect * [bug] Redirect on logout if not explicity provided a userId that isn't active * [bug] Relocated several settings items to persistant storage * [bug] Correct account switcher styles on all themes * [chore] Include state migration service in services * [bug] Swap to next account on logout * [bug] Correct DI service * [bug] fix loginGuard deps in services.module * [chore] update jslib * [bug] Remove badly merged scss * [chore] update jslib * [review] Code review cleanup * [review] Code review cleanup Co-authored-by: Hinton <oscar@oscarhinton.com>
2025-12-18 01:03:35 +00:00 · 2021-12-15 17:32:00 -05:00
parent 5865f08b37
commit 0b306ca1a7
56 changed files with 2106 additions and 837 deletions
--- a/src/app/layout/account-switcher.component.ts
+++ b/src/app/layout/account-switcher.component.ts
@@ -0,0 +1,78 @@
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+  } from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
+
+import { AuthenticationStatus } from 'jslib-common/enums/authenticationStatus';
+
+import { Account } from 'jslib-common/models/domain/account';
+
+@Component({
+    selector: 'app-account-switcher',
+    templateUrl: 'account-switcher.component.html',
+    animations: [
+        trigger('transformPanel', [
+            state('void', style({
+              opacity: 0,
+            })),
+            transition('void => open',  animate('100ms linear', style({
+              opacity: 1,
+            }))),
+            transition('* => void', animate('100ms linear', style({opacity: 0}))),
+        ]),
+    ],
+})
+export class AccountSwitcherComponent implements OnInit {
+    isOpen: boolean = false;
+    accounts: { [userId: string]: Account } = {};
+    activeAccountEmail: string;
+
+    get showSwitcher() {
+        return this.accounts != null && Object.keys(this.accounts).length > 0;
+    }
+
+    constructor(private stateService: StateService, private vaultTimeoutService: VaultTimeoutService,
+        private messagingService: MessagingService, private router: Router) {}
+
+    async ngOnInit(): Promise<void> {
+        this.stateService.accounts.subscribe(async accounts => {
+            for (const userId in accounts) {
+                if (userId === await this.stateService.getUserId()) {
+                    accounts[userId].profile.authenticationStatus = AuthenticationStatus.Active;
+                } else {
+                    accounts[userId].profile.authenticationStatus = await this.vaultTimeoutService.isLocked(userId) ?
+                        AuthenticationStatus.Locked :
+                        AuthenticationStatus.Unlocked;
+                }
+            }
+
+            this.accounts = accounts;
+            this.activeAccountEmail = await this.stateService.getEmail();
+        });
+    }
+
+    toggle() {
+        this.isOpen = !this.isOpen;
+    }
+
+    async switch(userId: string) {
+        await this.stateService.setActiveUser(userId);
+        const locked = await this.vaultTimeoutService.isLocked(userId);
+        if (locked) {
+            this.messagingService.send('locked', { userId: userId });
+        } else {
+            this.messagingService.send('unlocked');
+            this.messagingService.send('syncVault');
+            this.router.navigate(['vault']);
+        }
+    }
+}