Move Trial Initiation to register route (#3129)

apps/web/src/app/modules/trial-initiation/trial-initiation.component.html

@@ -1,63 +1,75 @@
-<div
+<div *ngIf="accountCreateOnly" class="">
-  class="tw-bg-background-alt2 tw-h-96 tw--mt-48 tw-absolute tw--skew-y-3 tw-w-full tw--z-10"
+  <h1 class="tw-text-xl tw-text-center tw-mt-12" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
-></div>
+  <div
-
+    class="tw-m-auto tw-rounded tw-border tw-border-solid tw-bg-background tw-border-secondary-300 tw-min-w-xl tw-max-w-xl tw-p-8"
-<div class="tw-flex tw-max-w-screen-xl tw-min-w-4xl tw-mx-auto tw-px-4">
+  >
-  <div class="tw-w-1/2">
+    <app-register-form
-    <img
+      [queryParamEmail]="email"
-      alt="Bitwarden"
+      [enforcedPolicyOptions]="enforcedPolicyOptions"
-      style="height: 50px; width: 335px"
+    ></app-register-form>
-      class="tw-mt-6"
-      src="../../images/register-layout/logo-horizontal-white.svg"
-    />
-    <!-- This is to for illustrative purposes and content will be replaced by marketing -->
-    <div class="tw-pt-12">
-      <!-- Teams Body -->
-      <app-teams-content *ngIf="org === 'teams'"></app-teams-content>
-      <!-- Enterprise Body -->
-      <app-enterprise-content *ngIf="org === 'enterprise'"></app-enterprise-content>
-      <!-- Families Body -->
-      <app-families-content *ngIf="org === 'families'"></app-families-content>
-    </div>
   </div>
-  <div class="tw-w-1/2">
+</div>
-    <div class="tw-pt-56">
+<div *ngIf="!accountCreateOnly">
-      <div class="tw-rounded tw-border tw-border-solid tw-bg-background tw-border-secondary-300">
+  <div
-        <div class="tw-h-12 tw-flex tw-items-center tw-rounded-t tw-bg-secondary-100 tw-w-full">
+    class="tw-bg-background-alt2 tw-h-96 tw--mt-48 tw-absolute tw--skew-y-3 tw-w-full tw--z-10"
-          <h2 class="tw-uppercase tw-pl-4 tw-text-base tw-mb-0 tw-font-bold">
+  ></div>
-            Start your 7-Day free trial of Bitwarden for {{ org }}
+  <div class="tw-flex tw-max-w-screen-xl tw-min-w-4xl tw-mx-auto tw-px-4">
-          </h2>
+    <div class="tw-w-1/2">
+      <img
+        alt="Bitwarden"
+        style="height: 50px; width: 335px"
+        class="tw-mt-6"
+        src="../../images/register-layout/logo-horizontal-white.svg"
+      />
+      <!-- This is to for illustrative purposes and content will be replaced by marketing -->
+      <div class="tw-pt-12">
+        <!-- Teams Body -->
+        <app-teams-content *ngIf="org === 'teams'"></app-teams-content>
+        <!-- Enterprise Body -->
+        <app-enterprise-content *ngIf="org === 'enterprise'"></app-enterprise-content>
+        <!-- Families Body -->
+        <app-families-content *ngIf="org === 'families'"></app-families-content>
+      </div>
+    </div>
+    <div class="tw-w-1/2">
+      <div class="tw-pt-56">
+        <div class="tw-rounded tw-border tw-border-solid tw-bg-background tw-border-secondary-300">
+          <div class="tw-h-12 tw-flex tw-items-center tw-rounded-t tw-bg-secondary-100 tw-w-full">
+            <h2 class="tw-uppercase tw-pl-4 tw-text-base tw-mb-0 tw-font-bold">
+              Start your 7-Day free trial of Bitwarden for {{ org }}
+            </h2>
+          </div>
+          <app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">
+            <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
+              <app-register-form
+                [isInTrialFlow]="true"
+                (createdAccount)="createdAccount($event)"
+              ></app-register-form>
+            </app-vertical-step>
+            <app-vertical-step label="Organization Information" [subLabel]="orgInfoSubLabel">
+              <app-org-info [nameOnly]="true" [formGroup]="orgInfoFormGroup"></app-org-info>
+              <button
+                bitButton
+                buttonType="primary"
+                [disabled]="orgInfoFormGroup.get('name').hasError('required')"
+                cdkStepperNext
+              >
+                Next
+              </button>
+            </app-vertical-step>
+            <app-vertical-step label="Billing">
+              <!-- Replace with Billing step -->
+              <p>This is content of "Step 3"</p>
+              <button bitButton buttonType="secondary" cdkStepperPrevious>Back</button>
+              <button bitButton buttonType="primary" cdkStepperNext>Complete step</button>
+            </app-vertical-step>
+            <app-vertical-step label="Confirmation Details" subLabel="Fancy sub label">
+              <!-- Replace with Confirmation details step -->
+              <p>This is any content of "Step 4"</p>
+              <button bitButton buttonType="primary" cdkStepperNext>Complete</button>
+            </app-vertical-step>
+          </app-vertical-stepper>
         </div>
-        <app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">
-          <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
-            <app-register-form
-              [isInTrialFlow]="true"
-              (createdAccount)="createdAccount($event)"
-            ></app-register-form>
-          </app-vertical-step>
-          <app-vertical-step label="Organization Information" [subLabel]="orgInfoSubLabel">
-            <app-org-info [nameOnly]="true" [formGroup]="orgInfoFormGroup"></app-org-info>
-            <button
-              bitButton
-              buttonType="primary"
-              [disabled]="orgInfoFormGroup.get('name').hasError('required')"
-              cdkStepperNext
-            >
-              Next
-            </button>
-          </app-vertical-step>
-          <app-vertical-step label="Billing">
-            <!-- Replace with Billing step -->
-            <p>This is content of "Step 3"</p>
-            <button bitButton buttonType="secondary" cdkStepperPrevious>Back</button>
-            <button bitButton buttonType="primary" cdkStepperNext>Complete step</button>
-          </app-vertical-step>
-          <app-vertical-step label="Confirmation Details" subLabel="Fancy sub label">
-            <!-- Replace with Confirmation details step -->
-            <p>This is any content of "Step 4"</p>
-            <button bitButton buttonType="primary" cdkStepperNext>Complete</button>
-          </app-vertical-step>
-        </app-vertical-stepper>
       </div>
     </div>
   </div>

apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts

@@ -5,6 +5,15 @@ import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs";
 
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { PolicyData } from "@bitwarden/common/models/data/policyData";
+import { MasterPasswordPolicyOptions } from "@bitwarden/common/models/domain/masterPasswordPolicyOptions";
+import { Policy } from "@bitwarden/common/models/domain/policy";
+
 import { VerticalStepperComponent } from "../vertical-stepper/vertical-stepper.component";
 
 @Component({
@@ -15,6 +24,9 @@ export class TrialInitiationComponent implements OnInit {
   email = "";
   org = "teams";
   orgInfoSubLabel = "";
+  accountCreateOnly = true;
+  policies: Policy[];
+  enforcedPolicyOptions: MasterPasswordPolicyOptions;
   @ViewChild("stepper", { static: true }) verticalStepper: VerticalStepperComponent;
 
   orgInfoFormGroup = this.formBuilder.group({
@@ -29,18 +41,48 @@ export class TrialInitiationComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private formBuilder: FormBuilder,
-    private titleCasePipe: TitleCasePipe
+    private titleCasePipe: TitleCasePipe,
+    private stateService: StateService,
+    private apiService: ApiService,
+    private logService: LogService,
+    private policyService: PolicyService,
+    private i18nService: I18nService
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.route.queryParams.pipe(first()).subscribe((qParams) => {
       if (qParams.email != null && qParams.email.indexOf("@") > -1) {
         this.email = qParams.email;
       }
       if (qParams.org) {
         this.org = qParams.org;
+        this.accountCreateOnly = false;
       }
     });
+
+    const invite = await this.stateService.getOrganizationInvitation();
+    if (invite != null) {
+      try {
+        const policies = await this.apiService.getPoliciesByToken(
+          invite.organizationId,
+          invite.token,
+          invite.email,
+          invite.organizationUserId
+        );
+        if (policies.data != null) {
+          const policiesData = policies.data.map((p) => new PolicyData(p));
+          this.policies = policiesData.map((p) => new Policy(p));
+        }
+      } catch (e) {
+        this.logService.error(e);
+      }
+    }
+
+    if (this.policies != null) {
+      this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(
+        this.policies
+      );
+    }
   }
 
   stepSelectionChange(event: StepperSelectionEvent) {

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

@@ -63,16 +63,10 @@ const routes: Routes = [
       { path: "2fa", component: TwoFactorComponent, canActivate: [UnauthGuard] },
       {
         path: "register",
-        component: RegisterComponent,
+        component: flagEnabled("showTrial") ? TrialInitiationComponent : RegisterComponent,
         canActivate: [UnauthGuard],
         data: { titleId: "createAccount" },
       },
-      buildFlaggedRoute("showTrial", {
-        path: "trial",
-        component: TrialInitiationComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "startTrial" },
-      }),
       {
         path: "sso",
         component: SsoComponent,