From 34a766f346d829a15e348038a12c0c1aefb17457 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Fri, 24 May 2024 17:17:24 +0200 Subject: [PATCH] [PM-7178] Update about and more-from-bitwarden pages [UI changes] (#9322) * Remove button to launch contact form from about-page * Remove button to launch community forums from about-page * Create about-page-v2 component Copy existing about-page.component Add missing imports as page is marked as standalone Add popup-page and -header Migrate navigation items to use bit-items and bit-item-content Route to new page when feature flag enabled * Create more-from-bitwarden-page-v2 component Copy existing more-from-bitwarden-page.component Add missing imports as page is marked as standalone Add popup-page and -header Migrate navigation items to use bit-items and bit-item-content Route to new page when feature flag enabled * Add speedbump for rate the extension button --------- Co-authored-by: Daniel James Smith --- apps/browser/src/_locales/en/messages.json | 6 ++ apps/browser/src/popup/app-routing.module.ts | 12 +-- .../about-page/about-page-v2.component.html | 40 +++++++ .../about-page/about-page-v2.component.ts | 94 ++++++++++++++++ .../about-page/about-page.component.html | 18 ---- .../about-page/about-page.component.ts | 20 ++-- ...more-from-bitwarden-page-v2.component.html | 46 ++++++++ .../more-from-bitwarden-page-v2.component.ts | 101 ++++++++++++++++++ 8 files changed, 303 insertions(+), 34 deletions(-) create mode 100644 apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html create mode 100644 apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts create mode 100644 apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html create mode 100644 apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index dd9b7b320d..2c6741a967 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -181,6 +181,12 @@ "continueToHelpCenterDesc": { "message": "Learn more about how to use Bitwarden on the Help Center." }, + "continueToBrowserExtensionStore": { + "message": "Continue to browser extension store?" + }, + "continueToBrowserExtensionStoreDesc": { + "message": "Help others find out if Bitwarden is right for them. Visit your browser's extension store and leave a rating now." + }, "changeMasterPasswordOnWebConfirmation": { "message": "You can change your master password on the Bitwarden web app." }, diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index deafbb9753..3750456833 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -36,7 +36,9 @@ import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/pass import { SendAddEditComponent } from "../tools/popup/send/send-add-edit.component"; import { SendGroupingsComponent } from "../tools/popup/send/send-groupings.component"; import { SendTypeComponent } from "../tools/popup/send/send-type.component"; +import { AboutPageV2Component } from "../tools/popup/settings/about-page/about-page-v2.component"; import { AboutPageComponent } from "../tools/popup/settings/about-page/about-page.component"; +import { MoreFromBitwardenPageV2Component } from "../tools/popup/settings/about-page/more-from-bitwarden-page-v2.component"; import { MoreFromBitwardenPageComponent } from "../tools/popup/settings/about-page/more-from-bitwarden-page.component"; import { ExportComponent } from "../tools/popup/settings/export.component"; import { ImportBrowserComponent } from "../tools/popup/settings/import/import-browser.component"; @@ -349,18 +351,16 @@ const routes: Routes = [ canActivate: [AuthGuard], data: { state: "update-temp-password" }, }, - { + ...extensionRefreshSwap(AboutPageComponent, AboutPageV2Component, { path: "about", - component: AboutPageComponent, canActivate: [AuthGuard], data: { state: "about" }, - }, - { + }), + ...extensionRefreshSwap(MoreFromBitwardenPageComponent, MoreFromBitwardenPageV2Component, { path: "more-from-bitwarden", - component: MoreFromBitwardenPageComponent, canActivate: [AuthGuard], data: { state: "moreFromBitwarden" }, - }, + }), ...extensionRefreshSwap(TabsComponent, TabsV2Component, { path: "tabs", data: { state: "tabs" }, diff --git a/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html b/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html new file mode 100644 index 0000000000..dffb3612c3 --- /dev/null +++ b/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + {{ "moreFromBitwarden" | i18n }} + + + + + + + + diff --git a/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts b/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts new file mode 100644 index 0000000000..1d0d421843 --- /dev/null +++ b/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts @@ -0,0 +1,94 @@ +import { CommonModule } from "@angular/common"; +import { Component } from "@angular/core"; +import { RouterModule } from "@angular/router"; +import { firstValueFrom } from "rxjs"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { DeviceType } from "@bitwarden/common/enums"; +import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; +import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { DialogService, ItemModule } from "@bitwarden/components"; + +import { BrowserApi } from "../../../../platform/browser/browser-api"; +import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component"; +import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component"; +import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component"; +import { AboutDialogComponent } from "../about-dialog/about-dialog.component"; + +const RateUrls = { + [DeviceType.ChromeExtension]: + "https://chromewebstore.google.com/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews", + [DeviceType.FirefoxExtension]: + "https://addons.mozilla.org/en-US/firefox/addon/bitwarden-password-manager/#reviews", + [DeviceType.OperaExtension]: + "https://addons.opera.com/en/extensions/details/bitwarden-free-password-manager/#feedback-container", + [DeviceType.EdgeExtension]: + "https://microsoftedge.microsoft.com/addons/detail/jbkfoedolllekgbhcbcoahefnbanhhlh", + [DeviceType.VivaldiExtension]: + "https://chromewebstore.google.com/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews", + [DeviceType.SafariExtension]: "https://apps.apple.com/app/bitwarden/id1352778147", +}; + +@Component({ + templateUrl: "about-page-v2.component.html", + standalone: true, + imports: [ + CommonModule, + JslibModule, + RouterModule, + PopupPageComponent, + PopupHeaderComponent, + PopOutComponent, + ItemModule, + ], +}) +export class AboutPageV2Component { + constructor( + private dialogService: DialogService, + private environmentService: EnvironmentService, + private platformUtilsService: PlatformUtilsService, + ) {} + + about() { + this.dialogService.open(AboutDialogComponent); + } + + async launchHelp() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToHelpCenter" }, + content: { key: "continueToHelpCenterDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + await BrowserApi.createNewTab("https://bitwarden.com/help/"); + } + } + + async openWebVault() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToWebApp" }, + content: { key: "continueToWebAppDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + const env = await firstValueFrom(this.environmentService.environment$); + const url = env.getWebVaultUrl(); + await BrowserApi.createNewTab(url); + } + } + + async rate() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToBrowserExtensionStore" }, + content: { key: "continueToBrowserExtensionStoreDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + const deviceType = this.platformUtilsService.getDevice(); + await BrowserApi.createNewTab((RateUrls as any)[deviceType]); + } + } +} diff --git a/apps/browser/src/tools/popup/settings/about-page/about-page.component.html b/apps/browser/src/tools/popup/settings/about-page/about-page.component.html index 3ab41cee11..7537c75bd9 100644 --- a/apps/browser/src/tools/popup/settings/about-page/about-page.component.html +++ b/apps/browser/src/tools/popup/settings/about-page/about-page.component.html @@ -41,24 +41,6 @@
{{ "bitWebVaultApp" | i18n }}
- - + + + + + + + + + + + + + + + diff --git a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts new file mode 100644 index 0000000000..64ada94c92 --- /dev/null +++ b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts @@ -0,0 +1,101 @@ +import { CommonModule } from "@angular/common"; +import { Component } from "@angular/core"; +import { RouterModule } from "@angular/router"; +import { Observable, firstValueFrom } from "rxjs"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; +import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; +import { DialogService, ItemModule } from "@bitwarden/components"; + +import { BrowserApi } from "../../../../platform/browser/browser-api"; +import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component"; +import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component"; +import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component"; + +@Component({ + templateUrl: "more-from-bitwarden-page-v2.component.html", + standalone: true, + imports: [ + CommonModule, + JslibModule, + RouterModule, + PopupPageComponent, + PopupHeaderComponent, + PopOutComponent, + ItemModule, + ], +}) +export class MoreFromBitwardenPageV2Component { + canAccessPremium$: Observable; + + constructor( + private dialogService: DialogService, + billingAccountProfileStateService: BillingAccountProfileStateService, + private environmentService: EnvironmentService, + ) { + this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$; + } + + async openFreeBitwardenFamiliesPage() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToWebApp" }, + content: { key: "freeBitwardenFamiliesPageDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + const env = await firstValueFrom(this.environmentService.environment$); + const url = env.getWebVaultUrl(); + await BrowserApi.createNewTab(url + "/#/settings/sponsored-families"); + } + } + + async openBitwardenForBusinessPage() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToBitwardenDotCom" }, + content: { key: "bitwardenForBusinessPageDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + await BrowserApi.createNewTab("https://bitwarden.com/products/business/"); + } + } + + async openAuthenticatorPage() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToBitwardenDotCom" }, + content: { key: "continueToAuthenticatorPageDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + await BrowserApi.createNewTab("https://bitwarden.com/products/authenticator"); + } + } + + async openSecretsManagerPage() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToBitwardenDotCom" }, + content: { key: "continueToSecretsManagerPageDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + await BrowserApi.createNewTab("https://bitwarden.com/products/secrets-manager"); + } + } + + async openPasswordlessDotDevPage() { + const confirmed = await this.dialogService.openSimpleDialog({ + title: { key: "continueToBitwardenDotCom" }, + content: { key: "continueToPasswordlessDotDevPageDesc" }, + type: "info", + acceptButtonText: { key: "continue" }, + }); + if (confirmed) { + await BrowserApi.createNewTab("https://bitwarden.com/products/passwordless"); + } + } +}