Implement create account step (#3073)

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

@@ -28,12 +28,13 @@
             Start your 7-Day free trial of Bitwarden for {{ org }}
           </h2>
         </div>
-        <app-vertical-stepper linear>
+        <app-vertical-stepper #stepper linear>
           <!-- Content is for demo purposes. Replace with form components for each step-->
-          <app-vertical-step label="Create Account" [editable]="false">
-            <!-- Replace content with Registration step -->
-            <p>This is content of "Step 1" that has editable set to false</p>
-            <button bitButton buttonType="primary" cdkStepperNext>Complete step</button>
+          <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="Create Organization" subLabel="It better be a good org">
             <!-- Replace with Org creation step -->

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

@@ -1,7 +1,9 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs";
 
+import { VerticalStepperComponent } from "../vertical-stepper/vertical-stepper.component";
+
 @Component({
   selector: "app-trial",
   templateUrl: "trial-initiation.component.html",
@@ -9,6 +11,7 @@ import { first } from "rxjs";
 export class TrialInitiationComponent implements OnInit {
   email = "";
   org = "teams";
+  @ViewChild("stepper", { static: true }) verticalStepper: VerticalStepperComponent;
 
   constructor(private route: ActivatedRoute) {}
 
@@ -22,4 +25,9 @@ export class TrialInitiationComponent implements OnInit {
       }
     });
   }
+
+  createdAccount(email: string) {
+    this.email = email;
+    this.verticalStepper.next();
+  }
 }

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

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 
 import { FormFieldModule } from "@bitwarden/components";
 
+import { RegisterFormModule } from "../register-form/register-form.module";
 import { SharedModule } from "../shared.module";
 import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module";
 
@@ -12,7 +13,13 @@ import { TeamsContentComponent } from "./teams-content.component";
 import { TrialInitiationComponent } from "./trial-initiation.component";
 
 @NgModule({
-  imports: [SharedModule, CdkStepperModule, VerticalStepperModule, FormFieldModule],
+  imports: [
+    SharedModule,
+    CdkStepperModule,
+    VerticalStepperModule,
+    FormFieldModule,
+    RegisterFormModule,
+  ],
   declarations: [
     TrialInitiationComponent,
     EnterpriseContentComponent,

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

@@ -1,4 +1,4 @@
-import { Directive, OnInit } from "@angular/core";
+import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
@@ -28,6 +28,9 @@ import { CaptchaProtectedComponent } from "./captchaProtected.component";
 
 @Directive()
 export class RegisterComponent extends CaptchaProtectedComponent implements OnInit {
+  @Input() isInTrialFlow = false;
+  @Output() createdAccount = new EventEmitter<string>();
+
   showPassword = false;
   formPromise: Promise<any>;
   masterPasswordScore: number;
@@ -194,7 +197,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
         }
       }
       this.platformUtilsService.showToast("success", null, this.i18nService.t("newAccountCreated"));
-      this.router.navigate([this.successRoute], { queryParams: { email: email } });
+      if (this.isInTrialFlow) {
+        this.createdAccount.emit(this.formGroup.get("email")?.value);
+      } else {
+        this.router.navigate([this.successRoute], { queryParams: { email: email } });
+      }
     } catch (e) {
       this.logService.error(e);
     }