[PM-1019] Environment selection clients (#5480)

* [PM-169][PM-142][PM-191] Add Environments to Web and Desktop (#5294)

* [PM-1351] Add property to server-config.response. Change config to be able to fetch without being authed.

* [PM-1351] fetch every hour.

* [PM-1351] fetch on vault sync.

* [PM-1351] browser desktop fetch configs on sync complete.

* [PM-1351] Add methods to retrieve feature flags

* [PM-1351] Add enum to use as key to get values feature flag values

* [PM-1351] Remove debug code

* [PM-1351] Get flags when unauthed. Add enums as params. Hourly always fetch.

* [PM-1351] add check for authed user using auth service

* [PM-169] Web: add drop down to select environment

* [PM-169] Fix pop up menu margins. Add DisplayEuEnvironmentFlag.

* [PM-169] Change menu name.

* [PM-169] Add environment selector ts and html. Add declaration and import on login.module

* [PM-169] Add environment selector to desktop.

* [PM-169] Ignore lint error.

* [PM-169] add takeUntil to subscribes

* [PM-191] PR Fixes, code format

* [PM-168] Add Environments to extension login/registration (#5434)

apps/web/src/app/layouts/frontend-layout.component.html

@@ -1,5 +1,34 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
+  <div class="tw-mb-1">
+    <bit-menu #environmentOptions>
+      <a bitMenuItem href="https://vault.bitwarden.com" class="pr-4">
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check pb-1"
+          aria-hidden="true"
+          [style.visibility]="isEuServer ? 'hidden' : 'visible'"
+        ></i>
+        <img src="../../images/us_flag.png" alt="" class="pb-1 mr-1" />
+        {{ "us" | i18n }}
+      </a>
+      <a bitMenuItem href="https://vault.bitwarden.eu" class="pr-4" *ngIf="euServerFlagEnabled">
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check pb-1"
+          aria-hidden="true"
+          [style.visibility]="isEuServer ? 'visible' : 'hidden'"
+        ></i>
+        <img src="../../images/eu_flag.png" alt="" class="pb-1 mr-1" />
+        {{ "eu" | i18n }}
+      </a>
+    </bit-menu>
+    {{ "region" | i18n }}:
+    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
+      <b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
+      ><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+    </a>
+    <br />
+  </div>
+
   &copy; {{ year }} Bitwarden Inc. <br />
   {{ "versionNumber" | i18n : version }}
 </div>

apps/web/src/app/layouts/frontend-layout.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 
+import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { Utils } from "@bitwarden/common/misc/utils";
 
 @Component({
   selector: "app-frontend-layout",
@@ -9,12 +12,22 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 export class FrontendLayoutComponent implements OnInit, OnDestroy {
   version: string;
   year = "2015";
+  isEuServer = true;
+  euServerFlagEnabled: boolean;
 
-  constructor(private platformUtilsService: PlatformUtilsService) {}
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private configService: ConfigServiceAbstraction
+  ) {}
 
   async ngOnInit() {
     this.year = new Date().getFullYear().toString();
     this.version = await this.platformUtilsService.getApplicationVersion();
+    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
+      FeatureFlag.DisplayEuEnvironmentFlag
+    );
+    this.isEuServer = Utils.getDomain(window.location.href).includes(".eu");
+
     document.body.classList.add("layout_frontend");
   }
 

apps/web/src/locales/en/messages.json

@@ -6789,6 +6789,17 @@
   "enforceOnLoginDesc": {
     "message": "Require existing members to change their passwords"
   },
+  "region": {
+    "message": "Region"
+  },
+  "eu": {
+    "message": "EU",
+    "description": "European Union"
+  },
+  "us": {
+    "message": "US",
+    "description": "United States"
+  },
   "smProjectDeleteAccessRestricted": {
     "message": "You don't have permissions to delete this project",
     "description": "The individual description shown to the user when the user doesn't have access to delete a project."