initialize data before rendering InputPasswordComponent

libs/auth/src/angular/change-password/change-password.component.html

@@ -1,10 +1,19 @@
-<auth-input-password
-  [flow]="inputPasswordFlow"
-  [email]="email"
-  [userId]="userId"
-  [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
-  [inlineButtons]="true"
-  [primaryButtonText]="{ key: 'changeMasterPassword' }"
-  (onPasswordFormSubmit)="handlePasswordFormSubmit($event)"
->
-</auth-input-password>
+@if (initializing) {
+  <i
+    class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+} @else {
+  <auth-input-password
+    [flow]="inputPasswordFlow"
+    [email]="email"
+    [userId]="userId"
+    [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
+    [inlineButtons]="true"
+    [primaryButtonText]="{ key: 'changeMasterPassword' }"
+    (onPasswordFormSubmit)="handlePasswordFormSubmit($event)"
+  >
+  </auth-input-password>
+}

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

@@ -17,6 +17,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { UserKey } from "@bitwarden/common/types/key";
 import { ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import {
   InputPasswordComponent,
@@ -30,7 +31,7 @@ import { ChangePasswordService } from "./change-password.service.abstraction";
   standalone: true,
   selector: "auth-change-password",
   templateUrl: "change-password.component.html",
-  imports: [InputPasswordComponent],
+  imports: [InputPasswordComponent, I18nPipe],
 })
 export class ChangePasswordComponent implements OnInit {
   @Input() inputPasswordFlow: InputPasswordFlow = InputPasswordFlow.ChangePassword;
@@ -39,6 +40,7 @@ export class ChangePasswordComponent implements OnInit {
   email?: string;
   userId?: UserId;
   masterPasswordPolicyOptions?: MasterPasswordPolicyOptions;
+  initializing = true;
   userkeyRotationV2 = false;
   formPromise?: Promise<any>;
 
@@ -70,6 +72,8 @@ export class ChangePasswordComponent implements OnInit {
     this.masterPasswordPolicyOptions = await firstValueFrom(
       this.policyService.masterPasswordPolicyOptions$(this.userId),
     );
+
+    this.initializing = false;
   }
 
   async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {

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

@@ -223,7 +223,7 @@ export class InputPasswordComponent implements OnInit {
       return;
     }
 
-    if (this.email == null) {
+    if (!this.email) {
       throw new Error("Email is required to create master key.");
     }