[PM-2169] Update Password Reprompt Modal to use Component Library (#5720)

* update password reprompt to use the dialog CL

* Override showPasswordPrompt and submit method on web child classes from base classes to allow dialog work on web and modal on other clients

* Override showPasswordPrompt and submit method on web child classes from base classes to allow dialog work on web and modal on other clients

* Fixed lint issues

* Corrected comments

* Refactored passwored reprompt to use dialog service after changes to make the dialog service work on the desktop and browser

* Changed access modifier from protected to protected

* Refactored passwprd reprompt component to a stand alone component and fixed all references

* fix merge changes

* fix import aliases in password-reprompt.component.ts

* fix alias typo in browser tsconfig

* import from root vault alias

* revert tsconfig changes

* remove service abstraction and update imports

* remove component from imports

* Removed unneccesary show password toggle

* renamed selector to use vault prefix

* removed unnecessary data dismiss

* merged and fixed conflicts

* remove reintroduced file

* Added appAutoFocus to reprompt dialog

* delayed validation until submit happens

---------

Co-authored-by: William Martin <contact@willmartian.com>

libs/vault/src/components/password-reprompt.component.html

@@ -0,0 +1,31 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <span bitDialogTitle>
+      {{ "passwordConfirmation" | i18n }}
+    </span>
+    <ng-container bitDialogContent>
+      {{ "passwordConfirmationDesc" | i18n }}
+
+      <bit-form-field disableMargin class="tw-mt-6">
+        <bit-label>{{ "masterPass" | i18n }}</bit-label>
+        <input
+          bitInput
+          appAutofocus
+          id="masterPassword"
+          type="password"
+          formControlName="masterPassword"
+        />
+        <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+      </bit-form-field>
+    </ng-container>
+
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary" bitFormButton type="submit">
+        <span>{{ "ok" | i18n }}</span>
+      </button>
+      <button bitButton buttonType="secondary" bitDialogClose type="button">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

libs/vault/src/components/password-reprompt.component.ts

@@ -0,0 +1,68 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { Component } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  DialogModule,
+  FormFieldModule,
+  IconButtonModule,
+} from "@bitwarden/components";
+
+/**
+ * Used to verify the user's Master Password for the "Master Password Re-prompt" feature only.
+ * See UserVerificationComponent for any other situation where you need to verify the user's identity.
+ */
+@Component({
+  standalone: true,
+  selector: "vault-password-reprompt",
+  imports: [
+    JslibModule,
+    AsyncActionsModule,
+    ButtonModule,
+    DialogModule,
+    FormFieldModule,
+    IconButtonModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: "password-reprompt.component.html",
+})
+export class PasswordRepromptComponent {
+  formGroup = this.formBuilder.group({
+    masterPassword: ["", { validators: [Validators.required], updateOn: "submit" }],
+  });
+
+  constructor(
+    protected cryptoService: CryptoService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected i18nService: I18nService,
+    protected formBuilder: FormBuilder,
+    protected dialogRef: DialogRef
+  ) {}
+
+  submit = async () => {
+    const storedMasterKey = await this.cryptoService.getOrDeriveMasterKey(
+      this.formGroup.value.masterPassword
+    );
+    if (
+      !(await this.cryptoService.compareAndUpdateKeyHash(
+        this.formGroup.value.masterPassword,
+        storedMasterKey
+      ))
+    ) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("invalidMasterPassword")
+      );
+      return;
+    }
+
+    this.dialogRef.close(true);
+  };
+}