[Account Switching] [Refactor] Implement new account centric services (#1220)

* [chore] updated services.module to use account services

* [refactor] sorted services provided by services.module

* [chore] removed references to deleted jslib services

* [chore] used activeAccount over storageService for account level storage items

* [chore] resolved linter warnings

* Refactor activeAccountService to stateService

* [bug] Remove uneeded calls to state service on logout

This was causing console erros on logout. Clearing of data is handled fully in dedicated services, clearing them in state afterwards is essentially a redundant call.

* [bug] Add back null locked callback to VaultTimeoutService

* Move call to get showUpdateKey

* [bug] Ensure HtmlStorageService does not override StateService options and locations

* [bug] Adjust theme logic to pull from the new storage locations

* [bug] Correct theme not sticking on refresh

* [bug] Add enableFullWidth to the account model

* [bug] fix theme option empty when light is selected

* [bug] init state on application start

* [bug] Reinit state when coming back from a lock

* [style] Fix lint complaints

* [bug] Clean state on logout

* [chore] Resolved merge issues

* [bug] Correct default for enableGravitars

* Bump angular to 12.

* Remove angular.json

* Bump rxjs

* Fix build errors, remove file-loader with asset/resource

* Use contenthash

* Bump jslib

* Bump ngx-toastr

* [chore] resolve issues from merge

* [chore] resolve issues from merge

* [bug] Add missing bracket

* Use newer import syntax

* [bug] Correct service orge

* [style] Fix lint complaints

* [chore] update jslib

* [review] Address code review

* [review] Address code review

* [review] Rename providerService to webProviderService

Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: Hinton <oscar@oscarhinton.com>

src/app/tools/breach-report.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { AuditService } from 'jslib-common/abstractions/audit.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 import { BreachAccountResponse } from 'jslib-common/models/response/breachAccountResponse';
 
 @Component({
@@ -18,10 +18,10 @@ export class BreachReportComponent implements OnInit {
     breachedAccounts: BreachAccountResponse[] = [];
     formPromise: Promise<BreachAccountResponse[]>;
 
-    constructor(private auditService: AuditService, private userService: UserService) { }
+    constructor(private auditService: AuditService, private stateService: StateService) { }
 
     async ngOnInit() {
-        this.username = await this.userService.getEmail();
+        this.username = await this.stateService.getEmail();
     }
 
     async submit() {

src/app/tools/cipher-report.component.ts

@@ -11,11 +11,11 @@ import { Organization } from 'jslib-common/models/domain/organization';
 import { AddEditComponent as OrgAddEditComponent } from '../organizations/vault/add-edit.component';
 import { AddEditComponent } from '../vault/add-edit.component';
 
-import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
-
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+
+import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -28,9 +28,9 @@ export class CipherReportComponent {
     ciphers: CipherView[] = [];
     organization: Organization;
 
-    constructor(private modalService: ModalService, protected userService: UserService,
-        protected messagingService: MessagingService, protected passwordRepromptService: PasswordRepromptService,
-        public requiresPaid: boolean) { }
+    constructor(private modalService: ModalService, protected messagingService: MessagingService,
+        public requiresPaid: boolean, private stateService: StateService,
+        protected passwordRepromptService: PasswordRepromptService) { }
 
     async load() {
         this.loading = true;
@@ -80,7 +80,7 @@ export class CipherReportComponent {
                 return false;
             }
         } else {
-            const accessPremium = await this.userService.canAccessPremium();
+            const accessPremium = await this.stateService.getCanAccessPremium();
             if (this.requiresPaid && !accessPremium) {
                 this.messagingService.send('premiumRequired');
                 this.loading = false;

src/app/tools/exposed-passwords-report.component.ts

@@ -7,7 +7,7 @@ import { AuditService } from 'jslib-common/abstractions/audit.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -26,8 +26,8 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
 
     constructor(protected cipherService: CipherService, protected auditService: AuditService,
         modalService: ModalService, messagingService: MessagingService,
-        userService: UserService, passwordRepromptService: PasswordRepromptService) {
-        super(modalService, userService, messagingService, passwordRepromptService, true);
+        stateService: StateService, passwordRepromptService: PasswordRepromptService) {
+        super(modalService, messagingService, true, stateService, passwordRepromptService);
     }
 
     ngOnInit() {

src/app/tools/inactive-two-factor-report.component.ts

@@ -7,7 +7,7 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -28,9 +28,9 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
     cipherDocs = new Map<string, string>();
 
     constructor(protected cipherService: CipherService, modalService: ModalService,
-        messagingService: MessagingService, userService: UserService, private logService: LogService,
+        messagingService: MessagingService, stateService: StateService, private logService: LogService,
         passwordRepromptService: PasswordRepromptService) {
-        super(modalService, userService, messagingService, passwordRepromptService, true);
+        super(modalService, messagingService, true, stateService, passwordRepromptService);
     }
 
     async ngOnInit() {

src/app/tools/reused-passwords-report.component.ts

@@ -6,7 +6,7 @@ import {
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -24,9 +24,9 @@ export class ReusedPasswordsReportComponent extends CipherReportComponent implem
     passwordUseMap: Map<string, number>;
 
     constructor(protected cipherService: CipherService, modalService: ModalService,
-        messagingService: MessagingService, userService: UserService,
+        messagingService: MessagingService, stateService: StateService,
         passwordRepromptService: PasswordRepromptService) {
-        super(modalService, userService, messagingService, passwordRepromptService, true);
+        super(modalService, messagingService, true, stateService, passwordRepromptService);
     }
 
     async ngOnInit() {

src/app/tools/tools.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 @Component({
     selector: 'app-tools',
@@ -13,10 +13,10 @@ import { UserService } from 'jslib-common/abstractions/user.service';
 export class ToolsComponent implements OnInit {
     canAccessPremium = false;
 
-    constructor(private userService: UserService, private messagingService: MessagingService) { }
+    constructor(private stateService: StateService, private messagingService: MessagingService) { }
 
     async ngOnInit() {
-        this.canAccessPremium = await this.userService.canAccessPremium();
+        this.canAccessPremium = await this.stateService.getCanAccessPremium();
     }
 
     premiumRequired() {

src/app/tools/unsecured-websites-report.component.ts

@@ -6,7 +6,7 @@ import {
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -22,8 +22,9 @@ import { CipherReportComponent } from './cipher-report.component';
 })
 export class UnsecuredWebsitesReportComponent extends CipherReportComponent implements OnInit {
     constructor(protected cipherService: CipherService, modalService: ModalService,
-        messagingService: MessagingService, userService: UserService, passwordRepromptService: PasswordRepromptService) {
-        super(modalService, userService, messagingService, passwordRepromptService, true);
+        messagingService: MessagingService, stateService: StateService,
+        passwordRepromptService: PasswordRepromptService) {
+        super(modalService, messagingService, true, stateService, passwordRepromptService);
     }
 
     async ngOnInit() {

src/app/tools/weak-passwords-report.component.ts

@@ -7,7 +7,7 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
 
@@ -28,9 +28,9 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
     private passwordStrengthCache = new Map<string, number>();
 
     constructor(protected cipherService: CipherService, protected passwordGenerationService: PasswordGenerationService,
-        modalService: ModalService, messagingService: MessagingService, userService: UserService,
-        passwordRepromptService: PasswordRepromptService) {
-        super(modalService, userService, messagingService, passwordRepromptService, true);
+        modalService: ModalService, messagingService: MessagingService,
+        stateService: StateService, passwordRepromptService: PasswordRepromptService) {
+        super(modalService, messagingService, true, stateService, passwordRepromptService);
     }
 
     async ngOnInit() {