[PM-3000] Add Environment URLs to Account Switcher

apps/desktop/src/app/layout/account-switcher.component.html

@@ -22,7 +22,10 @@
       *ngIf="activeAccount.email != null"
       aria-hidden="true"
     ></app-avatar>
-    <span>{{ activeAccount.email }}</span>
+    <div class="active-account">
+      <div>{{ activeAccount.email }}</div>
+      <span>{{ activeAccount.serverUrl }}</span>
+    </div>
   </ng-container>
   <ng-template #noActiveAccount>
     <span>{{ "switchAccount" | i18n }}</span>
@@ -74,9 +77,7 @@
         ></app-avatar>
         <div class="accountInfo">
           <span class="email" aria-hidden="true">{{ a.value.profile.email }}</span>
-          <span class="server" aria-hidden="true" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
-            a.value.serverUrl
-          }}</span>
+          <span class="server" aria-hidden="true">{{ a.value.serverUrl }}</span>
           <span class="status" aria-hidden="true">{{
             (a.value.profile.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
               | i18n

apps/desktop/src/app/layout/account-switcher.component.ts

@@ -7,6 +7,7 @@ import { concatMap, Subject, takeUntil } from "rxjs";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -17,14 +18,15 @@ type ActiveAccount = {
   name: string;
   email: string;
   avatarColor: string;
+  serverUrl: string;
 };
 
 export class SwitcherAccount extends Account {
   get serverUrl() {
     return this.removeWebProtocolFromString(
       this.settings?.environmentUrls?.base ??
         this.settings?.environmentUrls.api ??
-        "https://bitwarden.com"
+        this.settings.region
     );
   }
 
@@ -96,7 +98,8 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
     private authService: AuthService,
     private messagingService: MessagingService,
     private router: Router,
-    private tokenService: TokenService
+    private tokenService: TokenService,
+    private environmentService: EnvironmentService
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -110,12 +113,16 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
           }
 
           this.accounts = await this.createSwitcherAccounts(accounts);
+
           try {
             this.activeAccount = {
               id: await this.tokenService.getUserId(),
               name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
               email: await this.tokenService.getEmail(),
               avatarColor: await this.stateService.getAvatarColor(),
+              serverUrl: Utils.removeVaultfromHostname(
+                Utils.getHostname(this.environmentService.getWebVaultUrl())
+              ),
             };
           } catch {
             this.activeAccount = undefined;
@@ -156,6 +163,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
     [userId: string]: Account;
   }): Promise<{ [userId: string]: SwitcherAccount }> {
     const switcherAccounts: { [userId: string]: SwitcherAccount } = {};
+
     for (const userId in baseAccounts) {
       if (userId == null || userId === (await this.stateService.getUserId())) {
         continue;
@@ -165,11 +173,20 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
       baseAccounts[userId].settings.environmentUrls = await this.stateService.getEnvironmentUrls({
         userId: userId,
       });
+
+      const serverConfig = await this.stateService.getServerConfig({
+        userId: userId,
+      });
+
+      baseAccounts[userId].settings.region = Utils.removeVaultfromHostname(
+        Utils.getHostname(serverConfig.environment.vault)
+      );
       switcherAccounts[userId] = new SwitcherAccount(baseAccounts[userId]);
       switcherAccounts[userId].avatarColor = await this.stateService.getAvatarColor({
         userId: userId,
       });
     }
+
     return switcherAccounts;
   }
 }

apps/desktop/src/scss/header.scss

@@ -1,7 +1,7 @@
 .header {
   -webkit-app-region: drag;
-  min-height: 44px;
-  max-height: 44px;
+  min-height: 54px;
+  max-height: 54px;
   border-bottom: 1px solid #000000;
   display: grid;
   grid-template-columns: 25% 1fr 25%;
@@ -102,7 +102,7 @@
 .account-switcher {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-column-gap: 5px;
+  grid-column-gap: 10px;
   align-items: center;
   justify-items: center;
   padding: 0 10px;
@@ -121,11 +121,22 @@
     display: block;
   }
 
-  span {
+  .active-account {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: left;
+
+    div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    span {
+      font-size: $font-size-small;
+    }
   }
 
   &:hover {

libs/angular/src/auth/components/lock.component.ts

@@ -378,9 +378,15 @@ export class LockComponent implements OnInit, OnDestroy {
     this.email = await this.stateService.getEmail();
 
     const webVaultUrl = this.environmentService.getWebVaultUrl();
-    const vaultUrl =
-      webVaultUrl === "https://vault.bitwarden.com" ? "https://bitwarden.com" : webVaultUrl;
-    this.webVaultHostname = Utils.getHostname(vaultUrl);
+
+    switch (webVaultUrl) {
+      case "https://vault.bitwarden.com":
+      case "https://vault.bitwarden.eu":
+        this.webVaultHostname = Utils.removeVaultfromHostname(Utils.getHostname(webVaultUrl));
+        break;
+      default:
+        this.webVaultHostname = Utils.getHostname(webVaultUrl);
+    }
   }
 
   /**

libs/common/src/platform/misc/utils.ts

@@ -264,6 +264,10 @@ export class Utils {
     return null;
   }
 
+  static removeVaultfromHostname(uriString: string): string {
+    return uriString.replace(/vault./g, "");
+  }
+
   static getHost(uriString: string): string {
     const url = Utils.getUrl(uriString);
     try {