Implement create account step (#3073)

This commit is contained in:
Robyn MacCallum 2022-07-11 11:06:32 -04:00 committed by GitHub
parent c0bcdf4637
commit 5ed6b9fb74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 9 deletions

View File

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

View File

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

View File

@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
import { FormFieldModule } from "@bitwarden/components"; import { FormFieldModule } from "@bitwarden/components";
import { RegisterFormModule } from "../register-form/register-form.module";
import { SharedModule } from "../shared.module"; import { SharedModule } from "../shared.module";
import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.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"; import { TrialInitiationComponent } from "./trial-initiation.component";
@NgModule({ @NgModule({
imports: [SharedModule, CdkStepperModule, VerticalStepperModule, FormFieldModule], imports: [
SharedModule,
CdkStepperModule,
VerticalStepperModule,
FormFieldModule,
RegisterFormModule,
],
declarations: [ declarations: [
TrialInitiationComponent, TrialInitiationComponent,
EnterpriseContentComponent, EnterpriseContentComponent,

View File

@ -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 { FormBuilder, Validators } from "@angular/forms";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
@ -28,6 +28,9 @@ import { CaptchaProtectedComponent } from "./captchaProtected.component";
@Directive() @Directive()
export class RegisterComponent extends CaptchaProtectedComponent implements OnInit { export class RegisterComponent extends CaptchaProtectedComponent implements OnInit {
@Input() isInTrialFlow = false;
@Output() createdAccount = new EventEmitter<string>();
showPassword = false; showPassword = false;
formPromise: Promise<any>; formPromise: Promise<any>;
masterPasswordScore: number; masterPasswordScore: number;
@ -194,7 +197,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
} }
} }
this.platformUtilsService.showToast("success", null, this.i18nService.t("newAccountCreated")); 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) { } catch (e) {
this.logService.error(e); this.logService.error(e);
} }