From 910780f4bb8298735cf61a8a6458bc2ce8280dcf Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 24 Apr 2025 21:50:38 -0700
Subject: [PATCH] CompleteTrialInitiationComponent - initialize data before
 rendering InputPasswordComponent

---
 .../complete-trial-initiation.component.html  | 174 ++++++++++--------
 .../complete-trial-initiation.component.ts    |   3 +
 2 files changed, 96 insertions(+), 81 deletions(-)

diff --git a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
index b5238e3361c..502cfb00eaa 100644
--- a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
+++ b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
@@ -1,87 +1,99 @@
-<div *ngIf="!useTrialStepper">
-  <auth-input-password
-    [flow]="inputPasswordFlow"
-    [email]="email"
-    [masterPasswordPolicyOptions]="enforcedPolicyOptions"
-    (onPasswordFormSubmit)="handlePasswordSubmit($event)"
-    [primaryButtonText]="{ key: 'createAccount' }"
-  ></auth-input-password>
-</div>
-<div *ngIf="useTrialStepper">
-  <app-vertical-stepper #stepper linear (selectionChange)="verticalStepChange($event)">
-    <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
-      <auth-input-password
-        [flow]="inputPasswordFlow"
-        [email]="email"
-        [masterPasswordPolicyOptions]="enforcedPolicyOptions"
-        (onPasswordFormSubmit)="handlePasswordSubmit($event)"
-        [primaryButtonText]="{ key: 'createAccount' }"
-      ></auth-input-password>
-    </app-vertical-step>
-    <app-vertical-step label="Organization Information" [subLabel]="orgInfoSubLabel">
-      <app-org-info [nameOnly]="true" [formGroup]="orgInfoFormGroup"></app-org-info>
-      <button
-        type="button"
-        bitButton
-        buttonType="primary"
-        [disabled]="orgInfoFormGroup.controls.name.invalid"
-        [loading]="loading && (trialPaymentOptional$ | async)"
-        (click)="orgNameEntrySubmit()"
-      >
-        {{ (trialPaymentOptional$ | async) ? ("startTrial" | i18n) : ("next" | i18n) }}
-      </button>
-    </app-vertical-step>
-    <app-vertical-step
-      label="Billing"
-      [subLabel]="billingSubLabel"
-      *ngIf="!(trialPaymentOptional$ | async) && !isSecretsManagerFree"
-    >
-      <app-trial-billing-step
-        *ngIf="stepper.selectedIndex === 2"
-        [organizationInfo]="{
-          name: orgInfoFormGroup.value.name,
-          email: orgInfoFormGroup.value.billingEmail,
-          type: trialOrganizationType,
-        }"
-        [subscriptionProduct]="
-          product === ProductType.SecretsManager
-            ? SubscriptionProduct.SecretsManager
-            : SubscriptionProduct.PasswordManager
-        "
-        (steppedBack)="previousStep()"
-        (organizationCreated)="createdOrganization($event)"
-      >
-      </app-trial-billing-step>
-    </app-vertical-step>
-    <app-vertical-step label="Confirmation Details" [applyBorder]="false">
-      <app-trial-confirmation-details
-        [email]="email"
-        [orgLabel]="orgLabel"
-        [product]="this.product"
-      ></app-trial-confirmation-details>
-      <div class="tw-mb-3 tw-flex">
-        <a
+@if (initializing) {
+  <div class="tw-flex tw-items-center tw-justify-center">
+    <i
+      class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  </div>
+} @else {
+  <div *ngIf="!useTrialStepper">
+    <auth-input-password
+      [flow]="inputPasswordFlow"
+      [email]="email"
+      [masterPasswordPolicyOptions]="enforcedPolicyOptions"
+      (onPasswordFormSubmit)="handlePasswordSubmit($event)"
+      [primaryButtonText]="{ key: 'createAccount' }"
+    ></auth-input-password>
+  </div>
+
+  <div *ngIf="useTrialStepper">
+    <app-vertical-stepper #stepper linear (selectionChange)="verticalStepChange($event)">
+      <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
+        <auth-input-password
+          [flow]="inputPasswordFlow"
+          [email]="email"
+          [masterPasswordPolicyOptions]="enforcedPolicyOptions"
+          (onPasswordFormSubmit)="handlePasswordSubmit($event)"
+          [primaryButtonText]="{ key: 'createAccount' }"
+        ></auth-input-password>
+      </app-vertical-step>
+      <app-vertical-step label="Organization Information" [subLabel]="orgInfoSubLabel">
+        <app-org-info [nameOnly]="true" [formGroup]="orgInfoFormGroup"></app-org-info>
+        <button
           type="button"
           bitButton
           buttonType="primary"
-          [routerLink]="
+          [disabled]="orgInfoFormGroup.controls.name.invalid"
+          [loading]="loading && (trialPaymentOptional$ | async)"
+          (click)="orgNameEntrySubmit()"
+        >
+          {{ (trialPaymentOptional$ | async) ? ("startTrial" | i18n) : ("next" | i18n) }}
+        </button>
+      </app-vertical-step>
+      <app-vertical-step
+        label="Billing"
+        [subLabel]="billingSubLabel"
+        *ngIf="!(trialPaymentOptional$ | async) && !isSecretsManagerFree"
+      >
+        <app-trial-billing-step
+          *ngIf="stepper.selectedIndex === 2"
+          [organizationInfo]="{
+            name: orgInfoFormGroup.value.name,
+            email: orgInfoFormGroup.value.billingEmail,
+            type: trialOrganizationType,
+          }"
+          [subscriptionProduct]="
             product === ProductType.SecretsManager
-              ? ['/sm', orgId]
-              : ['/organizations', orgId, 'vault']
+              ? SubscriptionProduct.SecretsManager
+              : SubscriptionProduct.PasswordManager
           "
+          (steppedBack)="previousStep()"
+          (organizationCreated)="createdOrganization($event)"
         >
-          {{ "getStarted" | i18n | titlecase }}
-        </a>
-        <a
-          type="button"
-          bitButton
-          buttonType="secondary"
-          [routerLink]="['/organizations', orgId, 'members']"
-          class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
-        >
-          {{ "inviteUsers" | i18n }}
-        </a>
-      </div>
-    </app-vertical-step>
-  </app-vertical-stepper>
-</div>
+        </app-trial-billing-step>
+      </app-vertical-step>
+      <app-vertical-step label="Confirmation Details" [applyBorder]="false">
+        <app-trial-confirmation-details
+          [email]="email"
+          [orgLabel]="orgLabel"
+          [product]="this.product"
+        ></app-trial-confirmation-details>
+        <div class="tw-mb-3 tw-flex">
+          <a
+            type="button"
+            bitButton
+            buttonType="primary"
+            [routerLink]="
+              product === ProductType.SecretsManager
+                ? ['/sm', orgId]
+                : ['/organizations', orgId, 'vault']
+            "
+          >
+            {{ "getStarted" | i18n | titlecase }}
+          </a>
+          <a
+            type="button"
+            bitButton
+            buttonType="secondary"
+            [routerLink]="['/organizations', orgId, 'members']"
+            class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
+          >
+            {{ "inviteUsers" | i18n }}
+          </a>
+        </div>
+      </app-vertical-step>
+    </app-vertical-stepper>
+  </div>
+}
diff --git a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
index 62fa1d3ee59..245bbba4b85 100644
--- a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
+++ b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
@@ -52,6 +52,7 @@ export class CompleteTrialInitiationComponent implements OnInit, OnDestroy {
   @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent;
 
   inputPasswordFlow = InputPasswordFlow.AccountRegistration;
+  initializing = true;
 
   /** Password Manager or Secrets Manager */
   product: ProductType;
@@ -198,6 +199,8 @@ export class CompleteTrialInitiationComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.orgInfoFormGroup.controls.name.markAsTouched();
       });
+
+    this.initializing = false;
   }
 
   ngOnDestroy(): void {