From 37c1935f7c3f1d0bbf0514d1e80563dec89eee82 Mon Sep 17 00:00:00 2001
From: Jimmy Vo <huynhmaivo82@gmail.com>
Date: Thu, 10 Apr 2025 15:45:48 -0400
Subject: [PATCH] [PM-19814] Add exit button and learn more link.

---
 .../pages/learn-more-component.html           |  4 ++
 .../pages/learn-more-component.ts             | 34 ++++++++++++++
 .../pages/phishing-warning.html               | 25 +++-------
 .../pages/phishing-warning.ts                 | 14 ++++--
 .../services/phishing-detection.service.ts    |  4 +-
 apps/browser/src/popup/app-routing.module.ts  | 47 ++++++++++++-------
 6 files changed, 88 insertions(+), 40 deletions(-)
 create mode 100644 apps/browser/src/phishing-detection/pages/learn-more-component.html
 create mode 100644 apps/browser/src/phishing-detection/pages/learn-more-component.ts

diff --git a/apps/browser/src/phishing-detection/pages/learn-more-component.html b/apps/browser/src/phishing-detection/pages/learn-more-component.html
new file mode 100644
index 00000000000..bbd76620174
--- /dev/null
+++ b/apps/browser/src/phishing-detection/pages/learn-more-component.html
@@ -0,0 +1,4 @@
+<span>Question?</span>
+<a href="http://bitwarden.com/help/phishing-detected" bitLink block buttonType="primary">
+  learn more
+</a>
diff --git a/apps/browser/src/phishing-detection/pages/learn-more-component.ts b/apps/browser/src/phishing-detection/pages/learn-more-component.ts
new file mode 100644
index 00000000000..e4d842a75ba
--- /dev/null
+++ b/apps/browser/src/phishing-detection/pages/learn-more-component.ts
@@ -0,0 +1,34 @@
+// FIXME: Update this file to be type safe and remove this and next line
+// @ts-strict-ignore
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AnonLayoutComponent } from "@bitwarden/auth/angular";
+import { ButtonModule } from "@bitwarden/components";
+
+import { PopOutComponent } from "../../platform/popup/components/pop-out.component";
+import { PopupPageComponent } from "../../platform/popup/layout/popup-page.component";
+
+@Component({
+  standalone: true,
+  templateUrl: "learn-more-component.html",
+  imports: [
+    AnonLayoutComponent,
+    CommonModule,
+    PopOutComponent,
+    PopupPageComponent,
+    PopupPageComponent,
+    CommonModule,
+    JslibModule,
+    ButtonModule,
+  ],
+})
+export class LearnMoreComponent {
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  closeTab(): void {
+    globalThis.close();
+  }
+}
diff --git a/apps/browser/src/phishing-detection/pages/phishing-warning.html b/apps/browser/src/phishing-detection/pages/phishing-warning.html
index 7b7fb7a9c69..ba680a4830f 100644
--- a/apps/browser/src/phishing-detection/pages/phishing-warning.html
+++ b/apps/browser/src/phishing-detection/pages/phishing-warning.html
@@ -1,19 +1,8 @@
-<div>
-  <div>🏢⚠️</div>
+<label>Phishing url</label>:
+<input
+  *ngIf="queryParams$ | async as params"
+  [value]="params.phishingHost || 'https://catphish.gotcha.io'"
+  readonly
+/>
 
-  <div>
-    <label for="url">Phishing url</label>:
-    <input
-      *ngIf="queryParams$ | async as params"
-      [value]="params.phishingHost || 'https://catphish.gotcha.io'"
-      readonly
-    />
-  </div>
-
-  <a onclick="alert('Exiting...')"> Exit page </a>
-</div>
-
-<div>
-  <span>Question?</span>
-  <a href="#">Action here</a>
-</div>
+<a (click)="closeTab()" bitButton block buttonType="primary"> Exit page </a>
diff --git a/apps/browser/src/phishing-detection/pages/phishing-warning.ts b/apps/browser/src/phishing-detection/pages/phishing-warning.ts
index 4a2cafba68c..6896216c086 100644
--- a/apps/browser/src/phishing-detection/pages/phishing-warning.ts
+++ b/apps/browser/src/phishing-detection/pages/phishing-warning.ts
@@ -5,8 +5,9 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
 import { map, Observable, Subject, take } from "rxjs";
 
-import { AnonLayoutComponent } from "@bitwarden/auth/angular";
-import { Icon, IconModule } from "@bitwarden/components";
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AnonLayoutComponent, InputPasswordComponent } from "@bitwarden/auth/angular";
+import { ButtonModule, Icon, IconModule } from "@bitwarden/components";
 
 import { PopOutComponent } from "../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../platform/popup/layout/popup-header.component";
@@ -25,9 +26,13 @@ interface ViewData {
     IconModule,
     PopOutComponent,
     PopupPageComponent,
+    InputPasswordComponent,
     PopupHeaderComponent,
-    RouterModule,
     PopupPageComponent,
+    CommonModule,
+    JslibModule,
+    ButtonModule,
+    RouterModule,
   ],
 })
 export class PhishingWarning implements OnInit, OnDestroy {
@@ -58,6 +63,9 @@ export class PhishingWarning implements OnInit, OnDestroy {
       })),
     );
   }
+  closeTab(): void {
+    globalThis.close();
+  }
 
   ngOnDestroy() {
     this.destroy$.next();
diff --git a/apps/browser/src/platform/services/phishing-detection.service.ts b/apps/browser/src/platform/services/phishing-detection.service.ts
index 61143fce500..9c72a68ea66 100644
--- a/apps/browser/src/platform/services/phishing-detection.service.ts
+++ b/apps/browser/src/platform/services/phishing-detection.service.ts
@@ -227,7 +227,9 @@ export class PhishingDetectionService {
   static setupRedirectToWarningPageListener(): void {
     BrowserApi.addListener(chrome.runtime.onMessage, async (message, sender, sendResponse) => {
       if (message.command === PhishingDetectionCommands.RedirectToWarningPage) {
-        const phishingWarningPage = chrome.runtime.getURL("popup/index.html#/phishing-warning");
+        const phishingWarningPage = chrome.runtime.getURL(
+          "popup/index.html#/security/phishing-warning",
+        );
 
         const pageWithViewData = `${phishingWarningPage}?phishingHost=${message.phishingHost}`;
 
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 41f50cb1a6f..6cd2042e9ba 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -66,6 +66,7 @@ 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 "../phishing-detection/pages/learn-more-component";
 import { PhishingWarning } from "../phishing-detection/pages/phishing-warning";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
@@ -143,24 +144,6 @@ const routes: Routes = [
     canActivate: [fido2AuthGuard],
     data: { elevation: 1 } satisfies RouteDataProperties,
   },
-  {
-    path: "",
-    component: AnonLayoutWrapperComponent,
-    children: [
-      {
-        path: "phishing-warning",
-        component: PhishingWarning,
-        data: {
-          pageIcon: BitwardenLogo,
-
-          pageTitle: "Phishing site detected",
-          pageSubtitle: "Bitwarden has prevented this page from loading.",
-
-          showReadonlyHostname: true,
-        } satisfies AnonLayoutWrapperData,
-      },
-    ],
-  },
   {
     path: "",
     component: ExtensionAnonLayoutWrapperComponent,
@@ -709,6 +692,34 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { elevation: 2 } satisfies RouteDataProperties,
   },
+  {
+    path: "security",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "phishing-warning",
+        children: [
+          {
+            path: "",
+            component: PhishingWarning,
+          },
+          {
+            path: "",
+            component: LearnMoreComponent,
+            outlet: "secondary",
+          },
+        ],
+        data: {
+          pageIcon: BitwardenLogo,
+
+          pageTitle: "Phishing site detected",
+          pageSubtitle: "Bitwarden has prevented this page from loading.",
+
+          showReadonlyHostname: true,
+        } satisfies AnonLayoutWrapperData,
+      },
+    ],
+  },
 ];
 
 @Injectable()