Scaffold for tunneling demo

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

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,

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>

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() {}
+}

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>

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>

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,
+    });
+  }
+}