diff --git a/src/popup/app-routing.animations.ts b/src/popup/app-routing.animations.ts index 20db8a9269..04c09afb1b 100644 --- a/src/popup/app-routing.animations.ts +++ b/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), ]); diff --git a/src/popup/app-routing.module.ts b/src/popup/app-routing.module.ts index f6abfc2eeb..e991f1b6cd 100644 --- a/src/popup/app-routing.module.ts +++ b/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, diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index 8626918937..a5ac551e70 100644 --- a/src/popup/app.module.ts +++ b/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, diff --git a/src/popup/settings/options.component.html b/src/popup/settings/options.component.html new file mode 100644 index 0000000000..961ac649ea --- /dev/null +++ b/src/popup/settings/options.component.html @@ -0,0 +1,74 @@ +
+
+ + + {{'back' | i18n}} + +
+
+ {{'options' | i18n}} +
+
+
+ +
+
+
+ + +
+
+
+ {{'enableAutoFillOnPageLoadDesc' | i18n}} + {{'warning' | i18n}}: {{'experimentalFeature' | i18n}} +
+
+
+
+
+ + +
+
+
{{'disableAutoTotpCopyDesc' | i18n}}
+
+
+
+
+ + +
+
+
{{'gaDesc' | i18n}}
+
+
+
+
+ + +
+
+
{{'addLoginNotificationDesc' | i18n}}
+
+
+
+
+ + +
+
+
{{'disableContextMenuItemDesc' | i18n}}
+
+
+
+
+ + +
+
+
{{'disableFaviconDesc' | i18n}}
+
+ diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts new file mode 100644 index 0000000000..452ac12fda --- /dev/null +++ b/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( + ConstantsService.enableAutoFillOnPageLoadKey); + + const disableGa = await this.storageService.get(ConstantsService.disableGaKey); + const disableGaByDefault = this.platformUtilsService.isFirefox(); + this.disableGa = disableGa || (disableGa == null && disableGaByDefault); + + this.disableAddLoginNotification = await this.storageService.get( + ConstantsService.disableAddLoginNotificationKey); + + this.disableContextMenuItem = await this.storageService.get( + ConstantsService.disableContextMenuItemKey); + + this.disableAutoTotpCopy = !await this.totpService.isAutoCopyEnabled(); + + this.disableFavicon = await this.storageService.get(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}` }); + } +}