From 6befa45e9805b2d2f61e969a789b1d58c7c2ddc7 Mon Sep 17 00:00:00 2001
From: Katherine Reynolds <7054971+reynoldskr@users.noreply.github.com>
Date: Mon, 17 Nov 2025 09:19:55 -0800
Subject: [PATCH] First bit of ux reflow

---
 apps/browser/src/_locales/en/messages.json            |  4 ++--
 .../tools/popup/settings/demo-settings.component.html |  5 +----
 .../tools/popup/settings/demo-settings.component.ts   |  2 --
 .../tools/popup/settings/tunnel-demo.component.html   |  6 +++---
 .../src/tools/popup/settings/tunnel-demo.component.ts | 11 ++++++-----
 .../src/tools/popup/settings/tunnel.service.ts        |  1 +
 6 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 0bcc138b9f2..1c969354d9a 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3775,7 +3775,7 @@
     "message": "Devices"
   },
   "triggerTunnelDemo": {
-    "message": "Trigger tunnel demo ⚠️"
+    "message": "Run tunnel demo test ⚠️"
   },
   "accessAttemptBy": {
     "message": "Access attempt by $EMAIL$",
@@ -4764,7 +4764,7 @@
     "message": "For demo use only. Credentials will be sent over secure tunnel."
   },
   "demoRetrieve": {
-    "message": "Fetch"
+    "message": "Connect to Tunnel"
   },
   "notifications": {
     "message": "Notifications"
diff --git a/apps/browser/src/tools/popup/settings/demo-settings.component.html b/apps/browser/src/tools/popup/settings/demo-settings.component.html
index 03dc68fb04f..52d0f2d9ab4 100644
--- a/apps/browser/src/tools/popup/settings/demo-settings.component.html
+++ b/apps/browser/src/tools/popup/settings/demo-settings.component.html
@@ -9,14 +9,11 @@
     <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>
+      <h2 bitTypography="body1">Remote Access Tunnel</h2>
     </bit-section-header>
     <bit-item>
       <button bit-item-content type="button" appStopClick routerLink="/tunnel-demo">
diff --git a/apps/browser/src/tools/popup/settings/demo-settings.component.ts b/apps/browser/src/tools/popup/settings/demo-settings.component.ts
index bd4ba603b07..3eeac2f6dc9 100644
--- a/apps/browser/src/tools/popup/settings/demo-settings.component.ts
+++ b/apps/browser/src/tools/popup/settings/demo-settings.component.ts
@@ -6,7 +6,6 @@ import { RouterModule } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
-  CardComponent,
   ItemModule,
   SectionComponent,
   SectionHeaderComponent,
@@ -22,7 +21,6 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
 @Component({
   templateUrl: "demo-settings.component.html",
   imports: [
-    CardComponent,
     CommonModule,
     ItemModule,
     JslibModule,
diff --git a/apps/browser/src/tools/popup/settings/tunnel-demo.component.html b/apps/browser/src/tools/popup/settings/tunnel-demo.component.html
index 356ea88c950..e194bf6e2a4 100644
--- a/apps/browser/src/tools/popup/settings/tunnel-demo.component.html
+++ b/apps/browser/src/tools/popup/settings/tunnel-demo.component.html
@@ -12,9 +12,9 @@
     <bit-card>
       <form [formGroup]="formGroup" (ngSubmit)="submit()">
         <bit-form-field>
-          <bit-label>{{ "vaultItemName" | i18n }}</bit-label>
-          <input bitInput type="text" formControlName="vaultItemName" />
-          <bit-hint>Enter the name of the vault item to retrieve credentials from.</bit-hint>
+          <bit-label>{{ "tunnelUsername" | i18n }}</bit-label>
+          <input bitInput type="text" formControlName="tunnelUsername" />
+          <bit-hint>Enter your username to connect to the remote tunnel.</bit-hint>
         </bit-form-field>
         <button bitButton buttonType="primary" type="submit" [disabled]="formGroup.invalid">
           {{ "demoRetrieve" | i18n }}
diff --git a/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts b/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts
index 700cdaa9472..216cd0277e1 100644
--- a/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts
+++ b/apps/browser/src/tools/popup/settings/tunnel-demo.component.ts
@@ -49,7 +49,7 @@ import { TunnelService } from "./tunnel.service";
 })
 export class TunnelDemoComponent {
   protected formGroup = this.formBuilder.group({
-    vaultItemName: ["", Validators.required],
+    tunnelUsername: ["", Validators.required],
   });
 
   constructor(
@@ -65,12 +65,13 @@ export class TunnelDemoComponent {
       return;
     }
 
-    const vaultItemName = this.formGroup.value.vaultItemName?.trim();
+    const tunnelUsername = this.formGroup.value.tunnelUsername?.trim();
+    const vaultItemName = "Bitwarden Tunnel Demo";
 
-    if (!vaultItemName) {
+    if (!tunnelUsername) {
       await this.dialogService.openSimpleDialog({
         title: "Tunnel Demo",
-        content: "No vault item name provided.",
+        content: "No tunnel username provided.",
         type: "warning",
         acceptButtonText: { key: "ok" },
         cancelButtonText: null,
@@ -125,7 +126,7 @@ export class TunnelDemoComponent {
 
     // Send credentials to the localhost tunnel server
     try {
-      await this.tunnelService.sendCredentials({ username, password });
+      await this.tunnelService.sendCredentials({ tunnelUsername, username, password });
 
       await this.dialogService.openSimpleDialog({
         title: "Tunnel Demo - Success",
diff --git a/apps/browser/src/tools/popup/settings/tunnel.service.ts b/apps/browser/src/tools/popup/settings/tunnel.service.ts
index 9bcb13020e4..1b01b0288fc 100644
--- a/apps/browser/src/tools/popup/settings/tunnel.service.ts
+++ b/apps/browser/src/tools/popup/settings/tunnel.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from "@angular/core";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
 export interface TunnelCredentials {
+  tunnelUsername: string;
   username: string;
   password: string;
 }