First bit of ux reflow

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"

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

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,

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

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

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;
 }