Skip to content

Commit

Permalink
[PM-7737] Create about-page and more-from-bitwarden page [Nav changes] (
Browse files Browse the repository at this point in the history
#9233)

* Move help-and-feedback to tools and rename to about-page

Moved help-and-feedback.component to ..tools
Renamed it to about-page
Changed the title to about
Changed the settings button to about
Updated routes
Updates transition animation

* Move button to open AboutDialog from settings to about-page

* Move launch web-vault to about-page

* Move rate extension from settings to about-page

* Fix no-floating-promises

* Remove icons from about-page entries

* Make about-page standalone

* Create MoreFromBitwardenPage component

Create new component
Add button to navigate to new component from about-page
Add routing for new component

* Add new speedbumps to help-center and web-app links

* Add link to Bitwarden Authenticator page

Include speedbump explaing some functionality about the the authenticator

* Add link to Secrets Manager page

Include speedbump explaining some functionality of Secrets Manager

* Add link to Passwordless.dev page

Include speedbump explaining some functionality of Passwordless.dev

* Move learnFromOrg over to more-from-bitwarden

Include speedbump that explains Bitwarden for business

* Clean-up settings.component

Some left-over clean-up from #8840
- Removing import and export methods

* Move premium-link to more-from-bitwarden

Hide link if user already has premium

* Add popout-button to about-page

* Remove unneeded headings

* Move popout-button on setting to the right

* Add Free Bitwarden Families link

Include speedbump explaining Free Bitwarden Families

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
  • Loading branch information
djsmith85 and djsmith85 committed May 22, 2024
1 parent 5a29fee commit d6f78f2
Show file tree
Hide file tree
Showing 11 changed files with 358 additions and 220 deletions.
59 changes: 49 additions & 10 deletions apps/browser/src/_locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -166,15 +166,21 @@
"confirmIdentity": {
"message": "Confirm your identity to continue."
},
"account": {
"message": "Account"
},
"changeMasterPassword": {
"message": "Change master password"
},
"continueToWebApp": {
"message": "Continue to web app?"
},
"continueToWebAppDesc": {
"message": "Explore more features of your Bitwarden account on the web app."
},
"continueToHelpCenter": {
"message": "Continue to Help Center?"
},
"continueToHelpCenterDesc": {
"message": "Learn more about how to use Bitwarden on the Help Center."
},
"changeMasterPasswordOnWebConfirmation": {
"message": "You can change your master password on the Bitwarden web app."
},
Expand All @@ -192,9 +198,45 @@
"logOut": {
"message": "Log out"
},
"aboutBitwarden": {
"message": "About Bitwarden"
},
"about": {
"message": "About"
},
"moreFromBitwarden": {
"message": "More from Bitwarden"
},
"continueToBitwardenDotCom": {
"message": "Continue to bitwarden.com?"
},
"bitwardenForBusiness": {
"message": "Bitwarden for Business"
},
"bitwardenAuthenticator": {
"message": "Bitwarden Authenticator"
},
"continueToAuthenticatorPageDesc": {
"message": "Bitwarden Authenticator allows you to store authenticator keys and generate TOTP codes for 2-step verification flows. Learn more on the bitwarden.com website"
},
"bitwardenSecretsManager": {
"message": "Bitwarden Secrets Manager"
},
"continueToSecretsManagerPageDesc": {
"message": "Securely store, manage, and share developer secrets with Bitwarden Secrets Manager. Learn more on the bitwarden.com website."
},
"passwordlessDotDev": {
"message": "Passwordless.dev"
},
"continueToPasswordlessDotDevPageDesc": {
"message": "Create smooth and secure login experiences free from traditional passwords with Passwordless.dev. Learn more on the bitwarden.com website."
},
"freeBitwardenFamilies": {
"message": "Free Bitwarden Families"
},
"freeBitwardenFamiliesPageDesc": {
"message": "You are eligible for Free Bitwarden Families. Redeem this offer today in the web app."
},
"version": {
"message": "Version"
},
Expand Down Expand Up @@ -253,8 +295,8 @@
"passGenInfo": {
"message": "Automatically generate strong, unique passwords for your logins."
},
"bitWebVault": {
"message": "Bitwarden web vault"
"bitWebVaultApp": {
"message": "Bitwarden web app"
},
"importItems": {
"message": "Import items"
Expand Down Expand Up @@ -779,11 +821,8 @@
"shared": {
"message": "Shared"
},
"learnOrg": {
"message": "Learn about organizations"
},
"learnOrgConfirmation": {
"message": "Bitwarden allows you to share your vault items with others by using an organization. Would you like to visit the bitwarden.com website to learn more?"
"bitwardenForBusinessPageDesc": {
"message": "Bitwarden for Business allows you to share your vault items with others by using an organization. Learn more on the bitwarden.com website."
},
"moveToOrganization": {
"message": "Move to organization"
Expand Down
4 changes: 2 additions & 2 deletions apps/browser/src/popup/app-routing.animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@ export const routerTransition = trigger("routerTransition", [

transition("tabs => lock", inSlideDown),

transition("tabs => help-and-feedback", inSlideLeft),
transition("help-and-feedback => tabs", outSlideRight),
transition("tabs => about", inSlideLeft),
transition("about => tabs", outSlideRight),

transition("tabs => send-type", inSlideLeft),
transition("send-type => tabs", outSlideRight),
Expand Down
15 changes: 11 additions & 4 deletions apps/browser/src/popup/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ 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 { AboutPageComponent } from "../tools/popup/settings/about-page/about-page.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";
import { SettingsV2Component } from "../tools/popup/settings/settings-v2.component";
Expand All @@ -60,7 +62,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 { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
import { OptionsComponent } from "./settings/options.component";
import { TabsV2Component } from "./tabs-v2.component";
import { TabsComponent } from "./tabs.component";
Expand Down Expand Up @@ -349,10 +350,16 @@ const routes: Routes = [
data: { state: "update-temp-password" },
},
{
path: "help-and-feedback",
component: HelpAndFeedbackComponent,
path: "about",
component: AboutPageComponent,
canActivate: [AuthGuard],
data: { state: "help-and-feedback" },
data: { state: "about" },
},
{
path: "more-from-bitwarden",
component: MoreFromBitwardenPageComponent,
canActivate: [AuthGuard],
data: { state: "moreFromBitwarden" },
},
...extensionRefreshSwap(TabsComponent, TabsV2Component, {
path: "tabs",
Expand Down
2 changes: 0 additions & 2 deletions apps/browser/src/popup/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { UserVerificationComponent } from "./components/user-verification.component";
import { ServicesModule } from "./services/services.module";
import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
import { OptionsComponent } from "./settings/options.component";
import { TabsV2Component } from "./tabs-v2.component";
import { TabsComponent } from "./tabs.component";
Expand Down Expand Up @@ -185,7 +184,6 @@ import "../platform/popup/locales";
RemovePasswordComponent,
VaultSelectComponent,
Fido2Component,
HelpAndFeedbackComponent,
AutofillComponent,
EnvironmentSelectorComponent,
AccountSwitcherComponent,
Expand Down
26 changes: 0 additions & 26 deletions apps/browser/src/popup/settings/help-and-feedback.component.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,47 @@
</button>
</div>
<h1 class="center">
<span class="title">{{ "helpFeedback" | i18n }}</span>
<span class="title">{{ "about" | i18n }}</span>
</h1>
<div class="right"></div>
<div class="right">
<app-pop-out></app-pop-out>
</div>
</header>
<main tabindex="-1">
<div class="box list">
<div class="box-content single-line">
<button
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="about()"
>
<div class="row-main">{{ "aboutBitwarden" | i18n }}</div>
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="launchHelp()"
>
<div class="icon">
<i class="bwi bwi-shield bwi-lg row-sub-icon" aria-hidden="true"></i>
</div>
<div class="row-main">{{ "helpCenter" | i18n }}</div>
<i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="openWebVault()"
>
<div class="row-main">{{ "bitWebVaultApp" | i18n }}</div>
<i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="launchForums()"
>
<div class="icon">
<i class="bwi bwi-discourse bwi-lg row-sub-icon" aria-hidden="true"></i>
</div>
<div class="row-main">{{ "communityForums" | i18n }}</div>
<i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
Expand All @@ -43,12 +56,26 @@ <h1 class="center">
appStopClick
(click)="launchContactForm()"
>
<div class="icon">
<i class="bwi bwi-shield bwi-lg row-sub-icon" aria-hidden="true"></i>
</div>
<div class="row-main">{{ "contactSupport" | i18n }}</div>
<i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
routerLink="/more-from-bitwarden"
>
<div class="row-main">{{ "moreFromBitwarden" | i18n }}</div>
<i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="rate()"
>
<div class="row-main">{{ "rateExtension" | i18n }}</div>
<i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
</div>
</div>
</main>
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
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 } from "@bitwarden/components";

import { BrowserApi } from "../../../../platform/browser/browser-api";
import { PopOutComponent } from "../../../../platform/popup/components/pop-out.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.component.html",
standalone: true,
imports: [CommonModule, JslibModule, RouterModule, PopOutComponent],
})
export class AboutPageComponent {
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 launchContactForm() {
await BrowserApi.createNewTab("https://bitwarden.com/contact/");
}

async launchForums() {
await BrowserApi.createNewTab("https://bitwarden.com/getinvolved/");
}

async rate() {
const deviceType = this.platformUtilsService.getDevice();
await BrowserApi.createNewTab((RateUrls as any)[deviceType]);
}
}
Loading

0 comments on commit d6f78f2

Please sign in to comment.