settings -> options page

src/popup/app-routing.animations.ts

@@ -140,6 +140,9 @@ export const routerTransition = trigger('routerTransition', [
     transition('tabs => sync', inSlideLeft),
     transition('sync => tabs', outSlideRight),
 
+    transition('tabs => options', inSlideLeft),
+    transition('options => tabs', outSlideRight),
+
     transition('tabs => premium', inSlideLeft),
     transition('premium => tabs', outSlideRight),
 ]);

src/popup/app-routing.module.ts

@@ -21,6 +21,7 @@ import { PasswordGeneratorComponent } from './generator/password-generator.compo
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
+import { OptionsComponent } from './settings/options.component';
 import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
@@ -168,6 +169,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'premium' },
     },
+    {
+        path: 'options',
+        component: OptionsComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'options' },
+    },
     {
         path: 'tabs',
         component: TabsComponent,

src/popup/app.module.ts

@@ -29,6 +29,7 @@ import { PasswordGeneratorComponent } from './generator/password-generator.compo
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
+import { OptionsComponent } from './settings/options.component';
 import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
@@ -96,6 +97,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         IconComponent,
         LockComponent,
         LoginComponent,
+        OptionsComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
         PopOutComponent,

src/popup/settings/options.component.html

@@ -0,0 +1,74 @@
+<header>
+    <div class="left">
+        <a routerLink="/tabs/settings">
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+            <span>{{'back' | i18n}}</span>
+        </a>
+    </div>
+    <div class="center">
+        <span class="title">{{'options' | i18n}}</span>
+    </div>
+    <div class="right"></div>
+</header>
+<content>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="autofill">{{'enableAutoFillOnPageLoad' | i18n}}</label>
+                <input id="autofill" type="checkbox" (change)="updateAutoFillOnPageLoad()"
+                       [(ngModel)]="enableAutoFillOnPageLoad">
+            </div>
+        </div>
+        <div class="box-footer">
+            {{'enableAutoFillOnPageLoadDesc' | i18n}}
+            <b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
+        </div>
+    </div>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="totp">{{'disableAutoTotpCopy' | i18n}}</label>
+                <input id="totp" type="checkbox" (change)="updateAutoTotpCopy()" [(ngModel)]="disableAutoTotpCopy">
+            </div>
+        </div>
+        <div class="box-footer">{{'disableAutoTotpCopyDesc' | i18n}}</div>
+    </div>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="ga">{{'disableGa' | i18n}}</label>
+                <input id="ga" type="checkbox" (change)="saveGa()" [(ngModel)]="disableGa">
+            </div>
+        </div>
+        <div class="box-footer">{{'gaDesc' | i18n}}</div>
+    </div>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="notification-bar">{{'disableAddLoginNotification' | i18n}}</label>
+                <input id="notification-bar" type="checkbox" (change)="updateAddLoginNotification()"
+                       [(ngModel)]="disableAddLoginNotification">
+            </div>
+        </div>
+        <div class="box-footer">{{'addLoginNotificationDesc' | i18n}}</div>
+    </div>
+    <div class="box" *ngIf="showDisableContextMenu">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="context-menu">{{'disableContextMenuItem' | i18n}}</label>
+                <input id="context-menu" type="checkbox" (change)="updateDisableContextMenuItem()"
+                       [(ngModel)]="disableContextMenuItem">
+            </div>
+        </div>
+        <div class="box-footer">{{'disableContextMenuItemDesc' | i18n}}</div>
+    </div>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="favicon">{{'disableFavicon' | i18n}}</label>
+                <input id="favicon" type="checkbox" (change)="updateDisableFavicon()" [(ngModel)]="disableFavicon">
+            </div>
+        </div>
+        <div class="box-footer">{{'disableFaviconDesc' | i18n}}</div>
+    </div>
+</content>

src/popup/settings/options.component.ts

@@ -0,0 +1,97 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { Angulartics2 } from 'angulartics2';
+
+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 { TotpService } from 'jslib/abstractions/totp.service';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+@Component({
+    selector: 'app-options',
+    templateUrl: 'options.component.html',
+})
+export class OptionsComponent implements OnInit {
+    disableFavicon = false;
+    enableAutoFillOnPageLoad = false;
+    disableAutoTotpCopy = false;
+    disableContextMenuItem = false;
+    disableAddLoginNotification = false;
+    showDisableContextMenu = true;
+    disableGa = false;
+
+    constructor(private analytics: Angulartics2, private messagingService: MessagingService,
+        private platformUtilsService: PlatformUtilsService, private storageService: StorageService,
+        private stateService: StateService, private totpService: TotpService) { }
+
+    async ngOnInit() {
+        this.showDisableContextMenu = !this.platformUtilsService.isSafari();
+
+        this.enableAutoFillOnPageLoad = await this.storageService.get<boolean>(
+            ConstantsService.enableAutoFillOnPageLoadKey);
+
+        const disableGa = await this.storageService.get<boolean>(ConstantsService.disableGaKey);
+        const disableGaByDefault = this.platformUtilsService.isFirefox();
+        this.disableGa = disableGa || (disableGa == null && disableGaByDefault);
+
+        this.disableAddLoginNotification = await this.storageService.get<boolean>(
+            ConstantsService.disableAddLoginNotificationKey);
+
+        this.disableContextMenuItem = await this.storageService.get<boolean>(
+            ConstantsService.disableContextMenuItemKey);
+
+        this.disableAutoTotpCopy = !await this.totpService.isAutoCopyEnabled();
+
+        this.disableFavicon = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
+    }
+
+    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 updateAddLoginNotification() {
+        await this.storageService.save(ConstantsService.disableAddLoginNotificationKey,
+            this.disableAddLoginNotification);
+        this.callAnalytics('Add Login Notification', !this.disableAddLoginNotification);
+    }
+
+    async updateDisableContextMenuItem() {
+        await this.storageService.save(ConstantsService.disableContextMenuItemKey,
+            this.disableContextMenuItem);
+        this.messagingService.send('bgUpdateContextMenu');
+        this.callAnalytics('Context Menu Item', !this.disableContextMenuItem);
+    }
+
+    async updateAutoTotpCopy() {
+        await this.storageService.save(ConstantsService.disableAutoTotpCopyKey, this.disableAutoTotpCopy);
+        this.callAnalytics('Auto Copy TOTP', !this.disableAutoTotpCopy);
+    }
+
+    async updateAutoFillOnPageLoad() {
+        await this.storageService.save(ConstantsService.enableAutoFillOnPageLoadKey, this.enableAutoFillOnPageLoad);
+        this.callAnalytics('Auto-fill Page Load', this.enableAutoFillOnPageLoad);
+    }
+
+    async updateDisableFavicon() {
+        await this.storageService.save(ConstantsService.disableFaviconKey, this.disableFavicon);
+        await this.stateService.save(ConstantsService.disableFaviconKey, this.disableFavicon);
+        this.callAnalytics('Favicon', !this.disableFavicon);
+    }
+
+    private callAnalytics(name: string, enabled: boolean) {
+        const status = enabled ? 'Enabled' : 'Disabled';
+        this.analytics.eventTrack.next({ action: `${status} ${name}` });
+    }
+}