diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index 1db2f92d3e5..a65abef0845 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -54,6 +54,7 @@ import { AppearanceComponent } from "../vault/popup/settings/appearance.componen 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 { VaultSettingsV2Component } from "../vault/popup/settings/vault-settings-v2.component"; import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component"; import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils"; @@ -263,12 +264,11 @@ const routes: Routes = [ canActivate: [AuthGuard], data: { state: "notifications" }, }, - { + ...extensionRefreshSwap(VaultSettingsComponent, VaultSettingsV2Component, { path: "vault-settings", - component: VaultSettingsComponent, canActivate: [AuthGuard], data: { state: "vault-settings" }, - }, + }), { path: "folders", component: FoldersComponent, diff --git a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html new file mode 100644 index 00000000000..10243bdaa9f --- /dev/null +++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html @@ -0,0 +1,35 @@ + + + + + + + + + + + {{ "folders" | i18n }} + + + + + + + + + {{ "exportVault" | i18n }} + + + + + + + + diff --git a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts new file mode 100644 index 00000000000..c969f0436df --- /dev/null +++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts @@ -0,0 +1,76 @@ +import { CommonModule } from "@angular/common"; +import { Component, OnInit } from "@angular/core"; +import { Router, RouterModule } from "@angular/router"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction"; +import { ItemModule, ToastOptions, ToastService } from "@bitwarden/components"; + +import { BrowserApi } from "../../../platform/browser/browser-api"; +import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils"; +import { PopOutComponent } from "../../../platform/popup/components/pop-out.component"; +import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component"; +import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component"; +import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component"; + +@Component({ + templateUrl: "vault-settings-v2.component.html", + standalone: true, + imports: [ + CommonModule, + JslibModule, + RouterModule, + PopupPageComponent, + PopupFooterComponent, + PopupHeaderComponent, + PopOutComponent, + ItemModule, + ], +}) +export class VaultSettingsV2Component implements OnInit { + lastSync = "--"; + + constructor( + private router: Router, + private syncService: SyncService, + private toastService: ToastService, + private i18nService: I18nService, + ) {} + + async ngOnInit() { + await this.setLastSync(); + } + + async import() { + await this.router.navigate(["/import"]); + if (await BrowserApi.isPopupOpen()) { + await BrowserPopupUtils.openCurrentPagePopout(window); + } + } + + async sync() { + let toastConfig: ToastOptions; + const success = await this.syncService.fullSync(true); + if (success) { + await this.setLastSync(); + toastConfig = { + variant: "success", + title: "", + message: this.i18nService.t("syncingComplete"), + }; + } else { + toastConfig = { variant: "error", title: "", message: this.i18nService.t("syncingFailed") }; + } + this.toastService.showToast(toastConfig); + } + + private async setLastSync() { + const last = await this.syncService.getLastSync(); + if (last != null) { + this.lastSync = last.toLocaleDateString() + " " + last.toLocaleTimeString(); + } else { + this.lastSync = this.i18nService.t("never"); + } + } +}