-
- {{ "phishingPageTitle" | i18n }}
-
-
+
+
+
+
{{ "phishingPageTitleV2" | i18n }}
+
-
-
+
+
+
{{ "phishingPageSummary" | i18n }}
+
+
+ {{ phishingHost$ | async }}
+
+
+
+
+ {{ "phishingPageExplanation1" | i18n }}Phishing.Database{{ "phishingPageExplanation2" | i18n }}
+
+
+
+ {{ "phishingPageLearnMore" | i18n }}
+
+
+
+
+
+
+
diff --git a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts
index dc6ab2d329e..4712c94c89e 100644
--- a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts
+++ b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts
@@ -1,10 +1,10 @@
// eslint-disable-next-line no-restricted-imports
import { CommonModule } from "@angular/common";
// eslint-disable-next-line no-restricted-imports
-import { Component, OnDestroy } from "@angular/core";
+import { Component, inject } from "@angular/core";
// eslint-disable-next-line no-restricted-imports
import { ActivatedRoute, RouterModule } from "@angular/router";
-import { Subject, takeUntil } from "rxjs";
+import { map } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
@@ -13,12 +13,16 @@ import {
CheckboxModule,
FormFieldModule,
IconModule,
+ IconTileComponent,
LinkModule,
+ CalloutComponent,
+ TypographyModule,
} from "@bitwarden/components";
import { PhishingDetectionService } from "../services/phishing-detection.service";
@Component({
+ selector: "dirt-phishing-warning",
standalone: true,
templateUrl: "phishing-warning.component.html",
imports: [
@@ -31,18 +35,16 @@ import { PhishingDetectionService } from "../services/phishing-detection.service
CheckboxModule,
ButtonModule,
RouterModule,
+ IconTileComponent,
+ CalloutComponent,
+ TypographyModule,
],
})
-export class PhishingWarning implements OnDestroy {
- phishingHost = "";
-
- private destroy$ = new Subject
();
-
- constructor(private activatedRoute: ActivatedRoute) {
- this.activatedRoute.queryParamMap.pipe(takeUntil(this.destroy$)).subscribe((params) => {
- this.phishingHost = params.get("phishingHost") || "";
- });
- }
+export class PhishingWarning {
+ private activatedRoute = inject(ActivatedRoute);
+ protected phishingHost$ = this.activatedRoute.queryParamMap.pipe(
+ map((params) => params.get("phishingHost") || ""),
+ );
async closeTab() {
await PhishingDetectionService.requestClosePhishingWarningPage();
@@ -50,9 +52,4 @@ export class PhishingWarning implements OnDestroy {
async continueAnyway() {
await PhishingDetectionService.requestContinueToDangerousUrl();
}
-
- ngOnDestroy(): void {
- this.destroy$.next();
- this.destroy$.complete();
- }
}
diff --git a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts
new file mode 100644
index 00000000000..30d3b7faeee
--- /dev/null
+++ b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.stories.ts
@@ -0,0 +1,137 @@
+// TODO: This needs to be dealt with by moving this folder or updating the lint rule.
+/* eslint-disable no-restricted-imports */
+import { ActivatedRoute, RouterModule } from "@angular/router";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { BehaviorSubject, of } from "rxjs";
+
+import { DeactivatedOrg } from "@bitwarden/assets/svg";
+import { ClientType } from "@bitwarden/common/enums";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { AnonLayoutComponent, I18nMockService } from "@bitwarden/components";
+
+import { PhishingWarning } from "./phishing-warning.component";
+import { ProtectedByComponent } from "./protected-by-component";
+
+class MockPlatformUtilsService implements Partial {
+ getApplicationVersion = () => Promise.resolve("Version 2024.1.1");
+ getClientType = () => ClientType.Web;
+}
+
+/**
+ * Helper function to create ActivatedRoute mock with query parameters
+ */
+function mockActivatedRoute(queryParams: Record) {
+ return {
+ provide: ActivatedRoute,
+ useValue: {
+ queryParamMap: of({
+ get: (key: string) => queryParams[key] || null,
+ }),
+ queryParams: of(queryParams),
+ },
+ };
+}
+
+type StoryArgs = {
+ phishingHost: string;
+};
+
+export default {
+ title: "Browser/DIRT/Phishing Warning",
+ component: PhishingWarning,
+ decorators: [
+ moduleMetadata({
+ imports: [AnonLayoutComponent, ProtectedByComponent, RouterModule],
+ providers: [
+ {
+ provide: PlatformUtilsService,
+ useClass: MockPlatformUtilsService,
+ },
+ {
+ provide: I18nService,
+ useFactory: () =>
+ new I18nMockService({
+ accessing: "Accessing",
+ appLogoLabel: "Bitwarden logo",
+ phishingPageTitleV2: "Phishing attempt detected",
+ phishingPageCloseTabV2: "Close this tab",
+ phishingPageSummary:
+ "The site you are attempting to visit is a known malicious site and a security risk.",
+ phishingPageContinueV2: "Continue to this site (not recommended)",
+ phishingPageExplanation1: "This site was found in ",
+ phishingPageExplanation2:
+ ", an open-source list of known phishing sites used for stealing personal and sensitive information.",
+ phishingPageLearnMore: "Learn more about phishing detection",
+ protectedBy: (product) => `Protected by ${product}`,
+ learnMore: "Learn more",
+ danger: "error",
+ }),
+ },
+ {
+ provide: EnvironmentService,
+ useValue: {
+ environment$: new BehaviorSubject({
+ getHostname() {
+ return "bitwarden.com";
+ },
+ }).asObservable(),
+ },
+ },
+ mockActivatedRoute({ phishingHost: "malicious-example.com" }),
+ ],
+ }),
+ ],
+ render: (args) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+
+ `,
+ }),
+ argTypes: {
+ phishingHost: {
+ control: "text",
+ description: "The suspicious host that was blocked",
+ },
+ },
+ args: {
+ phishingHost: "malicious-example.com",
+ pageIcon: DeactivatedOrg,
+ },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ phishingHost: "malicious-example.com",
+ },
+ decorators: [
+ moduleMetadata({
+ providers: [mockActivatedRoute({ phishingHost: "malicious-example.com" })],
+ }),
+ ],
+};
+
+export const LongHostname: Story = {
+ args: {
+ phishingHost: "very-long-suspicious-phishing-domain-name-that-might-wrap.malicious-example.com",
+ },
+ decorators: [
+ moduleMetadata({
+ providers: [
+ mockActivatedRoute({
+ phishingHost:
+ "very-long-suspicious-phishing-domain-name-that-might-wrap.malicious-example.com",
+ }),
+ ],
+ }),
+ ],
+};
diff --git a/apps/browser/src/dirt/phishing-detection/pages/protected-by-component.html b/apps/browser/src/dirt/phishing-detection/pages/protected-by-component.html
new file mode 100644
index 00000000000..d9f26bc9c90
--- /dev/null
+++ b/apps/browser/src/dirt/phishing-detection/pages/protected-by-component.html
@@ -0,0 +1 @@
+{{ "protectedBy" | i18n: "Bitwarden Phishing Blocker" }}
diff --git a/apps/browser/src/dirt/phishing-detection/pages/learn-more-component.ts b/apps/browser/src/dirt/phishing-detection/pages/protected-by-component.ts
similarity index 63%
rename from apps/browser/src/dirt/phishing-detection/pages/learn-more-component.ts
rename to apps/browser/src/dirt/phishing-detection/pages/protected-by-component.ts
index 1a1e6059204..298c7acd38e 100644
--- a/apps/browser/src/dirt/phishing-detection/pages/learn-more-component.ts
+++ b/apps/browser/src/dirt/phishing-detection/pages/protected-by-component.ts
@@ -4,13 +4,12 @@ import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { ButtonModule } from "@bitwarden/components";
+import { ButtonModule, LinkModule } from "@bitwarden/components";
@Component({
+ selector: "dirt-phishing-protected-by",
standalone: true,
- templateUrl: "learn-more-component.html",
- imports: [CommonModule, CommonModule, JslibModule, ButtonModule],
+ templateUrl: "protected-by-component.html",
+ imports: [CommonModule, CommonModule, JslibModule, ButtonModule, LinkModule],
})
-export class LearnMoreComponent {
- constructor() {}
-}
+export class ProtectedByComponent {}
diff --git a/apps/browser/src/dirt/phishing-detection/services/phishing-detection.service.ts b/apps/browser/src/dirt/phishing-detection/services/phishing-detection.service.ts
index 54245ae17b4..179431b155c 100644
--- a/apps/browser/src/dirt/phishing-detection/services/phishing-detection.service.ts
+++ b/apps/browser/src/dirt/phishing-detection/services/phishing-detection.service.ts
@@ -116,15 +116,15 @@ export class PhishingDetectionService {
/**
* Sends a message to the phishing detection service to close the warning page
*/
- static requestClosePhishingWarningPage(): void {
- void chrome.runtime.sendMessage({ command: PhishingDetectionMessage.Close });
+ static async requestClosePhishingWarningPage() {
+ await chrome.runtime.sendMessage({ command: PhishingDetectionMessage.Close });
}
/**
* Sends a message to the phishing detection service to continue to the caught url
*/
static async requestContinueToDangerousUrl() {
- void chrome.runtime.sendMessage({ command: PhishingDetectionMessage.Continue });
+ await chrome.runtime.sendMessage({ command: PhishingDetectionMessage.Continue });
}
/**
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 17a812f451c..cb5e597e78c 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -24,7 +24,6 @@ import {
VaultIcon,
LockIcon,
TwoFactorAuthSecurityKeyIcon,
- DeactivatedOrg,
} from "@bitwarden/assets/svg";
import {
LoginComponent,
@@ -54,8 +53,8 @@ import { BlockedDomainsComponent } from "../autofill/popup/settings/blocked-doma
import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
import { PremiumV2Component } from "../billing/popup/settings/premium-v2.component";
-import { LearnMoreComponent } from "../dirt/phishing-detection/pages/learn-more-component";
import { PhishingWarning } from "../dirt/phishing-detection/pages/phishing-warning.component";
+import { ProtectedByComponent } from "../dirt/phishing-detection/pages/protected-by-component";
import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
import BrowserPopupUtils from "../platform/browser/browser-popup-utils";
import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
@@ -718,14 +717,13 @@ const routes: Routes = [
},
{
path: "",
- component: LearnMoreComponent,
+ component: ProtectedByComponent,
outlet: "secondary",
},
],
data: {
- pageIcon: DeactivatedOrg,
- pageTitle: "Bitwarden blocked it!",
- pageSubtitle: "Bitwarden blocked a known phishing site from loading.",
+ hideIcon: true,
+ hideBackgroundIllustration: true,
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
},
diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index b3d14e65061..01b9d3f05d5 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -382,7 +382,7 @@ app-root {
}
}
-main:not(popup-page main) {
+main:not(popup-page main):not(auth-anon-layout main) {
position: absolute;
top: 44px;
bottom: 0;
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
index ebcd8707597..83535b09e66 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -302,7 +302,7 @@ export class ItemMoreOptionsComponent {
await this.cipherArchiveService.archiveWithServer(this.cipher.id as CipherId, activeUserId);
this.toastService.showToast({
variant: "success",
- message: this.i18nService.t("itemSentToArchive"),
+ message: this.i18nService.t("itemWasSentToArchive"),
});
}
}
diff --git a/apps/browser/src/vault/popup/settings/archive.component.html b/apps/browser/src/vault/popup/settings/archive.component.html
index 5fb57814fff..faaf0243fc7 100644
--- a/apps/browser/src/vault/popup/settings/archive.component.html
+++ b/apps/browser/src/vault/popup/settings/archive.component.html
@@ -49,7 +49,7 @@
{{ "clone" | i18n }}