[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$);