From 5682e38384edbed20963b43a67f7d57b73376400 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Tue, 7 May 2024 23:58:31 +0200 Subject: [PATCH] [PM-7175] Create vault settings component (navigational changes) (#8840) * 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 * Move folder.component to vault/popup/settings * Move sync.component to vault/popup/settings * Create vault settings component Move controls from settings.component.html to vault-settings.component.html Register VaultSettingsComponent within app.module Register route for VaultSettingsComponent Add new string in en/messages.json * Fix routing for back navigation on child pages of vault settings * Add transitions to vault-settings sub-pages * Add transition for account-security * Add an await to popping out the extension * Use "Vault" instead of "Vault settings" as title --------- Co-authored-by: Daniel James Smith --- .../src/popup/app-routing.animations.ts | 20 ++++--- apps/browser/src/popup/app-routing.module.ts | 11 +++- apps/browser/src/popup/app.module.ts | 6 +- .../popup/settings/export.component.html | 2 +- .../import/import-browser.component.html | 2 +- .../popup/settings/settings.component.html | 33 +---------- .../popup/settings/folders.component.html | 2 +- .../popup/settings/folders.component.ts | 0 .../popup/settings/sync.component.html | 2 +- .../popup/settings/sync.component.ts | 0 .../settings/vault-settings.component.html | 56 +++++++++++++++++++ .../settings/vault-settings.component.ts | 25 +++++++++ 12 files changed, 112 insertions(+), 47 deletions(-) rename apps/browser/src/{ => vault}/popup/settings/folders.component.html (95%) rename apps/browser/src/{ => vault}/popup/settings/folders.component.ts (100%) rename apps/browser/src/{ => vault}/popup/settings/sync.component.html (94%) rename apps/browser/src/{ => vault}/popup/settings/sync.component.ts (100%) create mode 100644 apps/browser/src/vault/popup/settings/vault-settings.component.html create mode 100644 apps/browser/src/vault/popup/settings/vault-settings.component.ts diff --git a/apps/browser/src/popup/app-routing.animations.ts b/apps/browser/src/popup/app-routing.animations.ts index e37c640bf9..9bad33f744 100644 --- a/apps/browser/src/popup/app-routing.animations.ts +++ b/apps/browser/src/popup/app-routing.animations.ts @@ -177,20 +177,24 @@ export const routerTransition = trigger("routerTransition", [ transition("tabs => account-security", inSlideLeft), transition("account-security => tabs", outSlideRight), - transition("tabs => import", inSlideLeft), - transition("import => tabs", outSlideRight), + // Vault settings + transition("tabs => vault-settings", inSlideLeft), + transition("vault-settings => tabs", outSlideRight), - transition("tabs => export", inSlideLeft), - transition("export => tabs", outSlideRight), + transition("vault-settings => import", inSlideLeft), + transition("import => vault-settings", outSlideRight), - transition("tabs => folders", inSlideLeft), - transition("folders => tabs", outSlideRight), + transition("vault-settings => export", inSlideLeft), + transition("export => vault-settings", outSlideRight), + + transition("vault-settings => folders", inSlideLeft), + transition("folders => vault-settings", outSlideRight), transition("folders => edit-folder, folders => add-folder", inSlideUp), transition("edit-folder => folders, add-folder => folders", outSlideDown), - transition("tabs => sync", inSlideLeft), - transition("sync => tabs", outSlideRight), + transition("vault-settings => sync", inSlideLeft), + transition("sync => vault-settings", outSlideRight), transition("tabs => excluded-domains", inSlideLeft), transition("excluded-domains => tabs", outSlideRight), diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index 059e2e605d..c4e9acbd75 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -48,14 +48,15 @@ import { VaultFilterComponent } from "../vault/popup/components/vault/vault-filt import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items.component"; import { ViewComponent } from "../vault/popup/components/vault/view.component"; import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component"; +import { FoldersComponent } from "../vault/popup/settings/folders.component"; +import { SyncComponent } from "../vault/popup/settings/sync.component"; +import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component"; import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils"; import { debounceNavigationGuard } from "./services/debounce-navigation.service"; import { ExcludedDomainsComponent } from "./settings/excluded-domains.component"; -import { FoldersComponent } from "./settings/folders.component"; import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component"; import { OptionsComponent } from "./settings/options.component"; -import { SyncComponent } from "./settings/sync.component"; import { TabsV2Component } from "./tabs-v2.component"; import { TabsComponent } from "./tabs.component"; @@ -253,6 +254,12 @@ const routes: Routes = [ canActivate: [AuthGuard], data: { state: "account-security" }, }, + { + path: "vault-settings", + component: VaultSettingsComponent, + canActivate: [AuthGuard], + data: { state: "vault-settings" }, + }, { path: "folders", component: FoldersComponent, diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index 40cdd29754..71e6ed4f17 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -70,6 +70,9 @@ import { VaultSelectComponent } from "../vault/popup/components/vault/vault-sele import { ViewCustomFieldsComponent } from "../vault/popup/components/vault/view-custom-fields.component"; import { ViewComponent } from "../vault/popup/components/vault/view.component"; import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component"; +import { FoldersComponent } from "../vault/popup/settings/folders.component"; +import { SyncComponent } from "../vault/popup/settings/sync.component"; +import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component"; import { AppRoutingModule } from "./app-routing.module"; import { AppComponent } from "./app.component"; @@ -77,10 +80,8 @@ 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 { FoldersComponent } from "./settings/folders.component"; import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component"; import { OptionsComponent } from "./settings/options.component"; -import { SyncComponent } from "./settings/sync.component"; import { TabsV2Component } from "./tabs-v2.component"; import { TabsComponent } from "./tabs.component"; @@ -159,6 +160,7 @@ import "../platform/popup/locales"; SetPasswordComponent, AccountSecurityComponent, SettingsComponent, + VaultSettingsComponent, ShareComponent, SsoComponent, SyncComponent, diff --git a/apps/browser/src/tools/popup/settings/export.component.html b/apps/browser/src/tools/popup/settings/export.component.html index aae3584f6c..1b2ea1eb1d 100644 --- a/apps/browser/src/tools/popup/settings/export.component.html +++ b/apps/browser/src/tools/popup/settings/export.component.html @@ -1,7 +1,7 @@
- diff --git a/apps/browser/src/tools/popup/settings/import/import-browser.component.html b/apps/browser/src/tools/popup/settings/import/import-browser.component.html index df4f3f09aa..67b5eb348a 100644 --- a/apps/browser/src/tools/popup/settings/import/import-browser.component.html +++ b/apps/browser/src/tools/popup/settings/import/import-browser.component.html @@ -1,6 +1,6 @@
- diff --git a/apps/browser/src/tools/popup/settings/settings.component.html b/apps/browser/src/tools/popup/settings/settings.component.html index 0b7773019b..71f4f1b991 100644 --- a/apps/browser/src/tools/popup/settings/settings.component.html +++ b/apps/browser/src/tools/popup/settings/settings.component.html @@ -30,17 +30,9 @@ - - diff --git a/apps/browser/src/popup/settings/folders.component.ts b/apps/browser/src/vault/popup/settings/folders.component.ts similarity index 100% rename from apps/browser/src/popup/settings/folders.component.ts rename to apps/browser/src/vault/popup/settings/folders.component.ts diff --git a/apps/browser/src/popup/settings/sync.component.html b/apps/browser/src/vault/popup/settings/sync.component.html similarity index 94% rename from apps/browser/src/popup/settings/sync.component.html rename to apps/browser/src/vault/popup/settings/sync.component.html index 6743f12a1a..6d0a1c31a8 100644 --- a/apps/browser/src/popup/settings/sync.component.html +++ b/apps/browser/src/vault/popup/settings/sync.component.html @@ -1,6 +1,6 @@
- diff --git a/apps/browser/src/popup/settings/sync.component.ts b/apps/browser/src/vault/popup/settings/sync.component.ts similarity index 100% rename from apps/browser/src/popup/settings/sync.component.ts rename to apps/browser/src/vault/popup/settings/sync.component.ts diff --git a/apps/browser/src/vault/popup/settings/vault-settings.component.html b/apps/browser/src/vault/popup/settings/vault-settings.component.html new file mode 100644 index 0000000000..4928720e46 --- /dev/null +++ b/apps/browser/src/vault/popup/settings/vault-settings.component.html @@ -0,0 +1,56 @@ + +
+ +
+

+ {{ "vault" | i18n }} +

+
+ +
+ +
+
+
+ + + + +
+
+
diff --git a/apps/browser/src/vault/popup/settings/vault-settings.component.ts b/apps/browser/src/vault/popup/settings/vault-settings.component.ts new file mode 100644 index 0000000000..a12f6d1d5b --- /dev/null +++ b/apps/browser/src/vault/popup/settings/vault-settings.component.ts @@ -0,0 +1,25 @@ +import { Component } from "@angular/core"; +import { Router } from "@angular/router"; + +import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; + +import { BrowserApi } from "../../../platform/browser/browser-api"; +import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils"; + +@Component({ + selector: "vault-settings", + templateUrl: "vault-settings.component.html", +}) +export class VaultSettingsComponent { + constructor( + public messagingService: MessagingService, + private router: Router, + ) {} + + async import() { + await this.router.navigate(["/import"]); + if (await BrowserApi.isPopupOpen()) { + await BrowserPopupUtils.openCurrentPagePopout(window); + } + } +}