[PM-18721] update method name, add controls dynamically, fix typos

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html

@@ -1,4 +1,4 @@
-<bit-dialog dialogSize="large">
+<bit-dialog>
   <span bitDialogTitle>
     {{ "takeover" | i18n }}
     <small class="tw-text-muted" *ngIf="dialogData.grantorName">{{ dialogData.grantorName }}</small>
@@ -17,7 +17,7 @@
   </div>
 
   <ng-container bitDialogFooter>
-    <button type="button" bitButton buttonType="primary" (click)="submit()">
+    <button type="button" bitButton buttonType="primary" (click)="handlePrimaryButtonClick()">
       {{ "save" | i18n }}
     </button>
     <button type="button" bitButton buttonType="secondary" bitDialogClose>

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts

@@ -51,8 +51,8 @@ export enum EmergencyAccessTakeoverDialogResultType {
   templateUrl: "./emergency-access-takeover-dialog.component.html",
   imports: [
     ButtonModule,
-    CommonModule,
     CalloutModule,
+    CommonModule,
     DialogModule,
     I18nPipe,
     InputPasswordComponent,
@@ -87,11 +87,11 @@ export class EmergencyAccessTakeoverDialogComponent implements OnInit {
     );
   }
 
-  submit = async () => {
+  protected handlePrimaryButtonClick = async () => {
     await this.inputPasswordComponent.submit();
   };
 
-  async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {
+  protected async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {
     try {
       await this.emergencyAccessService.takeover(
         this.dialogData.emergencyAccessId,
@@ -112,7 +112,7 @@ export class EmergencyAccessTakeoverDialogComponent implements OnInit {
   }
 
   /**
-   * Strongly typed helper to open a EmergencyAccessTakeoverDialogComponent
+   * Strongly typed helper to open an EmergencyAccessTakeoverDialogComponent
    * @param dialogService Instance of the dialog service that will be used to open the dialog
    * @param dialogConfig Configuration for the dialog
    */

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html

@@ -4,10 +4,13 @@
       {{ "takeover" | i18n }}
       <small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
     </span>
+
     <div bitDialogContent>
       <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
+
       <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
       </auth-password-callout>
+
       <div class="tw-w-full tw-flex tw-gap-4">
         <div class="tw-relative tw-flex-1">
           <bit-form-field disableMargin class="tw-mb-2">
@@ -20,6 +23,7 @@
             />
             <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
           </bit-form-field>
+
           <app-password-strength
             [password]="takeoverForm.value.masterPassword"
             [email]="email"
@@ -28,6 +32,7 @@
           >
           </app-password-strength>
         </div>
+
         <div class="tw-relative tw-flex-1">
           <bit-form-field disableMargin class="tw-mb-2">
             <bit-label>{{ "confirmNewMasterPass" | i18n }}</bit-label>
@@ -42,6 +47,7 @@
         </div>
       </div>
     </div>
+
     <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
         {{ "save" | i18n }}

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

@@ -85,7 +85,7 @@
       <bit-hint>
         {{
           "masterPassHintText"
-            | i18n: formGroup.value.newPasswordHint.length : maxHintLength.toString()
+            | i18n: formGroup.value.newPasswordHint.length.toString() : maxHintLength.toString()
         }}
       </bit-hint>
     </bit-form-field>

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

@@ -107,11 +107,11 @@ interface InputPasswordForm {
     FormFieldModule,
     IconButtonModule,
     InputModule,
-    ReactiveFormsModule,
-    SharedModule,
+    JslibModule,
     PasswordCalloutComponent,
     PasswordStrengthV2Component,
-    JslibModule,
+    ReactiveFormsModule,
+    SharedModule,
   ],
 })
 export class InputPasswordComponent implements OnInit {
@@ -148,11 +148,6 @@ export class InputPasswordComponent implements OnInit {
         Validators.minLength(this.minPasswordLength),
       ]),
       newPasswordConfirm: this.formBuilder.nonNullable.control("", Validators.required),
-      newPasswordHint: this.formBuilder.nonNullable.control("", [
-        Validators.minLength(this.minHintLength),
-        Validators.maxLength(this.maxHintLength),
-      ]),
-      checkForBreaches: this.formBuilder.nonNullable.control(true),
     },
     {
       validators: [
@@ -200,12 +195,11 @@ export class InputPasswordComponent implements OnInit {
     if (this.flow !== InputPasswordFlow.ChangePasswordDelegation) {
       this.formGroup.addControl(
         "newPasswordHint",
-        new FormControl("", [
+        this.formBuilder.nonNullable.control("", [
           Validators.minLength(this.minHintLength),
           Validators.maxLength(this.maxHintLength),
-        ]) as FormControl<string>,
+        ]),
       );
-      this.formGroup.addControl("checkForBreaches", new FormControl(true) as FormControl<boolean>);
 
       this.formGroup.addValidators([
         compareInputs(
@@ -215,6 +209,8 @@ export class InputPasswordComponent implements OnInit {
           this.i18nService.t("hintEqualsPassword"),
         ),
       ]);
+
+      this.formGroup.addControl("checkForBreaches", this.formBuilder.nonNullable.control(true));
     }
 
     if (

libs/auth/src/angular/input-password/input-password.mdx

@@ -57,7 +57,8 @@ the `email` and/or `userId` is present in certain flows, while not present in ot
 
 - `email` - allows the `InputPasswordComponent` to generate a master key
 - `userId` - allows the `InputPasswordComponent` to do things like get the user's `kdfConfig`,
-  decrypt the user key, and perform validation prior to user a key rotation on the parent
+  verify that a current password is correct, and perform validation prior to user key rotation on
+  the parent
 
 **Optional**
 
@@ -124,7 +125,7 @@ Used in scenarios where we do have an existing and authed user, and thus an acti
 
 **`ChangePassword`**
 
-Used in scenarios where a we simply want simply offer the user the ability to change their password:
+Used in scenarios where we simply want to offer the user the ability to change their password:
 
 - User clicks an org email invite link an logs in with their password which does not meet the org's
   policy requirements
@@ -251,7 +252,7 @@ export interface PasswordInputResult {
 Some of our set/change password flows use dialogs, such as Emergency Access Takeover and Account
 Recovery. These are covered by the `ChangePasswordDelegation` flow. Because dialogs have their own
 buttons, we don't want to display an additional Submit button in the `InputPasswordComponent` when
-embedded a dialog.
+embedded in a dialog.
 
 Therefore we do the following: