apply settings with state service.

src/app/accounts/settings.component.html

@@ -9,7 +9,8 @@
                     <div class="box-content box-content-padded">
                         <div class="form-group">
                             <label for="lockOption">{{'lockOptions' | i18n}}</label>
-                            <select id="lockOption" name="LockOption" [(ngModel)]="lockOption" (change)="save()">
+                            <select id="lockOption" name="LockOption" [(ngModel)]="lockOption"
+                                    (change)="saveLockOption()">
                                 <option *ngFor="let o of lockOptions" [ngValue]="o.value">{{o.name}}</option>
                             </select>
                             <small class="help-block">{{'lockOptionsDesc' | i18n}}</small>
@@ -25,7 +26,7 @@
                             <div class="checkbox">
                                 <label for="disableGa">
                                     <input id="disableGa" type="checkbox" name="DisableAnalytics"
-                                           [(ngModel)]="disableGa" (change)="save()">
+                                           [(ngModel)]="disableGa" (change)="saveGa()">
                                     {{'disableGa' | i18n}}
                                 </label>
                             </div>
@@ -33,9 +34,9 @@
                         </div>
                         <div class="form-group">
                             <div class="checkbox">
-                                <label for="disableFavicon">
+                                <label for="disableFavicons">
-                                    <input id="disableFavicon" type="checkbox" name="DisableFavicon"
+                                    <input id="disableFavicons" type="checkbox" name="DisableFavicons"
-                                           [(ngModel)]="disableFavicons" (change)="save()">
+                                           [(ngModel)]="disableFavicons" (change)="saveFavicons()">
                                     {{'disableFavicon' | i18n}}
                                 </label>
                             </div>

src/app/accounts/settings.component.ts

@@ -10,7 +10,9 @@ import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { LockService } from 'jslib/abstractions/lock.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { ConstantsService } from 'jslib/services/constants.service';
@@ -27,7 +29,8 @@ export class SettingsComponent implements OnInit {
 
     constructor(private analytics: Angulartics2, private toasterService: ToasterService,
         private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
-        private storageService: StorageService, private lockService: LockService) {
+        private storageService: StorageService, private lockService: LockService,
+        private stateService: StateService, private messagingService: MessagingService) {
         this.lockOptions = [
             // { name: i18nService.t('immediately'), value: 0 },
             { name: i18nService.t('oneMinute'), value: 1 },
@@ -50,9 +53,29 @@ export class SettingsComponent implements OnInit {
         this.disableFavicons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
     }
 
-    async save() {
+    async saveLockOption() {
         await this.lockService.setLockOption(this.lockOption != null ? this.lockOption : null);
+    }
+
+    async saveGa() {
+        if (this.disableGa) {
+            this.callAnalytics('Analytics', !this.disableGa);
+        }
         await this.storageService.save(ConstantsService.disableGaKey, this.disableGa);
+        if (!this.disableGa) {
+            this.callAnalytics('Analytics', !this.disableGa);
+        }
+    }
+
+    async saveFavicons() {
         await this.storageService.save(ConstantsService.disableFaviconKey, this.disableFavicons);
+        await this.stateService.save(ConstantsService.disableFaviconKey, this.disableFavicons);
+        this.messagingService.send('refreshCiphers');
+        this.callAnalytics('Favicons', !this.disableGa);
+    }
+
+    private callAnalytics(name: string, enabled: boolean) {
+        const status = enabled ? 'Enabled' : 'Disabled';
+        this.analytics.eventTrack.next({ action: `${status} ${name}` });
     }
 }

src/app/services/services.module.ts

@@ -33,6 +33,7 @@ import {
     LockService,
     PasswordGenerationService,
     SettingsService,
+    StateService,
     SyncService,
     TokenService,
     TotpService,
@@ -55,6 +56,7 @@ import {
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
     PlatformUtilsService as PlatformUtilsServiceAbstraction,
     SettingsService as SettingsServiceAbstraction,
+    StateService as StateServiceAbstraction,
     StorageService as StorageServiceAbstraction,
     SyncService as SyncServiceAbstraction,
     TokenService as TokenServiceAbstraction,
@@ -67,6 +69,7 @@ webFrame.registerURLSchemeAsPrivileged('file');
 
 const i18nService = new I18nService(window.navigator.language, './locales');
 const utilsService = new UtilsService();
+const stateService = new StateService();
 const platformUtilsService = new DesktopPlatformUtilsService(i18nService);
 const broadcasterService = new BroadcasterService();
 const messagingService = new DesktopRendererMessagingService(broadcasterService);
@@ -111,6 +114,8 @@ function initFactory(i18n: I18nService, platformUtils: DesktopPlatformUtilsServi
         const htmlEl = window.document.documentElement;
         htmlEl.classList.add('os_' + platformUtils.getDeviceString());
         htmlEl.classList.add('locale_' + i18n.translationLocale);
+        stateService.save(ConstantsService.disableFaviconKey,
+            await storageService.get<boolean>(ConstantsService.disableFaviconKey));
     };
 }
 
@@ -142,6 +147,7 @@ function initFactory(i18n: I18nService, platformUtils: DesktopPlatformUtilsServi
         { provide: SettingsServiceAbstraction, useValue: settingsService },
         { provide: LockServiceAbstraction, useValue: lockService },
         { provide: StorageServiceAbstraction, useValue: storageService },
+        { provide: StateServiceAbstraction, useValue: stateService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/vault/ciphers.component.ts

@@ -42,6 +42,8 @@ export class CiphersComponent {
     }
 
     async refresh() {
+        this.loaded = false;
+        this.ciphers = [];
         await this.load(this.filter);
     }
 

src/app/vault/icon.component.ts

@@ -9,6 +9,9 @@ import {
 import { CipherType } from 'jslib/enums/cipherType';
 
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { StateService } from 'jslib/abstractions/state.service';
+
+import { ConstantsService } from 'jslib/services/constants.service';
 
 @Component({
     selector: 'app-vault-icon',
@@ -23,9 +26,7 @@ export class IconComponent implements OnChanges {
 
     private iconsUrl: string;
 
-    constructor(private environmentService: EnvironmentService) {
+    constructor(private environmentService: EnvironmentService, private stateService: StateService) {
-        this.imageEnabled = true; // TODO
-
         this.iconsUrl = environmentService.iconsUrl;
         if (!this.iconsUrl) {
             if (environmentService.baseUrl) {
@@ -36,7 +37,9 @@ export class IconComponent implements OnChanges {
         }
     }
 
-    ngOnChanges() {
+    async ngOnChanges() {
+        this.imageEnabled = !(await this.stateService.get<boolean>(ConstantsService.disableFaviconKey));
+
         switch (this.cipher.type) {
             case CipherType.Login:
                 this.icon = 'fa-globe';

src/app/vault/vault.component.ts

@@ -129,6 +129,9 @@ export class VaultComponent implements OnInit, OnDestroy {
                             await this.load();
                         }
                         break;
+                    case 'refreshCiphers':
+                        this.ciphersComponent.refresh();
+                        break;
                     default:
                         detectChanges = false;
                         break;