[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)

libs/angular/src/auth/components/environment-selector.component.html

@@ -0,0 +1,86 @@
+<label class="environment-selector-btn">
+  {{ "region" | i18n }}:
+  <a
+    (click)="toggle(null)"
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    aria-haspopup="menu"
+    aria-controls="cdk-overlay-container"
+    [ngSwitch]="selectedEnvironment"
+  >
+    <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{ "us" | i18n }}</label>
+    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{ "eu" | i18n }}</label>
+    <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
+      "selfHosted" | i18n
+    }}</label>
+    <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+  </a>
+</label>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="trigger"
+  (backdropClick)="close()"
+  (detach)="close()"
+  [cdkConnectedOverlayOpen]="isOpen"
+  [cdkConnectedOverlayPositions]="overlayPostition"
+>
+  <div class="box-content">
+    <div class="environment-selector-dialog" [@transformPanel]="'open'" role="dialog">
+      <button
+        type="button"
+        class="environment-selector-dialog-item"
+        (click)="toggle(ServerEnvironmentType.US)"
+      >
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+          [style.visibility]="
+            selectedEnvironment === ServerEnvironmentType.US ? 'visible' : 'hidden'
+          "
+        ></i>
+        <img class="img-us" alt="" />
+        <span>{{ "us" | i18n }}</span>
+      </button>
+      <br />
+      <button
+        type="button"
+        class="environment-selector-dialog-item"
+        (click)="toggle(ServerEnvironmentType.EU)"
+      >
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+          [style.visibility]="
+            selectedEnvironment === ServerEnvironmentType.EU ? 'visible' : 'hidden'
+          "
+        ></i>
+        <img class="img-eu" alt="" />
+        <span>{{ "eu" | i18n }}</span>
+      </button>
+      <br />
+      <button
+        type="button"
+        class="environment-selector-dialog-item"
+        (click)="toggle(ServerEnvironmentType.SelfHosted)"
+      >
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+          [style.visibility]="
+            selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
+          "
+        ></i>
+        <i
+          class="bwi bwi-fw bwi-sm bwi-pencil-square"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+        ></i>
+        <span>{{ "selfHosted" | i18n }}</span>
+      </button>
+    </div>
+  </div>
+</ng-template>

libs/angular/src/auth/components/environment-selector.component.ts

@@ -0,0 +1,103 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { ConnectedPosition } from "@angular/cdk/overlay";
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
+import { Router } from "@angular/router";
+import { Subject } from "rxjs";
+
+import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
+import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+
+@Component({
+  selector: "environment-selector",
+  templateUrl: "environment-selector.component.html",
+  animations: [
+    trigger("transformPanel", [
+      state(
+        "void",
+        style({
+          opacity: 0,
+        })
+      ),
+      transition(
+        "void => open",
+        animate(
+          "100ms linear",
+          style({
+            opacity: 1,
+          })
+        )
+      ),
+      transition("* => void", animate("100ms linear", style({ opacity: 0 }))),
+    ]),
+  ],
+})
+export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
+  @Output() onOpenSelfHostedSettings = new EventEmitter();
+  isOpen = false;
+  showingModal = false;
+  selectedEnvironment: ServerEnvironment;
+  ServerEnvironmentType = ServerEnvironment;
+  euServerFlagEnabled: boolean;
+  overlayPostition: ConnectedPosition[] = [
+    {
+      originX: "start",
+      originY: "bottom",
+      overlayX: "start",
+      overlayY: "top",
+    },
+  ];
+  protected componentDestroyed$: Subject<void> = new Subject();
+
+  constructor(
+    protected environmentService: EnvironmentService,
+    protected configService: ConfigServiceAbstraction,
+    protected router: Router
+  ) {}
+
+  async ngOnInit() {
+    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
+      FeatureFlag.DisplayEuEnvironmentFlag
+    );
+    this.updateEnvironmentInfo();
+  }
+
+  ngOnDestroy(): void {
+    this.componentDestroyed$.next();
+    this.componentDestroyed$.complete();
+  }
+
+  async toggle(option: ServerEnvironment) {
+    this.isOpen = !this.isOpen;
+    if (option === ServerEnvironment.EU) {
+      await this.environmentService.setUrls({ base: "https://vault.bitwarden.eu" });
+    } else if (option === ServerEnvironment.US) {
+      await this.environmentService.setUrls({ base: "https://vault.bitwarden.com" });
+    } else if (option === ServerEnvironment.SelfHosted) {
+      this.onOpenSelfHostedSettings.emit();
+    }
+    this.updateEnvironmentInfo();
+  }
+
+  updateEnvironmentInfo() {
+    const webvaultUrl = this.environmentService.getWebVaultUrl();
+    if (this.environmentService.isSelfHosted()) {
+      this.selectedEnvironment = ServerEnvironment.SelfHosted;
+    } else if (webvaultUrl != null && webvaultUrl.includes("bitwarden.eu")) {
+      this.selectedEnvironment = ServerEnvironment.EU;
+    } else {
+      this.selectedEnvironment = ServerEnvironment.US;
+    }
+  }
+
+  close() {
+    this.isOpen = false;
+    this.updateEnvironmentInfo();
+  }
+}
+
+enum ServerEnvironment {
+  US = "US",
+  EU = "EU",
+  SelfHosted = "Self-hosted",
+}

libs/angular/src/components/environment.component.ts

@@ -4,6 +4,8 @@ import { EnvironmentService } from "@bitwarden/common/abstractions/environment.s
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 
+import { ModalService } from "../services/modal.service";
+
 @Directive()
 export class EnvironmentComponent {
   @Output() onSaved = new EventEmitter();
@@ -19,7 +21,8 @@ export class EnvironmentComponent {
   constructor(
     protected platformUtilsService: PlatformUtilsService,
     protected environmentService: EnvironmentService,
-    protected i18nService: I18nService
+    protected i18nService: I18nService,
+    private modalService: ModalService
   ) {
     const urls = this.environmentService.getUrls();
 
@@ -59,5 +62,6 @@ export class EnvironmentComponent {
 
   protected saved() {
     this.onSaved.emit();
+    this.modalService.closeAll();
   }
 }

libs/common/src/services/environment.service.ts

@@ -218,6 +218,8 @@ export class EnvironmentService implements EnvironmentServiceAbstraction {
     return ![
       "http://vault.bitwarden.com",
       "https://vault.bitwarden.com",
+      "http://vault.bitwarden.eu",
+      "https://vault.bitwarden.eu",
       "http://vault.qa.bitwarden.pw",
       "https://vault.qa.bitwarden.pw",
     ].includes(this.getWebVaultUrl());