vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[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 <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith 2024-05-24 17:17:24 +02:00 committed by GitHub
parent a49e7bb35f
commit 34a766f346
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 303 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/_locales/en/messages.json
View File

@ -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."
},

12
apps/browser/src/popup/app-routing.module.ts
View File

@ -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" },

40
apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html Normal file
View File

@ -0,0 +1,40 @@
<popup-page>
<popup-header slot="header" pageTitle="{{ 'about' | i18n }}" showBackButton>
<ng-container slot="end">
<app-pop-out></app-pop-out>
</ng-container>
</popup-header>
<bit-item-group>
<bit-item>
<button type="button" bit-item-content (click)="about()">
{{ "aboutBitwarden" | i18n }}
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="launchHelp()">
{{ "helpCenter" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openWebVault()">
{{ "bitWebVaultApp" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<a bit-item-content routerLink="/more-from-bitwarden">
{{ "moreFromBitwarden" | i18n }}
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</a>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="rate()">
{{ "rateExtension" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
</bit-item-group>
</popup-page>

94
apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts Normal file
View File

@ -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]);
}
}
}

18
apps/browser/src/tools/popup/settings/about-page/about-page.component.html
View File

@ -41,24 +41,6 @@
<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="row-main">{{ "communityForums" | 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)="launchContactForm()"
>
<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"

16
apps/browser/src/tools/popup/settings/about-page/about-page.component.ts
View File

@ -69,16 +69,16 @@ export class AboutPageComponent {
}
}
async launchContactForm() {
await BrowserApi.createNewTab("https://bitwarden.com/contact/");
}
async launchForums() {
await BrowserApi.createNewTab("https://bitwarden.com/getinvolved/");
}
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]);
}
}
}

46
apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html Normal file
View File

@ -0,0 +1,46 @@
<popup-page>
<popup-header slot="header" pageTitle="{{ 'moreFromBitwarden' | i18n }}" showBackButton>
<ng-container slot="end">
<app-pop-out></app-pop-out>
</ng-container>
</popup-header>
<bit-item-group>
<bit-item *ngIf="!(canAccessPremium$ | async)">
<a type="button" bit-item-content routerLink="/premium">
{{ "premiumMembership" | i18n }}
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</a>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openFreeBitwardenFamiliesPage()">
{{ "freeBitwardenFamilies" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openBitwardenForBusinessPage()">
{{ "bitwardenForBusiness" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openAuthenticatorPage()">
{{ "bitwardenAuthenticator" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openSecretsManagerPage()">
{{ "bitwardenSecretsManager" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
<bit-item>
<button type="button" bit-item-content (click)="openPasswordlessDotDevPage()">
{{ "passwordlessDotDev" | i18n }}
<i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
</button>
</bit-item>
</bit-item-group>
</popup-page>

101
apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts Normal file
View File

@ -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<boolean>;
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");
}
}
}