From 1a91293bc597ba8be0408706c22289add6bec5d2 Mon Sep 17 00:00:00 2001
From: Katherine Reynolds <7054971+reynoldskr@users.noreply.github.com>
Date: Mon, 10 Nov 2025 15:52:23 -0800
Subject: [PATCH] Scaffold for tunneling demo

---
 apps/browser/src/_locales/en/messages.json    |  6 +++
 apps/browser/src/popup/app-routing.module.ts  | 14 +++++++
 .../settings/demo-settings.component.html     | 28 +++++++++++++
 .../popup/settings/demo-settings.component.ts | 40 +++++++++++++++++++
 .../popup/settings/settings-v2.component.html |  7 ++++
 .../popup/settings/tunnel-demo.component.html | 11 +++++
 .../popup/settings/tunnel-demo.component.ts   | 33 +++++++++++++++
 7 files changed, 139 insertions(+)
 create mode 100644 apps/browser/src/tools/popup/settings/demo-settings.component.html
 create mode 100644 apps/browser/src/tools/popup/settings/demo-settings.component.ts
 create mode 100644 apps/browser/src/tools/popup/settings/tunnel-demo.component.html
 create mode 100644 apps/browser/src/tools/popup/settings/tunnel-demo.component.ts

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index a8743b0db68..e702047e9fb 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3765,6 +3765,9 @@
   "devices": {
     "message": "Devices"
   },
+  "triggerTunnelDemo": {
+    "message": "Trigger tunnel demo"
+  },
   "accessAttemptBy": {
     "message": "Access attempt by $EMAIL$",
     "placeholders": {
@@ -4745,6 +4748,9 @@
   "accountSecurity": {
     "message": "Account security"
   },
+  "demoSettings": {
+    "message": "Demo settings"
+  },
   "notifications": {
     "message": "Notifications"
   },
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 1834beb391e..1c6e468406e 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -68,9 +68,11 @@ import { SendAddEditComponent as SendAddEditV2Component } from "../tools/popup/s
 import { SendCreatedComponent } from "../tools/popup/send-v2/send-created/send-created.component";
 import { SendV2Component } from "../tools/popup/send-v2/send-v2.component";
 import { AboutPageV2Component } from "../tools/popup/settings/about-page/about-page-v2.component";
+import { DemoSettingsComponent } from "../tools/popup/settings/demo-settings.component";
 import { ExportBrowserV2Component } from "../tools/popup/settings/export/export-browser-v2.component";
 import { ImportBrowserV2Component } from "../tools/popup/settings/import/import-browser-v2.component";
 import { SettingsV2Component } from "../tools/popup/settings/settings-v2.component";
+import { TunnelDemoComponent } from "../tools/popup/settings/tunnel-demo.component";
 import { AtRiskPasswordsComponent } from "../vault/popup/components/at-risk-passwords/at-risk-passwords.component";
 import { AddEditV2Component } from "../vault/popup/components/vault-v2/add-edit/add-edit-v2.component";
 import { AssignCollections } from "../vault/popup/components/vault-v2/assign-collections/assign-collections.component";
@@ -314,6 +316,18 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { elevation: 1 } satisfies RouteDataProperties,
   },
+  {
+    path: "demo-settings",
+    component: DemoSettingsComponent,
+    canActivate: [authGuard],
+    data: { elevation: 1 } satisfies RouteDataProperties,
+  },
+  {
+    path: "tunnel-demo",
+    component: TunnelDemoComponent,
+    canActivate: [authGuard],
+    data: { elevation: 2 } satisfies RouteDataProperties,
+  },
   {
     path: "clone-cipher",
     component: AddEditV2Component,
diff --git a/apps/browser/src/tools/popup/settings/demo-settings.component.html b/apps/browser/src/tools/popup/settings/demo-settings.component.html
new file mode 100644
index 00000000000..03dc68fb04f
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/demo-settings.component.html
@@ -0,0 +1,28 @@
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'demoSettings' | i18n }}" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <bit-section>
+    <bit-section-header>
+      <h2 bitTypography="h6">{{ "demoOptions" | i18n }}</h2>
+    </bit-section-header>
+    <bit-card>
+      <p bitTypography="body1">Demo settings content goes here.</p>
+    </bit-card>
+  </bit-section>
+
+  <bit-section>
+    <bit-section-header>
+      <h2 bitTypography="body1">Trigger credential tunnel demo</h2>
+    </bit-section-header>
+    <bit-item>
+      <button bit-item-content type="button" appStopClick routerLink="/tunnel-demo">
+        {{ "triggerTunnelDemo" | i18n }}
+        <i slot="end" class="bwi bwi-chevron-right" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+  </bit-section>
+</popup-page>
diff --git a/apps/browser/src/tools/popup/settings/demo-settings.component.ts b/apps/browser/src/tools/popup/settings/demo-settings.component.ts
new file mode 100644
index 00000000000..bd4ba603b07
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/demo-settings.component.ts
@@ -0,0 +1,40 @@
+// 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 { RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  CardComponent,
+  ItemModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";
+
+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";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  templateUrl: "demo-settings.component.html",
+  imports: [
+    CardComponent,
+    CommonModule,
+    ItemModule,
+    JslibModule,
+    PopOutComponent,
+    PopupHeaderComponent,
+    PopupPageComponent,
+    RouterModule,
+    SectionComponent,
+    SectionHeaderComponent,
+    TypographyModule,
+  ],
+})
+export class DemoSettingsComponent {
+  constructor() {}
+}
diff --git a/apps/browser/src/tools/popup/settings/settings-v2.component.html b/apps/browser/src/tools/popup/settings/settings-v2.component.html
index a12c5fe005f..9d04c5dc4cc 100644
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.html
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.html
@@ -69,6 +69,13 @@
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/demo-settings">
+        <i slot="start" class="bwi bwi-cog" aria-hidden="true"></i>
+        {{ "demoSettings" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
     <bit-item>
       <a bit-item-content routerLink="/about">
         <i slot="start" class="bwi bwi-info-circle" aria-hidden="true"></i>
diff --git a/apps/browser/src/tools/popup/settings/tunnel-demo.component.html b/apps/browser/src/tools/popup/settings/tunnel-demo.component.html
new file mode 100644
index 00000000000..0c22edec007
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/tunnel-demo.component.html
@@ -0,0 +1,11 @@
+<popup-page>
+  <popup-header slot="header" pageTitle="Tunnel Demo" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <div class="tw-p-4">
+    <p class="tw-text-center tw-text-muted">Credential Tunnel Demo triggered</p>
+  </div>
+</popup-page>
diff --git a/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts b/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts
new file mode 100644
index 00000000000..4024960c3d3
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from "@angular/core";
+
+import { DialogService } from "@bitwarden/components";
+
+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";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  standalone: true,
+  selector: "tunnel-demo",
+  templateUrl: "tunnel-demo.component.html",
+  imports: [PopOutComponent, PopupHeaderComponent, PopupPageComponent],
+})
+export class TunnelDemoComponent implements OnInit {
+  constructor(private dialogService: DialogService) {}
+
+  async ngOnInit() {
+    await this.showDemoModal();
+  }
+
+  async showDemoModal() {
+    await this.dialogService.openSimpleDialog({
+      title: { key: "tunnelDemoTitle" },
+      content: { key: "tunnelDemoContent" },
+      type: "info",
+      acceptButtonText: { key: "ok" },
+      cancelButtonText: null,
+    });
+  }
+}