From 37d409578afba1023342e1315149b581eb3b21c0 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Wed, 8 May 2024 21:04:41 +0200 Subject: [PATCH] [PM-7740] Create notifications settings component (navigational changes) (#8919) * Move about.component into tools ownership * Split out account security settings Move settings.component.ts to auth/popup/settings and rename to account-security.component.ts Move controls from settings.component.html and create account-security.component.html Move settings.component.html to tools/popup/settings.component.html Create settings.component.ts under tools/popup/settings Fixup module imports and routing Add new strings to en/message.json * Move vault-timeout-input.component to auth * Move await-desktop-dialog.component to auth * Add transition for account-security * Create notifications settings component * Move excluded-domains component over to be owned by team-autofill * Add notifications entry to settings screen * Move excluded domains from settings to notifications settings screen --------- Co-authored-by: Daniel James Smith --- apps/browser/src/_locales/en/messages.json | 3 + .../settings/excluded-domains.component.html | 2 +- .../settings/excluded-domains.component.ts | 4 +- .../settings/notifications.component.html | 89 +++++++++++++++++++ .../popup/settings/notifications.component.ts | 53 +++++++++++ .../src/popup/app-routing.animations.ts | 10 ++- apps/browser/src/popup/app-routing.module.ts | 9 +- apps/browser/src/popup/app.module.ts | 4 +- .../popup/settings/settings.component.html | 8 +- 9 files changed, 170 insertions(+), 12 deletions(-) rename apps/browser/src/{ => autofill}/popup/settings/excluded-domains.component.html (98%) rename apps/browser/src/{ => autofill}/popup/settings/excluded-domains.component.ts (97%) create mode 100644 apps/browser/src/autofill/popup/settings/notifications.component.html create mode 100644 apps/browser/src/autofill/popup/settings/notifications.component.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index fcc80e5ff7..9360524da1 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -3035,6 +3035,9 @@ "accountSecurity": { "message": "Account security" }, + "notifications": { + "message": "Notifications" + }, "appearance": { "message": "Appearance" }, diff --git a/apps/browser/src/popup/settings/excluded-domains.component.html b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html similarity index 98% rename from apps/browser/src/popup/settings/excluded-domains.component.html rename to apps/browser/src/autofill/popup/settings/excluded-domains.component.html index 652eb4aef0..8f78ac1640 100644 --- a/apps/browser/src/popup/settings/excluded-domains.component.html +++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html @@ -1,7 +1,7 @@
- diff --git a/apps/browser/src/popup/settings/excluded-domains.component.ts b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts similarity index 97% rename from apps/browser/src/popup/settings/excluded-domains.component.ts rename to apps/browser/src/autofill/popup/settings/excluded-domains.component.ts index 1741fbaa65..5dad991dfa 100644 --- a/apps/browser/src/popup/settings/excluded-domains.component.ts +++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts @@ -8,8 +8,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { Utils } from "@bitwarden/common/platform/misc/utils"; -import { BrowserApi } from "../../platform/browser/browser-api"; -import { enableAccountSwitching } from "../../platform/flags"; +import { BrowserApi } from "../../../platform/browser/browser-api"; +import { enableAccountSwitching } from "../../../platform/flags"; interface ExcludedDomain { uri: string; diff --git a/apps/browser/src/autofill/popup/settings/notifications.component.html b/apps/browser/src/autofill/popup/settings/notifications.component.html new file mode 100644 index 0000000000..89d83c9e48 --- /dev/null +++ b/apps/browser/src/autofill/popup/settings/notifications.component.html @@ -0,0 +1,89 @@ +
+
+ +
+

+ {{ "notifications" | i18n }} +

+
+ +
+
+
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+ +
+
+
diff --git a/apps/browser/src/autofill/popup/settings/notifications.component.ts b/apps/browser/src/autofill/popup/settings/notifications.component.ts new file mode 100644 index 0000000000..8e09219275 --- /dev/null +++ b/apps/browser/src/autofill/popup/settings/notifications.component.ts @@ -0,0 +1,53 @@ +import { Component, OnInit } from "@angular/core"; +import { firstValueFrom } from "rxjs"; + +import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service"; +import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; + +import { enableAccountSwitching } from "../../../platform/flags"; + +@Component({ + selector: "autofill-notification-settings", + templateUrl: "notifications.component.html", +}) +export class NotifcationsSettingsComponent implements OnInit { + enableAddLoginNotification = false; + enableChangedPasswordNotification = false; + enablePasskeys = true; + accountSwitcherEnabled = false; + + constructor( + private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction, + private vaultSettingsService: VaultSettingsService, + ) { + this.accountSwitcherEnabled = enableAccountSwitching(); + } + + async ngOnInit() { + this.enableAddLoginNotification = await firstValueFrom( + this.userNotificationSettingsService.enableAddedLoginPrompt$, + ); + + this.enableChangedPasswordNotification = await firstValueFrom( + this.userNotificationSettingsService.enableChangedPasswordPrompt$, + ); + + this.enablePasskeys = await firstValueFrom(this.vaultSettingsService.enablePasskeys$); + } + + async updateAddLoginNotification() { + await this.userNotificationSettingsService.setEnableAddedLoginPrompt( + this.enableAddLoginNotification, + ); + } + + async updateChangedPasswordNotification() { + await this.userNotificationSettingsService.setEnableChangedPasswordPrompt( + this.enableChangedPasswordNotification, + ); + } + + async updateEnablePasskeys() { + await this.vaultSettingsService.setEnablePasskeys(this.enablePasskeys); + } +} diff --git a/apps/browser/src/popup/app-routing.animations.ts b/apps/browser/src/popup/app-routing.animations.ts index 55d2687a43..96e5dbbe37 100644 --- a/apps/browser/src/popup/app-routing.animations.ts +++ b/apps/browser/src/popup/app-routing.animations.ts @@ -196,9 +196,6 @@ export const routerTransition = trigger("routerTransition", [ transition("vault-settings => sync", inSlideLeft), transition("sync => vault-settings", outSlideRight), - transition("tabs => excluded-domains", inSlideLeft), - transition("excluded-domains => tabs", outSlideRight), - transition("tabs => options", inSlideLeft), transition("options => tabs", outSlideRight), @@ -223,6 +220,13 @@ export const routerTransition = trigger("routerTransition", [ transition("tabs => edit-send, send-type => edit-send", inSlideUp), transition("edit-send => tabs, edit-send => send-type", outSlideDown), + // Notification settings + transition("tabs => notifications", inSlideLeft), + transition("notifications => tabs", outSlideRight), + + transition("notifications => excluded-domains", inSlideLeft), + transition("excluded-domains => notifications", outSlideRight), + transition("tabs => autofill", inSlideLeft), transition("autofill => tabs", outSlideRight), diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index 8fb397fe24..1db2f92d3e 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -27,6 +27,8 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp import { TwoFactorComponent } from "../auth/popup/two-factor.component"; import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component"; import { AutofillComponent } from "../autofill/popup/settings/autofill.component"; +import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component"; +import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component"; import { PremiumComponent } from "../billing/popup/settings/premium.component"; import BrowserPopupUtils from "../platform/popup/browser-popup-utils"; import { GeneratorComponent } from "../tools/popup/generator/generator.component"; @@ -56,7 +58,6 @@ import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.c import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils"; import { debounceNavigationGuard } from "./services/debounce-navigation.service"; -import { ExcludedDomainsComponent } from "./settings/excluded-domains.component"; import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component"; import { OptionsComponent } from "./settings/options.component"; import { TabsV2Component } from "./tabs-v2.component"; @@ -256,6 +257,12 @@ const routes: Routes = [ canActivate: [AuthGuard], data: { state: "account-security" }, }, + { + path: "notifications", + component: NotifcationsSettingsComponent, + canActivate: [AuthGuard], + data: { state: "notifications" }, + }, { path: "vault-settings", component: VaultSettingsComponent, diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index 4a310027c1..cbc711f107 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -37,6 +37,8 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp import { TwoFactorComponent } from "../auth/popup/two-factor.component"; import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component"; import { AutofillComponent } from "../autofill/popup/settings/autofill.component"; +import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component"; +import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component"; import { PremiumComponent } from "../billing/popup/settings/premium.component"; import { HeaderComponent } from "../platform/popup/header.component"; import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component"; @@ -81,7 +83,6 @@ import { AppComponent } from "./app.component"; import { PopOutComponent } from "./components/pop-out.component"; import { UserVerificationComponent } from "./components/user-verification.component"; import { ServicesModule } from "./services/services.module"; -import { ExcludedDomainsComponent } from "./settings/excluded-domains.component"; import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component"; import { OptionsComponent } from "./settings/options.component"; import { TabsV2Component } from "./tabs-v2.component"; @@ -149,6 +150,7 @@ import "../platform/popup/locales"; LoginViaAuthRequestComponent, LoginDecryptionOptionsComponent, OptionsComponent, + NotifcationsSettingsComponent, AppearanceComponent, GeneratorComponent, PasswordGeneratorHistoryComponent, diff --git a/apps/browser/src/tools/popup/settings/settings.component.html b/apps/browser/src/tools/popup/settings/settings.component.html index 997bc557b6..7506a07da5 100644 --- a/apps/browser/src/tools/popup/settings/settings.component.html +++ b/apps/browser/src/tools/popup/settings/settings.component.html @@ -30,17 +30,17 @@