[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>
2026-01-04 17:43:39 +00:00 · 2021-12-14 11:10:26 -05:00
parent 71075cf878
commit 17ae5ee57c
101 changed files with 839 additions and 649 deletions
--- a/src/app/settings/account.component.ts
+++ b/src/app/settings/account.component.ts
@@ -11,7 +11,7 @@ import { PurgeVaultComponent } from './purge-vault.component';

 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.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';

@@ -31,7 +31,7 @@ export class AccountComponent {
    showChangeEmail = true;

    constructor(private modalService: ModalService, private apiService: ApiService,
-        private userService: UserService, private keyConnectorService: KeyConnectorService) { }
+        private keyConnectorService: KeyConnectorService, private stateService: StateService) { }

    async ngOnInit() {
        this.showChangeEmail = this.showChangeKdf = this.showChangePassword =
@@ -51,7 +51,7 @@ export class AccountComponent {
    }

    async viewUserApiKey() {
-        const entityId = await this.userService.getUserId();
+        const entityId = await this.stateService.getUserId();
        await this.modalService.openViewRef(ApiKeyComponent, this.viewUserApiKeyModalRef, comp => {
            comp.keyType = 'user';
            comp.entityId = entityId;
@@ -65,7 +65,7 @@ export class AccountComponent {
    }

    async rotateUserApiKey() {
-        const entityId = await this.userService.getUserId();
+        const entityId = await this.stateService.getUserId();
        await this.modalService.openViewRef(ApiKeyComponent, this.rotateUserApiKeyModalRef, comp => {
            comp.keyType = 'user';
            comp.isRotation = true;
--- a/src/app/settings/add-credit.component.ts
+++ b/src/app/settings/add-credit.component.ts
@@ -11,8 +11,9 @@ import {
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { PayPalConfig } from 'jslib-common/abstractions/environment.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { PaymentMethodType } from 'jslib-common/enums/paymentMethodType';

@@ -45,8 +46,9 @@ export class AddCreditComponent implements OnInit {
    private name: string;
    private email: string;

-    constructor(private userService: UserService, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private logService: LogService) {
+    constructor(private stateService: StateService, private apiService: ApiService,
+        private platformUtilsService: PlatformUtilsService, private organizationService: OrganizationService,
+        private logService: LogService) {
        const payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig;
        this.ppButtonFormAction = payPalConfig.buttonAction;
        this.ppButtonBusinessId = payPalConfig.businessId;
@@ -58,7 +60,7 @@ export class AddCreditComponent implements OnInit {
                this.creditAmount = '20.00';
            }
            this.ppButtonCustomField = 'organization_id:' + this.organizationId;
-            const org = await this.userService.getOrganization(this.organizationId);
+            const org = await this.organizationService.get(this.organizationId);
            if (org != null) {
                this.subject = org.name;
                this.name = org.name;
@@ -67,8 +69,8 @@ export class AddCreditComponent implements OnInit {
            if (this.creditAmount == null) {
                this.creditAmount = '10.00';
            }
-            this.userId = await this.userService.getUserId();
-            this.subject = await this.userService.getEmail();
+            this.userId = await this.stateService.getUserId();
+            this.subject = await this.stateService.getEmail();
            this.email = this.subject;
            this.ppButtonCustomField = 'user_id:' + this.userId;
        }
--- a/src/app/settings/change-email.component.ts
+++ b/src/app/settings/change-email.component.ts
@@ -9,7 +9,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { EmailRequest } from 'jslib-common/models/request/emailRequest';
 import { EmailTokenRequest } from 'jslib-common/models/request/emailTokenRequest';
@@ -29,10 +29,15 @@ export class ChangeEmailComponent implements OnInit {

    formPromise: Promise<any>;

-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private cryptoService: CryptoService,
-        private messagingService: MessagingService, private userService: UserService,
-        private logService: LogService) { }
+    constructor(
+        private apiService: ApiService,
+        private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService,
+        private cryptoService: CryptoService,
+        private messagingService: MessagingService,
+        private logService: LogService,
+        private stateService: StateService,
+    ) { }

    async ngOnInit() {
        const twoFactorProviders = await this.apiService.getTwoFactorProviders();
@@ -64,8 +69,8 @@ export class ChangeEmailComponent implements OnInit {
            request.token = this.token;
            request.newEmail = this.newEmail;
            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
-            const kdf = await this.userService.getKdf();
-            const kdfIterations = await this.userService.getKdfIterations();
+            const kdf = await this.stateService.getKdfType();
+            const kdfIterations = await this.stateService.getKdfIterations();
            const newKey = await this.cryptoService.makeKey(this.masterPassword, this.newEmail, kdf, kdfIterations);
            request.newMasterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, newKey);
            const newEncKey = await this.cryptoService.remakeEncKey(newKey);
--- a/src/app/settings/change-kdf.component.ts
+++ b/src/app/settings/change-kdf.component.ts
@@ -9,7 +9,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { KdfRequest } from 'jslib-common/models/request/kdfRequest';

@@ -26,18 +26,23 @@ export class ChangeKdfComponent implements OnInit {
    kdfOptions: any[] = [];
    formPromise: Promise<any>;

-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private cryptoService: CryptoService,
-        private messagingService: MessagingService, private userService: UserService,
-        private logService: LogService) {
+    constructor(
+        private apiService: ApiService,
+        private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService,
+        private cryptoService: CryptoService,
+        private messagingService: MessagingService,
+        private logService: LogService,
+        private stateService: StateService,
+    ) {
        this.kdfOptions = [
            { name: 'PBKDF2 SHA-256', value: KdfType.PBKDF2_SHA256 },
        ];
    }

    async ngOnInit() {
-        this.kdf = await this.userService.getKdf();
-        this.kdfIterations = await this.userService.getKdfIterations();
+        this.kdf = await this.stateService.getKdfType();
+        this.kdfIterations = await this.stateService.getKdfIterations();
    }

    async submit() {
@@ -51,7 +56,7 @@ export class ChangeKdfComponent implements OnInit {
        request.kdf = this.kdf;
        request.kdfIterations = this.kdfIterations;
        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
-        const email = await this.userService.getEmail();
+        const email = await this.stateService.getEmail();
        const newKey = await this.cryptoService.makeKey(this.masterPassword, email, this.kdf, this.kdfIterations);
        request.newMasterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, newKey);
        const newEncKey = await this.cryptoService.remakeEncKey(newKey);
--- a/src/app/settings/change-password.component.ts
+++ b/src/app/settings/change-password.component.ts
@@ -6,12 +6,13 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { SendService } from 'jslib-common/abstractions/send.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import {
    ChangePasswordComponent as BaseChangePasswordComponent,
@@ -41,12 +42,13 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {

    constructor(i18nService: I18nService,
        cryptoService: CryptoService, messagingService: MessagingService,
-        userService: UserService, passwordGenerationService: PasswordGenerationService,
+        stateService: StateService, passwordGenerationService: PasswordGenerationService,
        platformUtilsService: PlatformUtilsService, policyService: PolicyService,
        private folderService: FolderService, private cipherService: CipherService,
-        private syncService: SyncService, private apiService: ApiService, private sendService: SendService) {
-        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
-            platformUtilsService, policyService);
+        private syncService: SyncService, private apiService: ApiService,
+        private sendService: SendService, private organizationService: OrganizationService) {
+        super(i18nService, cryptoService, messagingService, passwordGenerationService,
+            platformUtilsService, policyService, stateService);
    }

    async rotateEncKeyClicked() {
@@ -206,7 +208,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
    }

    private async updateAllResetPasswordKeys(encKey: SymmetricCryptoKey) {
-        const orgs = await this.userService.getAllOrganizations();
+        const orgs = await this.organizationService.getAll();

        for (const org of orgs) {
            // If not already enrolled, skip
--- a/src/app/settings/emergency-access-attachments.component.ts
+++ b/src/app/settings/emergency-access-attachments.component.ts
@@ -6,7 +6,7 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { AttachmentView } from 'jslib-common/models/view/attachmentView';

@@ -21,11 +21,9 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
    canAccessAttachments = true;

    constructor(cipherService: CipherService, i18nService: I18nService,
-        cryptoService: CryptoService, userService: UserService,
-        platformUtilsService: PlatformUtilsService, apiService: ApiService,
-        logService: LogService) {
-        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, apiService, window,
-            logService);
+        cryptoService: CryptoService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService, apiService: ApiService, logService: LogService) {
+        super(cipherService, i18nService, cryptoService, platformUtilsService, apiService, window, logService, stateService);
    }

    protected async init() {
--- a/src/app/settings/emergency-access-confirm.component.ts
+++ b/src/app/settings/emergency-access-confirm.component.ts
@@ -6,12 +6,10 @@ import {
    Output,
 } from '@angular/core';

-import { ConstantsService } from 'jslib-common/services/constants.service';
-
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { Utils } from 'jslib-common/misc/utils';

@@ -31,7 +29,7 @@ export class EmergencyAccessConfirmComponent implements OnInit {
    fingerprint: string;

    constructor(private apiService: ApiService, private cryptoService: CryptoService,
-        private storageService: StorageService, private logService: LogService) { }
+        private stateService: StateService, private logService: LogService) { }

    async ngOnInit() {
        try {
@@ -55,7 +53,7 @@ export class EmergencyAccessConfirmComponent implements OnInit {
        }

        if (this.dontAskAgain) {
-            await this.storageService.save(ConstantsService.autoConfirmFingerprints, true);
+            await this.stateService.setAutoConfirmFingerprints(true);
        }

        try {
--- a/src/app/settings/emergency-access-takeover.component.ts
+++ b/src/app/settings/emergency-access-takeover.component.ts
@@ -14,7 +14,7 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { KdfType } from 'jslib-common/enums/kdfType';
 import { PolicyData } from 'jslib-common/models/data/policyData';
@@ -39,13 +39,26 @@ export class EmergencyAccessTakeoverComponent extends ChangePasswordComponent im

    formPromise: Promise<any>;

-    constructor(i18nService: I18nService, cryptoService: CryptoService,
-        messagingService: MessagingService, userService: UserService,
+    constructor(
+        i18nService: I18nService,
+        cryptoService: CryptoService,
+        messagingService: MessagingService,
+        stateService: StateService,
        passwordGenerationService: PasswordGenerationService,
-        platformUtilsService: PlatformUtilsService, policyService: PolicyService,
-        private apiService: ApiService, private logService: LogService) {
-        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
-            platformUtilsService, policyService);
+        platformUtilsService: PlatformUtilsService,
+        policyService: PolicyService,
+        private apiService: ApiService,
+        private logService: LogService
+    ) {
+        super(
+            i18nService,
+            cryptoService,
+            messagingService,
+            passwordGenerationService,
+            platformUtilsService,
+            policyService,
+            stateService,
+        );
    }

    async ngOnInit() {
@@ -54,7 +67,7 @@ export class EmergencyAccessTakeoverComponent extends ChangePasswordComponent im
            const policies = response.data.map((policyResponse: PolicyResponse) => new Policy(new PolicyData(policyResponse)));
            this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(policies);
        }
-     }
+    }

    async submit() {
        if (!await this.strongPassword()) {
--- a/src/app/settings/emergency-access.component.ts
+++ b/src/app/settings/emergency-access.component.ts
@@ -10,16 +10,17 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+
+import { EmergencyAccessConfirmRequest } from 'jslib-common/models/request/emergencyAccessConfirmRequest';
+
+import { EmergencyAccessGranteeDetailsResponse, EmergencyAccessGrantorDetailsResponse } from 'jslib-common/models/response/emergencyAccessResponse';

 import { EmergencyAccessStatusType } from 'jslib-common/enums/emergencyAccessStatusType';
 import { EmergencyAccessType } from 'jslib-common/enums/emergencyAccessType';
 import { Utils } from 'jslib-common/misc/utils';
-import { EmergencyAccessConfirmRequest } from 'jslib-common/models/request/emergencyAccessConfirmRequest';
-import { EmergencyAccessGranteeDetailsResponse, EmergencyAccessGrantorDetailsResponse } from 'jslib-common/models/response/emergencyAccessResponse';
-import { ConstantsService } from 'jslib-common/services/constants.service';

 import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';

@@ -35,7 +36,7 @@ import { ModalService } from 'jslib-angular/services/modal.service';
 })
 export class EmergencyAccessComponent implements OnInit {
    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
-    @ViewChild('takeoverTemplate', { read: ViewContainerRef, static: true}) takeoverModalRef: ViewContainerRef;
+    @ViewChild('takeoverTemplate', { read: ViewContainerRef, static: true }) takeoverModalRef: ViewContainerRef;
    @ViewChild('confirmTemplate', { read: ViewContainerRef, static: true }) confirmModalRef: ViewContainerRef;

    canAccessPremium: boolean;
@@ -46,16 +47,22 @@ export class EmergencyAccessComponent implements OnInit {
    actionPromise: Promise<any>;
    isOrganizationOwner: boolean;

-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private modalService: ModalService, private platformUtilsService: PlatformUtilsService,
+    constructor(
+        private apiService: ApiService,
+        private i18nService: I18nService,
+        private modalService: ModalService,
+        private platformUtilsService: PlatformUtilsService,
        private cryptoService: CryptoService,
-        private storageService: StorageService, private userService: UserService,
-        private messagingService: MessagingService, private userNamePipe: UserNamePipe,
-        private logService: LogService) { }
+        private messagingService: MessagingService,
+        private userNamePipe: UserNamePipe,
+        private logService: LogService,
+        private stateService: StateService,
+        private organizationService: OrganizationService,
+    ) { }

    async ngOnInit() {
-        this.canAccessPremium = await this.userService.canAccessPremium();
-        const orgs = await this.userService.getAllOrganizations();
+        this.canAccessPremium = await this.stateService.getCanAccessPremium();
+        const orgs = await this.organizationService.getAll();
        this.isOrganizationOwner = orgs.some(o => o.isOwner);
        this.load();
    }
@@ -111,7 +118,7 @@ export class EmergencyAccessComponent implements OnInit {
            return;
        }

-        const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
+        const autoConfirm = await this.stateService.getAutoConfirmFingerPrints();
        if (autoConfirm == null || !autoConfirm) {
            const [modal] = await this.modalService.openViewRef(EmergencyAccessConfirmComponent, this.confirmModalRef, comp => {
                comp.name = this.userNamePipe.transform(contact);
--- a/src/app/settings/emergency-add-edit.component.ts
+++ b/src/app/settings/emergency-add-edit.component.ts
@@ -8,13 +8,13 @@ import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { TotpService } from 'jslib-common/abstractions/totp.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { Cipher } from 'jslib-common/models/domain/cipher';

@@ -30,14 +30,14 @@ export class EmergencyAddEditComponent extends BaseAddEditComponent {

    constructor(cipherService: CipherService, folderService: FolderService,
        i18nService: I18nService, platformUtilsService: PlatformUtilsService,
-        auditService: AuditService, stateService: StateService,
-        userService: UserService, collectionService: CollectionService,
+        auditService: AuditService, stateService: StateService, collectionService: CollectionService,
        totpService: TotpService, passwordGenerationService: PasswordGenerationService,
-        messagingService: MessagingService, eventService: EventService, policyService: PolicyService,
-        logService: LogService, passwordRepromptService: PasswordRepromptService) {
+        messagingService: MessagingService, eventService: EventService,
+        policyService: PolicyService, passwordRepromptService: PasswordRepromptService,
+        organizationService: OrganizationService, logService: LogService) {
        super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
-            userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService, policyService, passwordRepromptService, logService);
+            collectionService, totpService, passwordGenerationService, messagingService,
+            eventService, policyService, organizationService, logService, passwordRepromptService);
    }

    async load() {
--- a/src/app/settings/link-sso.component.ts
+++ b/src/app/settings/link-sso.component.ts
@@ -14,7 +14,6 @@ import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';

 import { SsoComponent } from 'jslib-angular/components/sso.component';

@@ -32,11 +31,9 @@ export class LinkSsoComponent extends SsoComponent implements AfterContentInit {
        apiService: ApiService, authService: AuthService,
        router: Router, route: ActivatedRoute,
        cryptoFunctionService: CryptoFunctionService, passwordGenerationService: PasswordGenerationService,
-        storageService: StorageService, stateService: StateService, environmentService: EnvironmentService,
-        logService: LogService) {
+        stateService: StateService, environmentService: EnvironmentService, logService: LogService) {
        super(authService, router,
-            i18nService, route,
-            storageService, stateService,
+            i18nService, route, stateService,
            platformUtilsService, apiService,
            cryptoFunctionService, environmentService, passwordGenerationService, logService);

--- a/src/app/settings/options.component.ts
+++ b/src/app/settings/options.component.ts
@@ -8,11 +8,8 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';

-import { ConstantsService } from 'jslib-common/services/constants.service';
-
 import { ThemeType } from 'jslib-common/enums/themeType';
 import { Utils } from 'jslib-common/misc/utils';

@@ -36,10 +33,13 @@ export class OptionsComponent implements OnInit {
    private startingLocale: string;
    private startingTheme: string;

-    constructor(private storageService: StorageService, private stateService: StateService,
+    constructor(
+        private stateService: StateService,
        private i18nService: I18nService,
-        private vaultTimeoutService: VaultTimeoutService, private platformUtilsService: PlatformUtilsService,
-        private messagingService: MessagingService) {
+        private vaultTimeoutService: VaultTimeoutService,
+        private platformUtilsService: PlatformUtilsService,
+        private messagingService: MessagingService
+    ) {
        this.vaultTimeouts = [
            { name: i18nService.t('oneMinute'), value: 1 },
            { name: i18nService.t('fiveMinutes'), value: 5 },
@@ -65,7 +65,7 @@ export class OptionsComponent implements OnInit {
        localeOptions.splice(0, 0, { name: i18nService.t('default'), value: null });
        this.localeOptions = localeOptions;
        this.themeOptions = [
-            { name: i18nService.t('themeLight'), value: null },
+            { name: i18nService.t('themeLight'), value: ThemeType.Light },
            { name: i18nService.t('themeDark'), value: ThemeType.Dark },
            { name: i18nService.t('themeSystem'), value: ThemeType.System },
        ];
@@ -73,12 +73,12 @@ export class OptionsComponent implements OnInit {

    async ngOnInit() {
        this.vaultTimeout.setValue(await this.vaultTimeoutService.getVaultTimeout());
-        this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
-        this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
-        this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
-        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
-        this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
-        this.theme = this.startingTheme = await this.storageService.get<ThemeType>(ConstantsService.themeKey);
+        this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
+        this.disableIcons = await this.stateService.getDisableFavicon();
+        this.enableGravatars = await this.stateService.getEnableGravitars();
+        this.enableFullWidth = await this.stateService.getEnableFullWidth();
+        this.locale = await this.stateService.getLocale() ?? this.startingLocale;
+        this.theme = await this.stateService.getTheme() ?? this.startingTheme;
    }

    async submit() {
@@ -88,21 +88,19 @@ export class OptionsComponent implements OnInit {
        }

        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout.value, this.vaultTimeoutAction);
-        await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
-        await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
-        await this.storageService.save('enableGravatars', this.enableGravatars);
-        await this.stateService.save('enableGravatars', this.enableGravatars);
-        await this.storageService.save('enableFullWidth', this.enableFullWidth);
+        await this.stateService.setDisableFavicon(this.disableIcons);
+        await this.stateService.setEnableGravitars(this.enableGravatars);
+        await this.stateService.setEnableFullWidth(this.enableFullWidth);
        this.messagingService.send('setFullWidth');
        if (this.theme !== this.startingTheme) {
-            await this.storageService.save(ConstantsService.themeKey, this.theme);
+            await this.stateService.setTheme(this.theme);
            this.startingTheme = this.theme;
            const effectiveTheme = await this.platformUtilsService.getEffectiveTheme();
            const htmlEl = window.document.documentElement;
            htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark);
            htmlEl.classList.add('theme_' + effectiveTheme);
        }
-        await this.storageService.save(ConstantsService.localeKey, this.locale);
+        await this.stateService.setLocale(this.locale);
        if (this.locale !== this.startingLocale) {
            window.location.reload();
        } else {
--- a/src/app/settings/organization-plans.component.ts
+++ b/src/app/settings/organization-plans.component.ts
@@ -12,10 +12,10 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { PaymentComponent } from './payment.component';
 import { TaxInfoComponent } from './tax-info.component';
@@ -73,7 +73,7 @@ export class OrganizationPlansComponent implements OnInit {
    constructor(private apiService: ApiService, private i18nService: I18nService,
        private platformUtilsService: PlatformUtilsService,
        private cryptoService: CryptoService, private router: Router, private syncService: SyncService,
-        private policyService: PolicyService, private userService: UserService, private logService: LogService) {
+        private policyService: PolicyService, private organizationService: OrganizationService, private logService: LogService) {
        this.selfHosted = platformUtilsService.isSelfHost();
    }

@@ -307,7 +307,7 @@ export class OrganizationPlansComponent implements OnInit {
        request.billingAddressPostalCode = this.taxComponent.taxInfo.postalCode;

        // Retrieve org info to backfill pub/priv key if necessary
-        const org = await this.userService.getOrganization(this.organizationId);
+        const org = await this.organizationService.get(this.organizationId);
        if (!org.hasPublicAndPrivateKeys) {
            const orgShareKey = await this.cryptoService.getOrgKey(this.organizationId);
            const orgKeys = await this.cryptoService.makeKeyPair(orgShareKey);
--- a/src/app/settings/organizations.component.ts
+++ b/src/app/settings/organizations.component.ts
@@ -8,10 +8,10 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { Organization } from 'jslib-common/models/domain/organization';
 import { Policy } from 'jslib-common/models/domain/policy';
@@ -34,7 +34,7 @@ export class OrganizationsComponent implements OnInit {
    loaded: boolean = false;
    actionPromise: Promise<any>;

-    constructor(private userService: UserService, private platformUtilsService: PlatformUtilsService,
+    constructor(private organizationService: OrganizationService, private platformUtilsService: PlatformUtilsService,
        private i18nService: I18nService, private apiService: ApiService,
        private syncService: SyncService,
        private cryptoService: CryptoService, private policyService: PolicyService,
@@ -48,7 +48,7 @@ export class OrganizationsComponent implements OnInit {
    }

    async load() {
-        const orgs = await this.userService.getAllOrganizations();
+        const orgs = await this.organizationService.getAll();
        orgs.sort(Utils.getSortFunction(this.i18nService, 'name'));
        this.organizations = orgs;
        this.policies = await this.policyService.getAll(PolicyType.ResetPassword);
--- a/src/app/settings/premium.component.ts
+++ b/src/app/settings/premium.component.ts
@@ -10,9 +10,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { TokenService } from 'jslib-common/abstractions/token.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { PaymentComponent } from './payment.component';
 import { TaxInfoComponent } from './tax-info.component';
@@ -37,12 +37,12 @@ export class PremiumComponent implements OnInit {
        private platformUtilsService: PlatformUtilsService,
        private tokenService: TokenService, private router: Router,
        private messagingService: MessagingService, private syncService: SyncService,
-        private userService: UserService, private logService: LogService) {
+        private logService: LogService, private stateService: StateService) {
        this.selfHosted = platformUtilsService.isSelfHost();
    }

    async ngOnInit() {
-        this.canAccessPremium = await this.userService.canAccessPremium();
+        this.canAccessPremium = await this.stateService.getCanAccessPremium();
        const premium = await this.tokenService.getPremium();
        if (premium) {
            this.router.navigate(['/settings/subscription']);
--- a/src/app/settings/profile.component.ts
+++ b/src/app/settings/profile.component.ts
@@ -9,7 +9,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { UpdateProfileRequest } from 'jslib-common/models/request/updateProfileRequest';

@@ -27,15 +27,20 @@ export class ProfileComponent implements OnInit {

    formPromise: Promise<any>;

-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private cryptoService: CryptoService, private logService: LogService,
-        private keyConnectorService: KeyConnectorService) { }
+    constructor(
+        private apiService: ApiService,
+        private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService,
+        private cryptoService: CryptoService,
+        private logService: LogService,
+        private keyConnectorService: KeyConnectorService,
+        private stateService: StateService,
+    ) { }

    async ngOnInit() {
        this.profile = await this.apiService.getProfile();
        this.loading = false;
-        const fingerprint = await this.cryptoService.getFingerprint(await this.userService.getUserId());
+        const fingerprint = await this.cryptoService.getFingerprint(await this.stateService.getUserId());
        if (fingerprint != null) {
            this.fingerprint = fingerprint.join('-');
        }
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -6,9 +6,9 @@ import {
 } from '@angular/core';

 import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { TokenService } from 'jslib-common/abstractions/token.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 const BroadcasterSubscriptionId = 'SettingsComponent';

@@ -23,7 +23,7 @@ export class SettingsComponent implements OnInit, OnDestroy {

    constructor(private tokenService: TokenService, private broadcasterService: BroadcasterService,
        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService,
-        private userService: UserService) { }
+        private organizationService: OrganizationService) { }

    async ngOnInit() {
        this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
@@ -47,6 +47,6 @@ export class SettingsComponent implements OnInit, OnDestroy {

    async load() {
        this.premium = await this.tokenService.getPremium();
-        this.hasFamilySponsorshipAvailable = await this.userService.canManageSponsorships();
+        this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships();
    }
 }
--- a/src/app/settings/sponsored-families.component.ts
+++ b/src/app/settings/sponsored-families.component.ts
@@ -4,9 +4,9 @@ import {
 } from '@angular/core';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { OrganizationService } from 'jslib-common/abstractions/organization.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { PlanSponsorshipType } from 'jslib-common/enums/planSponsorshipType';
 import { Organization } from 'jslib-common/models/domain/organization';
@@ -26,9 +26,13 @@ export class SponsoredFamiliesComponent implements OnInit {
    // Conditional display properties
    formPromise: Promise<any>;

-    constructor(private userService: UserService, private apiService: ApiService,
-        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
-        private syncService: SyncService) { }
+    constructor(
+        private apiService: ApiService,
+        private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService,
+        private syncService: SyncService,
+        private organizationService: OrganizationService,
+    ) { }

    async ngOnInit() {
        await this.load();
@@ -58,7 +62,7 @@ export class SponsoredFamiliesComponent implements OnInit {
            await this.syncService.fullSync(true);
        }

-        const allOrgs = await this.userService.getAllOrganizations();
+        const allOrgs = await this.organizationService.getAll();
        this.availableSponsorshipOrgs = allOrgs.filter(org => org.familySponsorshipAvailable);

        this.activeSponsorshipOrgs = allOrgs.filter(org => org.familySponsorshipFriendlyName !== null);
--- a/src/app/settings/two-factor-authenticator.component.ts
+++ b/src/app/settings/two-factor-authenticator.component.ts
@@ -8,7 +8,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';

 import { UpdateTwoFactorAuthenticatorRequest } from 'jslib-common/models/request/updateTwoFactorAuthenticatorRequest';
@@ -30,11 +30,21 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent impl

    private qrScript: HTMLScriptElement;

-    constructor(apiService: ApiService, i18nService: I18nService,
+    constructor(
+        apiService: ApiService,
+        i18nService: I18nService,
        userVerificationService: UserVerificationService,
-        platformUtilsService: PlatformUtilsService, logService: LogService,
-        private userService: UserService) {
-        super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+        platformUtilsService: PlatformUtilsService,
+        logService: LogService,
+        private stateService: StateService
+    ) {
+        super(
+            apiService,
+            i18nService,
+            platformUtilsService,
+            logService,
+            userVerificationService
+        );
        this.qrScript = window.document.createElement('script');
        this.qrScript.src = 'scripts/qrious.min.js';
        this.qrScript.async = true;
@@ -77,7 +87,7 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent impl
        this.token = null;
        this.enabled = response.enabled;
        this.key = response.key;
-        const email = await this.userService.getEmail();
+        const email = await this.stateService.getEmail();
        window.setTimeout(() => {
            const qr = new (window as any).QRious({
                element: document.getElementById('qr'),
--- a/src/app/settings/two-factor-email.component.ts
+++ b/src/app/settings/two-factor-email.component.ts
@@ -4,7 +4,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';

 import { TwoFactorEmailRequest } from 'jslib-common/models/request/twoFactorEmailRequest';
@@ -27,11 +27,21 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
    formPromise: Promise<any>;
    emailPromise: Promise<any>;

-    constructor(apiService: ApiService, i18nService: I18nService,
+    constructor(
+        apiService: ApiService,
+        i18nService: I18nService,
        platformUtilsService: PlatformUtilsService,
-        logService: LogService, userVerificationService: UserVerificationService,
-        private userService: UserService) {
-        super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+        logService: LogService,
+        userVerificationService: UserVerificationService,
+        private stateService: StateService,
+    ) {
+        super(
+            apiService,
+            i18nService,
+            platformUtilsService,
+            logService,
+            userVerificationService
+        );
    }

    auth(authResponse: any) {
@@ -76,7 +86,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
        this.email = response.email;
        this.enabled = response.enabled;
        if (!this.enabled && (this.email == null || this.email === '')) {
-            this.email = await this.userService.getEmail();
+            this.email = await this.stateService.getEmail();
        }
    }
 }
--- a/src/app/settings/two-factor-setup.component.ts
+++ b/src/app/settings/two-factor-setup.component.ts
@@ -9,7 +9,7 @@ import {
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { TwoFactorProviders } from 'jslib-common/services/auth.service';

@@ -46,12 +46,12 @@ export class TwoFactorSetupComponent implements OnInit {
    loading = true;
    modal: ModalRef;

-    constructor(protected apiService: ApiService, protected userService: UserService,
-        protected modalService: ModalService, protected messagingService: MessagingService,
-        protected policyService: PolicyService) { }
+    constructor(protected apiService: ApiService, protected modalService: ModalService,
+        protected messagingService: MessagingService, protected policyService: PolicyService,
+        private stateService: StateService) { }

    async ngOnInit() {
-        this.canAccessPremium = await this.userService.canAccessPremium();
+        this.canAccessPremium = await this.stateService.getCanAccessPremium();

        for (const key in TwoFactorProviders) {
            if (!TwoFactorProviders.hasOwnProperty(key)) {