[PM-22179] Redirect user to /setup-extension (bitwarden#15375)

* add end user feature flag

* add initial setup extension component and route

* redirect users from registration completion to the setup extension page

* add `hideIcon` to anon layout for web
- matches implementation on the browser.

* integrate with anon layout for extension wrapper

* add initial loading state

* conditionally redirect the user upon initialization

* redirect the user to the vault if the extension is installed

* add initial copy for setup-extension page

* add confirmation dialog for skipping the extension installation

* add success state for setup extension page

* only show loggedin toast when end user activation is not enabled.

* add image alt

* lower threshold for polling extension

* close the dialog when linking to the vault

* update party colors

* use the platform specific registration service to to only forward the web registrations to `/setup-extension`

* call `super` rather than `/vault` directly, it could change in the future

Author: nick-livefront

apps/web/src/app/auth/core/services/registration/web-registration-finish.service.spec.ts

@@ -9,6 +9,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
@@ -33,6 +34,7 @@ describe("WebRegistrationFinishService", () => {
   let policyApiService: MockProxy<PolicyApiServiceAbstraction>;
   let logService: MockProxy<LogService>;
   let policyService: MockProxy<PolicyService>;
+  let configService: MockProxy<ConfigService>;
   const mockUserId = Utils.newGuid() as UserId;
   let accountService: FakeAccountService;
 
@@ -44,6 +46,7 @@ describe("WebRegistrationFinishService", () => {
     logService = mock<LogService>();
     policyService = mock<PolicyService>();
     accountService = mockAccountServiceWith(mockUserId);
+    configService = mock<ConfigService>();
 
     service = new WebRegistrationFinishService(
       keyService,
@@ -53,6 +56,7 @@ describe("WebRegistrationFinishService", () => {
       logService,
       policyService,
       accountService,
+      configService,
     );
   });
 
@@ -418,4 +422,22 @@ describe("WebRegistrationFinishService", () => {
       );
     });
   });
+
+  describe("determineLoginSuccessRoute", () => {
+    it("returns /setup-extension when the end user activation feature flag is enabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(true);
+
+      const result = await service.determineLoginSuccessRoute();
+
+      expect(result).toBe("/setup-extension");
+    });
+
+    it("returns /vault when the end user activation feature flag is disabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(false);
+
+      const result = await service.determineLoginSuccessRoute();
+
+      expect(result).toBe("/vault");
+    });
+  });
 });

apps/web/src/app/auth/core/services/registration/web-registration-finish.service.ts

@@ -14,6 +14,8 @@ import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { RegisterFinishRequest } from "@bitwarden/common/auth/models/request/registration/register-finish.request";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { EncryptedString, EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { KeyService } from "@bitwarden/key-management";
@@ -32,6 +34,7 @@ export class WebRegistrationFinishService
     private logService: LogService,
     private policyService: PolicyService,
     private accountService: AccountService,
+    private configService: ConfigService,
   ) {
     super(keyService, accountApiService);
   }
@@ -76,6 +79,18 @@ export class WebRegistrationFinishService
     return masterPasswordPolicyOpts;
   }
 
+  override async determineLoginSuccessRoute(): Promise<string> {
+    const endUserActivationFlagEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.PM19315EndUserActivationMvp,
+    );
+
+    if (endUserActivationFlagEnabled) {
+      return "/setup-extension";
+    } else {
+      return super.determineLoginSuccessRoute();
+    }
+  }
+
   // Note: the org invite token and email verification are mutually exclusive. Only one will be present.
   override async buildRegisterRequest(
     email: string,

apps/web/src/app/core/core.module.ts

@@ -62,6 +62,7 @@ import {
   VaultTimeoutStringType,
 } from "@bitwarden/common/key-management/vault-timeout";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import {
   EnvironmentService,
   Urls,
@@ -256,6 +257,7 @@ const safeProviders: SafeProvider[] = [
       LogService,
       PolicyService,
       AccountService,
+      ConfigService,
     ],
   }),
   safeProvider({

apps/web/src/app/oss-routing.module.ts

@@ -81,6 +81,7 @@ import { AccessComponent, SendAccessExplainerComponent } from "./tools/send/send
 import { SendComponent } from "./tools/send/send.component";
 import { BrowserExtensionPromptInstallComponent } from "./vault/components/browser-extension-prompt/browser-extension-prompt-install.component";
 import { BrowserExtensionPromptComponent } from "./vault/components/browser-extension-prompt/browser-extension-prompt.component";
+import { SetupExtensionComponent } from "./vault/components/setup-extension/setup-extension.component";
 import { VaultModule } from "./vault/individual-vault/vault.module";
 
 const routes: Routes = [
@@ -579,6 +580,20 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "setup-extension",
+        data: {
+          hideCardWrapper: true,
+          hideIcon: true,
+          maxWidth: "3xl",
+        } satisfies AnonLayoutWrapperData,
+        children: [
+          {
+            path: "",
+            component: SetupExtensionComponent,
+          },
+        ],
+      },
     ],
   },
   {

apps/web/src/app/vault/components/setup-extension/add-extension-later-dialog.component.html

@@ -0,0 +1,25 @@
+<bit-simple-dialog>
+  <div bitDialogIcon>
+    <i class="bwi bwi-info-circle bwi-2x tw-text-info" aria-hidden="true"></i>
+  </div>
+  <ng-container bitDialogContent>
+    <div bitTypography="h3">
+      {{ "cannotAutofillPasswordsWithoutExtensionTitle" | i18n }}
+    </div>
+    <div bitTypography="body1">{{ "cannotAutofillPasswordsWithoutExtensionDesc" | i18n }}</div>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <a
+      bitButton
+      buttonType="primary"
+      [href]="webStoreUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ "getTheExtension" | i18n }}
+    </a>
+    <a bitButton buttonType="secondary" routerLink="/vault" bitDialogClose>
+      {{ "skipToWebApp" | i18n }}
+    </a>
+  </ng-container>
+</bit-simple-dialog>

apps/web/src/app/vault/components/setup-extension/add-extension-later-dialog.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { provideNoopAnimations } from "@angular/platform-browser/animations";
+import { RouterModule } from "@angular/router";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { AddExtensionLaterDialogComponent } from "./add-extension-later-dialog.component";
+
+describe("AddExtensionLaterDialogComponent", () => {
+  let fixture: ComponentFixture<AddExtensionLaterDialogComponent>;
+  const getDevice = jest.fn().mockReturnValue(null);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddExtensionLaterDialogComponent, RouterModule.forRoot([])],
+      providers: [
+        provideNoopAnimations(),
+        { provide: PlatformUtilsService, useValue: { getDevice } },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddExtensionLaterDialogComponent);
+    fixture.detectChanges();
+  });
+
+  it("renders the 'Get the Extension' link with correct href", () => {
+    const link = fixture.debugElement.queryAll(By.css("a[bitButton]"))[0];
+
+    expect(link.nativeElement.getAttribute("href")).toBe(
+      "https://bitwarden.com/download/#downloads-web-browser",
+    );
+  });
+
+  it("renders the 'Skip to Web App' link with correct routerLink", () => {
+    const skipLink = fixture.debugElement.queryAll(By.css("a[bitButton]"))[1];
+
+    expect(skipLink.attributes.href).toBe("/vault");
+  });
+});

apps/web/src/app/vault/components/setup-extension/add-extension-later-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, inject, OnInit } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { getWebStoreUrl } from "@bitwarden/common/vault/utils/get-web-store-url";
+import { ButtonComponent, DialogModule, TypographyModule } from "@bitwarden/components";
+
+@Component({
+  selector: "vault-add-extension-later-dialog",
+  templateUrl: "./add-extension-later-dialog.component.html",
+  imports: [DialogModule, JslibModule, TypographyModule, ButtonComponent, RouterModule],
+})
+export class AddExtensionLaterDialogComponent implements OnInit {
+  private platformUtilsService = inject(PlatformUtilsService);
+
+  /** Download Url for the extension based on the browser */
+  protected webStoreUrl: string = "";
+
+  ngOnInit(): void {
+    this.webStoreUrl = getWebStoreUrl(this.platformUtilsService.getDevice());
+  }
+}

apps/web/src/app/vault/components/setup-extension/setup-extension.component.html

@@ -0,0 +1,59 @@
+<i
+  *ngIf="state === SetupExtensionState.Loading"
+  class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
+  aria-hidden="true"
+  [appA11yTitle]="'loading' | i18n"
+></i>
+
+<section *ngIf="state === SetupExtensionState.NeedsExtension" class="tw-text-center tw-mt-4">
+  <h1 bitTypography="h2">{{ "setupExtensionPageTitle" | i18n }}</h1>
+  <h2 bitTypography="body1">{{ "setupExtensionPageDescription" | i18n }}</h2>
+  <div class="tw-mb-6">
+    <!-- Placeholder - will be removed in following tickets -->
+    <img
+      class="tw-max-w-3xl"
+      [alt]="'setupExtensionContentAlt' | i18n"
+      src="/images/setup-extension/setup-extension-placeholder.png"
+    />
+  </div>
+  <div class="tw-flex tw-flex-col tw-gap-4 tw-items-center">
+    <a
+      bitButton
+      buttonType="primary"
+      [href]="webStoreUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ "getTheExtension" | i18n }}
+    </a>
+    <button type="button" bitLink (click)="addItLater()">
+      {{ "addItLater" | i18n }}
+    </button>
+  </div>
+</section>
+
+<section *ngIf="state === SetupExtensionState.Success" class="tw-flex tw-flex-col tw-items-center">
+  <bit-icon [icon]="PartyIcon"></bit-icon>
+  <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4">{{ "bitwardenExtensionInstalled" | i18n }}</h1>
+  <div
+    class="tw-flex tw-flex-col tw-rounded-2xl tw-bg-background tw-border tw-border-solid tw-border-secondary-300 tw-p-8"
+  >
+    <p>{{ "openExtensionToAutofill" | i18n }}</p>
+    <button type="button" bitButton buttonType="primary" class="tw-mb-2" (click)="openExtension()">
+      {{ "openBitwardenExtension" | i18n }}
+    </button>
+    <a bitButton buttonType="secondary" routerLink="/vault">
+      {{ "skipToWebApp" | i18n }}
+    </a>
+  </div>
+  <p class="tw-mt-10 tw-max-w-96 tw-text-center">
+    {{ "gettingStartedWithBitwardenPart1" | i18n }}
+    <a bitLink href="https://bitwarden.com/help/">
+      {{ "gettingStartedWithBitwardenPart2" | i18n }}
+    </a>
+    {{ "and" | i18n }}
+    <a bitLink href="https://bitwarden.com/help/learning-center/">
+      {{ "gettingStartedWithBitwardenPart3" | i18n }}
+    </a>
+  </p>
+</section>