[PM-19814] Add functionality to display phishing host.

apps/browser/src/phishing-detection/pages/phishing-warning.html

@@ -2,8 +2,12 @@
   <div>🏢⚠️</div>
 
   <div>
-    <label for="url">Phishing url</label>
-    <input id="url" value="https://catphish.gotcha.io" readonly />
+    <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>

apps/browser/src/phishing-detection/pages/phishing-warning.ts

@@ -2,8 +2,8 @@
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { Subject } from "rxjs";
+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";
@@ -12,6 +12,10 @@ import { PopOutComponent } from "../../platform/popup/components/pop-out.compone
 import { PopupHeaderComponent } from "../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../platform/popup/layout/popup-page.component";
 
+interface ViewData {
+  phishingHost: string;
+}
+
 @Component({
   standalone: true,
   templateUrl: "phishing-warning.html",
@@ -29,8 +33,6 @@ import { PopupPageComponent } from "../../platform/popup/layout/popup-page.compo
 export class PhishingWarning implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
-  protected showAcctSwitcher: boolean;
-  protected showBackButton: boolean;
   protected showLogo: boolean = true;
   protected hideIcon: boolean = false;
 
@@ -42,23 +44,19 @@ export class PhishingWarning implements OnInit, OnDestroy {
   protected hasLoggedInAccount: boolean = false;
   protected hideFooter: boolean;
 
+  protected queryParams$: Observable<ViewData>;
+
   protected theme: string;
 
-  constructor() {}
+  constructor(private activatedRoute: ActivatedRoute) {}
 
   async ngOnInit(): Promise<void> {
-    this.resetData();
-  }
-
-  private resetData() {
-    this.pageTitle = "Jimmy pageTitle";
-    this.pageSubtitle = "Jimmy pageSubtitle";
-    this.showReadonlyHostname = null;
-    this.showAcctSwitcher = null;
-    this.showBackButton = null;
-    this.showLogo = true;
-    this.maxWidth = null;
-    this.hideFooter = null;
+    this.queryParams$ = this.activatedRoute.queryParamMap.pipe(
+      take(1),
+      map((queryParamMap) => ({
+        phishingHost: queryParamMap.get("phishingHost"),
+      })),
+    );
   }
 
   ngOnDestroy() {

apps/browser/src/platform/services/phishing-detection.service.ts

@@ -228,12 +228,15 @@ export class PhishingDetectionService {
     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 pageWithViewData = `${phishingWarningPage}?phishingHost=${message.phishingHost}`;
+
         PhishingDetectionService.logService.debug("RedirectToWarningPage handler", {
           message,
-          phishingWarning: phishingWarningPage,
+          phishingWarning: pageWithViewData,
         });
 
-        await chrome.tabs.update(sender.tab.id, { url: phishingWarningPage });
+        await chrome.tabs.update(sender.tab.id, { url: pageWithViewData });
       }
     });
   }