[PM-1655] Trial Registration Layout (#9091)

* add messaging for finish sign up component

* Add product enum for finish sign up components

* Allow confirmation details component to display secret manager confirmation

* add FinishSignUp component

- Started as exact copy of trial initiation component
- Consolidated with secrets manager trial components

* Integration finish sign up component into routing

- Use anon layout component
- Add resolver to pass the accurate title to the layout

* migrate to product tier type

* use existing ProductType enum

* migrate to accept org service

* fix query param parsing for free trial text

* migrate finish sign up to complete trial naming

* migrate fully to productTier

* fix import of free trial resolver

* increase max width of anon layout

* add auth-input component

* refactor component makeup

* export the users password if needed to auto login the user

* handle login situations where a stepper isn't used

* fix type check

* allow max width of anon layout to be configurable

* remove account created toast

* update productTier query param in text resolver

* set maxWidth for secrets manager trial route

* parse product query param as an int

* properly show registration error

* update routes to be from the root rather than relative

* install updated prettier and apply fixes

* fix missing password in test

---------

Co-authored-by: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.html

@@ -3,6 +3,7 @@
   [subtitle]="pageSubtitle"
   [icon]="pageIcon"
   [showReadonlyHostname]="showReadonlyHostname"
+  [maxWidth]="maxWidth"
 >
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts

@@ -13,6 +13,7 @@ export interface AnonLayoutWrapperData {
   pageSubtitle?: string;
   pageIcon?: Icon;
   showReadonlyHostname?: boolean;
+  maxWidth?: "md" | "3xl";
 }
 
 @Component({
@@ -27,6 +28,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageSubtitle: string;
   protected pageIcon: Icon;
   protected showReadonlyHostname: boolean;
+  protected maxWidth: "md" | "3xl";
 
   constructor(
     private router: Router,
@@ -75,6 +77,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     }
 
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
+    this.maxWidth = firstChildRouteData["maxWidth"];
   }
 
   private listenForServiceDataChanges() {

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -15,6 +15,7 @@
   </div>
   <div
     class="tw-mb-auto tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    [ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
   >
     <div
       class="tw-rounded-xl tw-mb-9 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -23,6 +23,12 @@ export class AnonLayoutComponent {
   @Input() subtitle: string;
   @Input() icon: Icon;
   @Input() showReadonlyHostname: boolean;
+  /**
+   * Max width of the layout content
+   *
+   * @default 'md'
+   */
+  @Input() maxWidth: "md" | "3xl" = "md";
 
   protected logo: Icon;
 
@@ -45,6 +51,7 @@ export class AnonLayoutComponent {
   }
 
   async ngOnInit() {
+    this.maxWidth = this.maxWidth ?? "md";
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
     this.theme = await firstValueFrom(this.themeStateService.selectedTheme$);

libs/auth/src/angular/input-password/input-password.component.ts

@@ -190,6 +190,7 @@ export class InputPasswordComponent {
       localMasterKeyHash,
       kdfConfig,
       hint: this.formGroup.controls.hint.value,
+      password,
     });
   };
 }

libs/auth/src/angular/input-password/password-input-result.ts

@@ -7,4 +7,5 @@ export interface PasswordInputResult {
   localMasterKeyHash: string;
   kdfConfig: PBKDF2KdfConfig;
   hint: string;
+  password: string;
 }

libs/auth/src/angular/registration/registration-finish/default-registration-finish.service.spec.ts

@@ -57,6 +57,7 @@ describe("DefaultRegistrationFinishService", () => {
         localMasterKeyHash: "localMasterKeyHash",
         kdfConfig: DEFAULT_KDF_CONFIG,
         hint: "hint",
+        password: "password",
       };
 
       userKey = new SymmetricCryptoKey(new Uint8Array(64).buffer as CsprngArray) as UserKey;

libs/auth/src/angular/set-password-jit/default-set-password-jit.service.spec.ts

@@ -110,6 +110,7 @@ describe("DefaultSetPasswordJitService", () => {
         localMasterKeyHash: "localMasterKeyHash",
         hint: "hint",
         kdfConfig: DEFAULT_KDF_CONFIG,
+        password: "password",
       };
 
       credentials = {

libs/common/src/billing/enums/index.ts

@@ -4,3 +4,4 @@ export * from "./plan-type.enum";
 export * from "./transaction-type.enum";
 export * from "./bitwarden-product-type.enum";
 export * from "./product-tier-type.enum";
+export * from "./product-type.enum";