diff --git a/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html b/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html
index 3145e20d4f..f51c370beb 100644
--- a/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html
@@ -1,17 +1,35 @@
-
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
index b4dad835ee..9785bf05ab 100644
--- a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
@@ -8,6 +8,7 @@
[label]="regionConfig.domain"
>
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
index f01873dd3e..fe41f0a3ac 100644
--- a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
@@ -1,17 +1,26 @@
import { CommonModule } from "@angular/common";
import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { EMPTY, Subject, from, map, of, switchMap, takeUntil, tap } from "rxjs";
+import { Subject, from, map, of, pairwise, startWith, switchMap, takeUntil, tap } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ClientType } from "@bitwarden/common/enums";
import {
Environment,
EnvironmentService,
Region,
RegionConfig,
} from "@bitwarden/common/platform/abstractions/environment.service";
-import { FormFieldModule, SelectModule } from "@bitwarden/components";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService, FormFieldModule, SelectModule, ToastService } from "@bitwarden/components";
+import { RegistrationSelfHostedEnvConfigDialogComponent } from "./registration-self-hosted-env-config-dialog.component";
+
+/**
+ * Component for selecting the environment to register with in the email verification registration flow.
+ * Outputs the selected region to the parent component so it can respond as necessary.
+ */
@Component({
standalone: true,
selector: "auth-registration-env-selector",
@@ -19,7 +28,7 @@ import { FormFieldModule, SelectModule } from "@bitwarden/components";
imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule],
})
export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
- @Output() onOpenSelfHostedSettings = new EventEmitter();
+ @Output() selectedRegionChange = new EventEmitter
();
ServerEnvironmentType = Region;
@@ -33,12 +42,24 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
availableRegionConfigs: RegionConfig[] = this.environmentService.availableRegions();
+ private selectedRegionFromEnv: RegionConfig | Region.SelfHosted;
+
+ isDesktopOrBrowserExtension = false;
+
private destroy$ = new Subject();
constructor(
private formBuilder: FormBuilder,
private environmentService: EnvironmentService,
- ) {}
+ private dialogService: DialogService,
+ private i18nService: I18nService,
+ private toastService: ToastService,
+ private platformUtilsService: PlatformUtilsService,
+ ) {
+ const clientType = platformUtilsService.getClientType();
+ this.isDesktopOrBrowserExtension =
+ clientType === ClientType.Desktop || clientType === ClientType.Browser;
+ }
async ngOnInit() {
await this.initSelectedRegionAndListenForEnvChanges();
@@ -61,13 +82,17 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
return regionConfig;
}),
- tap((selectedRegionInitialValue: RegionConfig | Region.SelfHosted) => {
- // This inits the form control with the selected region, but
- // it also sets the value to self hosted if the self hosted settings are saved successfully
- // in the client specific implementation managed by the parent component.
- // It also resets the value to the previously selected region if the self hosted
- // settings are closed without saving. We don't emit the event to avoid a loop.
- this.selectedRegion.setValue(selectedRegionInitialValue, { emitEvent: false });
+ tap((selectedRegionFromEnv: RegionConfig | Region.SelfHosted) => {
+ // Only set the value if it is different from the current value.
+ if (selectedRegionFromEnv !== this.selectedRegion.value) {
+ // Don't emit to avoid triggering the selectedRegion valueChanges subscription
+ // which could loop back to this code.
+ this.selectedRegion.setValue(selectedRegionFromEnv, { emitEvent: false });
+ }
+
+ // Save this off so we can reset the value to the previously selected region
+ // if the self hosted settings are closed without saving.
+ this.selectedRegionFromEnv = selectedRegionFromEnv;
}),
takeUntil(this.destroy$),
)
@@ -77,23 +102,66 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
private listenForSelectedRegionChanges() {
this.selectedRegion.valueChanges
.pipe(
- switchMap((selectedRegionConfig: RegionConfig | Region.SelfHosted | null) => {
- if (selectedRegionConfig === null) {
- return of(null);
- }
+ startWith(null), // required so that first user choice is not ignored
+ pairwise(),
+ switchMap(
+ ([prevSelectedRegion, selectedRegion]: [
+ RegionConfig | Region.SelfHosted | null,
+ RegionConfig | Region.SelfHosted | null,
+ ]) => {
+ if (selectedRegion === null) {
+ this.selectedRegionChange.emit(selectedRegion);
+ return of(null);
+ }
- if (selectedRegionConfig === Region.SelfHosted) {
- this.onOpenSelfHostedSettings.emit();
- return EMPTY;
- }
+ if (selectedRegion === Region.SelfHosted) {
+ return from(
+ RegistrationSelfHostedEnvConfigDialogComponent.open(this.dialogService),
+ ).pipe(
+ tap((result: boolean | undefined) =>
+ this.handleSelfHostedEnvConfigDialogResult(result, prevSelectedRegion),
+ ),
+ );
+ }
- return from(this.environmentService.setEnvironment(selectedRegionConfig.key));
- }),
+ this.selectedRegionChange.emit(selectedRegion);
+ return from(this.environmentService.setEnvironment(selectedRegion.key));
+ },
+ ),
takeUntil(this.destroy$),
)
.subscribe();
}
+ private handleSelfHostedEnvConfigDialogResult(
+ result: boolean | undefined,
+ prevSelectedRegion: RegionConfig | Region.SelfHosted | null,
+ ) {
+ if (result === true) {
+ this.selectedRegionChange.emit(Region.SelfHosted);
+ this.toastService.showToast({
+ variant: "success",
+ title: null,
+ message: this.i18nService.t("environmentSaved"),
+ });
+ return;
+ }
+
+ // Reset the value to the previously selected region or the current env setting
+ // if the self hosted env settings dialog is closed without saving.
+ if (
+ (result === false || result === undefined) &&
+ prevSelectedRegion !== null &&
+ prevSelectedRegion !== Region.SelfHosted
+ ) {
+ this.selectedRegionChange.emit(prevSelectedRegion);
+ this.selectedRegion.setValue(prevSelectedRegion, { emitEvent: false });
+ } else {
+ this.selectedRegionChange.emit(this.selectedRegionFromEnv);
+ this.selectedRegion.setValue(this.selectedRegionFromEnv, { emitEvent: false });
+ }
+ }
+
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.html b/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.html
new file mode 100644
index 0000000000..92c2f9f2f7
--- /dev/null
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.html
@@ -0,0 +1,107 @@
+
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.ts b/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.ts
new file mode 100644
index 0000000000..2bedb4b358
--- /dev/null
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-self-hosted-env-config-dialog.component.ts
@@ -0,0 +1,164 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import {
+ AbstractControl,
+ FormBuilder,
+ FormControl,
+ FormGroup,
+ ReactiveFormsModule,
+ ValidationErrors,
+ ValidatorFn,
+} from "@angular/forms";
+import { Subject, firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+ EnvironmentService,
+ Region,
+} from "@bitwarden/common/platform/abstractions/environment.service";
+import {
+ AsyncActionsModule,
+ ButtonModule,
+ DialogModule,
+ DialogService,
+ FormFieldModule,
+ LinkModule,
+ TypographyModule,
+} from "@bitwarden/components";
+
+/**
+ * Validator for self-hosted environment settings form.
+ * It enforces that at least one URL is provided.
+ */
+function selfHostedEnvSettingsFormValidator(): ValidatorFn {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const formGroup = control as FormGroup;
+ const baseUrl = formGroup.get("baseUrl")?.value;
+ const webVaultUrl = formGroup.get("webVaultUrl")?.value;
+ const apiUrl = formGroup.get("apiUrl")?.value;
+ const identityUrl = formGroup.get("identityUrl")?.value;
+ const iconsUrl = formGroup.get("iconsUrl")?.value;
+ const notificationsUrl = formGroup.get("notificationsUrl")?.value;
+
+ if (baseUrl || webVaultUrl || apiUrl || identityUrl || iconsUrl || notificationsUrl) {
+ return null; // valid
+ } else {
+ return { atLeastOneUrlIsRequired: true }; // invalid
+ }
+ };
+}
+
+/**
+ * Dialog for configuring self-hosted environment settings.
+ */
+@Component({
+ standalone: true,
+ selector: "auth-registration-self-hosted-env-config-dialog",
+ templateUrl: "registration-self-hosted-env-config-dialog.component.html",
+ imports: [
+ CommonModule,
+ JslibModule,
+ DialogModule,
+ ButtonModule,
+ LinkModule,
+ TypographyModule,
+ ReactiveFormsModule,
+ FormFieldModule,
+ AsyncActionsModule,
+ ],
+})
+export class RegistrationSelfHostedEnvConfigDialogComponent implements OnInit, OnDestroy {
+ /**
+ * Opens the dialog.
+ * @param dialogService - Dialog service.
+ * @returns Promise that resolves to true if the dialog was closed with a successful result, false otherwise.
+ */
+ static async open(dialogService: DialogService): Promise {
+ const dialogRef = dialogService.open(RegistrationSelfHostedEnvConfigDialogComponent, {
+ disableClose: false,
+ });
+
+ const dialogResult = await firstValueFrom(dialogRef.closed);
+
+ return dialogResult;
+ }
+
+ formGroup = this.formBuilder.group(
+ {
+ baseUrl: [null],
+ webVaultUrl: [null],
+ apiUrl: [null],
+ identityUrl: [null],
+ iconsUrl: [null],
+ notificationsUrl: [null],
+ },
+ { validators: selfHostedEnvSettingsFormValidator() },
+ );
+
+ get baseUrl(): FormControl {
+ return this.formGroup.get("baseUrl") as FormControl;
+ }
+
+ get webVaultUrl(): FormControl {
+ return this.formGroup.get("webVaultUrl") as FormControl;
+ }
+
+ get apiUrl(): FormControl {
+ return this.formGroup.get("apiUrl") as FormControl;
+ }
+
+ get identityUrl(): FormControl {
+ return this.formGroup.get("identityUrl") as FormControl;
+ }
+
+ get iconsUrl(): FormControl {
+ return this.formGroup.get("iconsUrl") as FormControl;
+ }
+
+ get notificationsUrl(): FormControl {
+ return this.formGroup.get("notificationsUrl") as FormControl;
+ }
+
+ showCustomEnv = false;
+ showErrorSummary = false;
+
+ private destroy$ = new Subject();
+
+ constructor(
+ private dialogRef: DialogRef,
+ private formBuilder: FormBuilder,
+ private environmentService: EnvironmentService,
+ ) {}
+
+ ngOnInit() {}
+
+ submit = async () => {
+ this.showErrorSummary = false;
+
+ if (this.formGroup.invalid) {
+ this.showErrorSummary = true;
+ return;
+ }
+
+ await this.environmentService.setEnvironment(Region.SelfHosted, {
+ base: this.baseUrl.value,
+ api: this.apiUrl.value,
+ identity: this.identityUrl.value,
+ webVault: this.webVaultUrl.value,
+ icons: this.iconsUrl.value,
+ notifications: this.notificationsUrl.value,
+ });
+
+ this.dialogRef.close(true);
+ };
+
+ async cancel() {
+ this.dialogRef.close(false);
+ }
+
+ ngOnDestroy() {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}
diff --git a/libs/auth/src/angular/registration/registration-start/registration-start.component.html b/libs/auth/src/angular/registration/registration-start/registration-start.component.html
index 8f64232f9c..8da2eb76b5 100644
--- a/libs/auth/src/angular/registration/registration-start/registration-start.component.html
+++ b/libs/auth/src/angular/registration/registration-start/registration-start.component.html
@@ -1,5 +1,9 @@