[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>

apps/browser/src/popup/app.module.ts

@@ -39,7 +39,6 @@ import { SendTypeComponent } from "../tools/popup/send/send-type.component";
 import { ExportComponent } from "../tools/popup/settings/export.component";
 import { ActionButtonsComponent } from "../vault/popup/components/action-buttons.component";
 import { CipherRowComponent } from "../vault/popup/components/cipher-row.component";
-import { PasswordRepromptComponent } from "../vault/popup/components/password-reprompt.component";
 import { AddEditCustomFieldsComponent } from "../vault/popup/components/vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "../vault/popup/components/vault/add-edit.component";
 import { AttachmentsComponent } from "../vault/popup/components/vault/attachments.component";
@@ -125,7 +124,6 @@ import "../platform/popup/locales";
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordHistoryComponent,
-    PasswordRepromptComponent,
     PopOutComponent,
     PremiumComponent,
     PrivateModeWarningComponent,

apps/browser/src/popup/services/services.module.ts

@@ -80,7 +80,6 @@ import {
   FolderService,
   InternalFolderService,
 } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { FolderApiService } from "@bitwarden/common/vault/services/folder/folder-api.service";
 import { DialogService } from "@bitwarden/components";
@@ -104,7 +103,6 @@ import BrowserMessagingService from "../../platform/services/browser-messaging.s
 import { BrowserStateService } from "../../platform/services/browser-state.service";
 import { BrowserSendService } from "../../services/browser-send.service";
 import { BrowserSettingsService } from "../../services/browser-settings.service";
-import { PasswordRepromptService } from "../../vault/popup/services/password-reprompt.service";
 import { BrowserFolderService } from "../../vault/services/browser-folder.service";
 import { VaultFilterService } from "../../vault/services/vault-filter.service";
 
@@ -409,7 +407,6 @@ function getBgService<T>(service: keyof MainBackground) {
       useFactory: getBgService<ConsoleLogService>("logService"),
       deps: [],
     },
-    { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
     {
       provide: OrganizationService,
       useFactory: (stateService: StateServiceAbstraction) => {

apps/browser/src/vault/popup/components/action-buttons.component.ts

@@ -6,10 +6,10 @@ import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 @Component({
   selector: "app-action-buttons",

apps/browser/src/vault/popup/components/password-reprompt.component.html

@@ -1,55 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()">
-      <div class="modal-body">
-        <div class="box">
-          <h1 class="box-header">{{ "passwordConfirmation" | i18n }}</h1>
-          <div class="box-content">
-            <div class="box-content-row box-content-row-flex" appBoxRow>
-              <div class="row-main">
-                <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-                <input
-                  id="masterPassword"
-                  type="{{ showPassword ? 'text' : 'password' }}"
-                  name="MasterPassword"
-                  aria-describedby="masterPasswordHelp"
-                  class="monospaced"
-                  [(ngModel)]="masterPassword"
-                  required
-                  appAutofocus
-                />
-              </div>
-              <div class="action-buttons">
-                <button
-                  type="button"
-                  class="row-btn"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  (click)="togglePassword()"
-                  [attr.aria-pressed]="showPassword"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                  ></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div id="masterPasswordHelp" class="box-footer">
-            {{ "passwordConfirmationDesc" | i18n }}
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit">
-          <span>{{ "ok" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/browser/src/vault/popup/components/password-reprompt.component.ts

@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "@bitwarden/angular/vault/components/password-reprompt.component";
-
-@Component({
-  templateUrl: "password-reprompt.component.html",
-})
-export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -17,10 +17,10 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { BrowserApi } from "../../../../platform/browser/browser-api";
 import { PopupUtilsService } from "../../../../popup/services/popup-utils.service";

apps/browser/src/vault/popup/components/vault/current-tab.component.ts

@@ -11,11 +11,11 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AutofillService } from "../../../../autofill/services/abstractions/autofill.service";
 import { BrowserApi } from "../../../../platform/browser/browser-api";

apps/browser/src/vault/popup/components/vault/view.component.ts

@@ -20,11 +20,11 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AutofillService } from "../../../../autofill/services/abstractions/autofill.service";
 import { BrowserApi } from "../../../../platform/browser/browser-api";

apps/browser/src/vault/popup/services/password-reprompt.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { PasswordRepromptService as BasePasswordRepromptService } from "@bitwarden/angular/vault/services/password-reprompt.service";
-
-import { PasswordRepromptComponent } from "../components/password-reprompt.component";
-
-@Injectable()
-export class PasswordRepromptService extends BasePasswordRepromptService {
-  component = PasswordRepromptComponent;
-}

apps/browser/tsconfig.json

@@ -16,7 +16,7 @@
       "@bitwarden/components": ["../../libs/components/src"],
       "@bitwarden/exporter/*": ["../../libs/exporter/src/*"],
       "@bitwarden/importer": ["../../libs/importer/src"],
-      "@bitwarden/vault": ["../../libs/auth/src"]
+      "@bitwarden/vault": ["../../libs/vault/src"]
     },
     "useDefineForClassFields": false
   },

apps/desktop/src/app/app.module.ts

@@ -24,7 +24,6 @@ import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component"
 import { TwoFactorComponent } from "../auth/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { PremiumComponent } from "../vault/app/accounts/premium.component";
-import { PasswordRepromptComponent } from "../vault/app/components/password-reprompt.component";
 import { AddEditCustomFieldsComponent } from "../vault/app/vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "../vault/app/vault/add-edit.component";
 import { AttachmentsComponent } from "../vault/app/vault/attachments.component";
@@ -79,7 +78,6 @@ import { SendComponent } from "./tools/send/send.component";
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordHistoryComponent,
-    PasswordRepromptComponent,
     PremiumComponent,
     RegisterComponent,
     RemovePasswordComponent,

apps/desktop/src/app/services/services.module.ts

@@ -35,7 +35,6 @@ import { MemoryStorageService } from "@bitwarden/common/platform/services/memory
 import { SystemService } from "@bitwarden/common/platform/services/system.service";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { DialogService } from "@bitwarden/components";
 
 import { LoginGuard } from "../../auth/guards/login.guard";
@@ -52,7 +51,6 @@ import { I18nService } from "../../platform/services/i18n.service";
 import { EncryptedMessageHandlerService } from "../../services/encrypted-message-handler.service";
 import { NativeMessageHandlerService } from "../../services/native-message-handler.service";
 import { NativeMessagingService } from "../../services/native-messaging.service";
-import { PasswordRepromptService } from "../../vault/services/password-reprompt.service";
 import { SearchBarService } from "../layout/search/search-bar.service";
 
 import { DesktopFileDownloadService } from "./desktop-file-download.service";
@@ -113,7 +111,6 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
         StateServiceAbstraction,
       ],
     },
-    { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
     {
       provide: StateServiceAbstraction,
       useClass: ElectronStateService,

apps/desktop/src/vault/app/components/password-reprompt.component.html

@@ -1,57 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passwordConfirmationTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()">
-      <div class="modal-body">
-        <div class="box">
-          <h1 class="box-header" id="passwordConfirmationTitle">
-            {{ "passwordConfirmation" | i18n }}
-          </h1>
-          <div class="box-content">
-            <div class="box-content-row box-content-row-flex" appBoxRow>
-              <div class="row-main">
-                <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-                <input
-                  id="masterPassword"
-                  type="{{ showPassword ? 'text' : 'password' }}"
-                  name="MasterPassword"
-                  aria-describedby="masterPasswordHelp"
-                  class="monospaced"
-                  [(ngModel)]="masterPassword"
-                  required
-                  appAutofocus
-                />
-              </div>
-              <div class="action-buttons">
-                <button
-                  type="button"
-                  class="row-btn"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showPassword"
-                  (click)="togglePassword()"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                  ></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div id="masterPasswordHelp" class="box-footer">
-            {{ "passwordConfirmationDesc" | i18n }}
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit">
-          <span>{{ "ok" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/desktop/src/vault/app/components/password-reprompt.component.ts

@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "@bitwarden/angular/vault/components/password-reprompt.component";
-
-@Component({
-  templateUrl: "password-reprompt.component.html",
-})
-export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

apps/desktop/src/vault/app/vault/add-edit.component.ts

@@ -16,8 +16,8 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 const BroadcasterSubscriptionId = "AddEditComponent";
 

apps/desktop/src/vault/app/vault/vault.component.ts

@@ -22,13 +22,13 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { SearchBarService } from "../../../app/layout/search/search-bar.service";
 import { GeneratorComponent } from "../../../app/tools/generator.component";

apps/desktop/src/vault/app/vault/view.component.ts

@@ -23,9 +23,9 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 const BroadcasterSubscriptionId = "ViewComponent";
 

apps/desktop/src/vault/services/password-reprompt.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { PasswordRepromptService as BasePasswordRepromptService } from "@bitwarden/angular/vault/services/password-reprompt.service";
-
-import { PasswordRepromptComponent } from "../app/components/password-reprompt.component";
-
-@Injectable()
-export class PasswordRepromptService extends BasePasswordRepromptService {
-  component = PasswordRepromptComponent;
-}

apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts

@@ -6,9 +6,9 @@ import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 // eslint-disable-next-line no-restricted-imports
 import { ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent } from "../../../reports/pages/exposed-passwords-report.component";

apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts

@@ -6,8 +6,8 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 // eslint-disable-next-line no-restricted-imports
 import { InactiveTwoFactorReportComponent as BaseInactiveTwoFactorReportComponent } from "../../../reports/pages/inactive-two-factor-report.component";

apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts

@@ -6,9 +6,9 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 // eslint-disable-next-line no-restricted-imports
 import { ReusedPasswordsReportComponent as BaseReusedPasswordsReportComponent } from "../../../reports/pages/reused-passwords-report.component";

apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts

@@ -5,8 +5,8 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 // eslint-disable-next-line no-restricted-imports
 import { UnsecuredWebsitesReportComponent as BaseUnsecuredWebsitesReportComponent } from "../../../reports/pages/unsecured-websites-report.component";

apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts

@@ -6,9 +6,9 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 // eslint-disable-next-line no-restricted-imports
 import { WeakPasswordsReportComponent as BaseWeakPasswordsReportComponent } from "../../../reports/pages/weak-passwords-report.component";

apps/web/src/app/auth/settings/emergency-access/emergency-add-edit.component.ts

@@ -15,9 +15,9 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AddEditComponent as BaseAddEditComponent } from "../../../vault/individual-vault/add-edit.component";
 

apps/web/src/app/core/core.module.ts

@@ -21,13 +21,11 @@ import { StateService as BaseStateServiceAbstraction } from "@bitwarden/common/p
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
 import { StateFactory } from "@bitwarden/common/platform/factories/state-factory";
 import { MemoryStorageService } from "@bitwarden/common/platform/services/memory-storage.service";
-import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 
 import { PolicyListService } from "../admin-console/core/policy-list.service";
 import { HtmlStorageService } from "../core/html-storage.service";
 import { I18nService } from "../core/i18n.service";
 import { CollectionAdminService } from "../vault/core/collection-admin.service";
-import { PasswordRepromptService } from "../vault/core/password-reprompt.service";
 
 import { BroadcasterMessagingService } from "./broadcaster-messaging.service";
 import { EventService } from "./event.service";
@@ -87,10 +85,6 @@ import { WebPlatformUtilsService } from "./web-platform-utils.service";
       provide: BaseStateServiceAbstraction,
       useExisting: StateService,
     },
-    {
-      provide: PasswordRepromptServiceAbstraction,
-      useClass: PasswordRepromptService,
-    },
     {
       provide: FileDownloadService,
       useClass: WebFileDownloadService,

apps/web/src/app/reports/pages/cipher-report.component.ts

@@ -3,9 +3,9 @@ import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AddEditComponent } from "../../vault/individual-vault/add-edit.component";
 import { AddEditComponent as OrgAddEditComponent } from "../../vault/org-vault/add-edit.component";

apps/web/src/app/reports/pages/exposed-passwords-report.component.ts

@@ -4,9 +4,9 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
 

apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts

@@ -5,9 +5,9 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
 

apps/web/src/app/reports/pages/reused-passwords-report.component.ts

@@ -4,9 +4,9 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
 

apps/web/src/app/reports/pages/unsecured-websites-report.component.ts

@@ -3,9 +3,9 @@ import { Component, OnInit } from "@angular/core";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
 

apps/web/src/app/reports/pages/weak-passwords-report.component.ts

@@ -4,10 +4,10 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { BadgeTypes } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
 

apps/web/src/app/shared/loose-components.module.ts

@@ -79,7 +79,6 @@ import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-h
 import { AccessComponent } from "../tools/send/access.component";
 import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
 import { ToolsComponent } from "../tools/tools.component";
-import { PasswordRepromptComponent } from "../vault/components/password-reprompt.component";
 import { PremiumBadgeComponent } from "../vault/components/premium-badge.component";
 import { AddEditCustomFieldsComponent } from "../vault/individual-vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "../vault/individual-vault/add-edit.component";
@@ -159,7 +158,6 @@ import { SharedModule } from "./shared.module";
     OrgWeakPasswordsReportComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
-    PasswordRepromptComponent,
     PreferencesComponent,
     PremiumBadgeComponent,
     ProfileComponent,
@@ -246,7 +244,6 @@ import { SharedModule } from "./shared.module";
     OrgWeakPasswordsReportComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
-    PasswordRepromptComponent,
     PreferencesComponent,
     PremiumBadgeComponent,
     ProfileComponent,

apps/web/src/app/vault/components/password-reprompt.component.html

@@ -1,53 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()">
-      <div class="modal-header">
-        <h1 class="modal-title" id="confirmUserTitle">
-          {{ "passwordConfirmation" | i18n }}
-        </h1>
-        <button type="button" class="close" data-dismiss="modal">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        {{ "passwordConfirmationDesc" | i18n }}
-
-        <div class="form-group">
-          <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-          <div class="d-flex">
-            <input
-              id="masterPassword"
-              type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPassword"
-              class="text-monospace form-control"
-              [(ngModel)]="masterPassword"
-              required
-              appAutofocus
-              appInputVerbatim
-            />
-            <button
-              type="button"
-              class="ml-1 btn btn-link"
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              (click)="togglePassword()"
-            >
-              <i
-                class="bwi bwi-lg"
-                aria-hidden="true"
-                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-              ></i>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit">
-          <span>{{ "ok" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/web/src/app/vault/components/password-reprompt.component.ts

@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "@bitwarden/angular/vault/components/password-reprompt.component";
-
-@Component({
-  templateUrl: "password-reprompt.component.html",
-})
-export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html

@@ -22,6 +22,7 @@
       queryParamsHandling="merge"
       title="{{ 'editItemWithName' | i18n : cipher.name }}"
       type="button"
+      appStopProp
     >
       {{ cipher.name }}
     </button>

apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.ts

@@ -55,7 +55,7 @@ export class VaultCipherRowComponent {
   @HostListener("click")
   protected click() {
     this.router.navigate([], {
-      queryParams: { cipherId: this.cipher.id },
+      queryParams: { itemId: this.cipher.id },
       queryParamsHandling: "merge",
     });
   }

apps/web/src/app/vault/core/password-reprompt.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { PasswordRepromptService as BasePasswordRepromptService } from "@bitwarden/angular/vault/services/password-reprompt.service";
-
-import { PasswordRepromptComponent } from "../components/password-reprompt.component";
-
-@Injectable()
-export class PasswordRepromptService extends BasePasswordRepromptService {
-  component = PasswordRepromptComponent;
-}

apps/web/src/app/vault/individual-vault/add-edit.component.ts

@@ -17,10 +17,10 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 @Component({
   selector: "app-vault-add-edit",

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -52,7 +52,6 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CollectionData } from "@bitwarden/common/vault/models/data/collection.data";
@@ -60,6 +59,7 @@ import { CollectionDetailsResponse } from "@bitwarden/common/vault/models/respon
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 import { DialogService, Icons } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import {
   CollectionDialogAction,

apps/web/src/app/vault/org-vault/add-edit.component.ts

@@ -16,10 +16,10 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherData } from "@bitwarden/common/vault/models/data/cipher.data";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AddEditComponent as BaseAddEditComponent } from "../individual-vault/add-edit.component";
 

apps/web/src/app/vault/org-vault/vault.component.ts

@@ -47,12 +47,12 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 import { DialogService, Icons } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { GroupService, GroupView } from "../../admin-console/organizations/core";
 import { openEntityEventsDialog } from "../../admin-console/organizations/manage/entity-events.component";

libs/angular/src/services/jslib-services.module.ts

@@ -136,7 +136,6 @@ import {
   FolderService as FolderServiceAbstraction,
   InternalFolderService,
 } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { SyncNotifierService as SyncNotifierServiceAbstraction } from "@bitwarden/common/vault/abstractions/sync/sync-notifier.service.abstraction";
 import { SyncService as SyncServiceAbstraction } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
@@ -156,13 +155,13 @@ import {
   ImportService,
   ImportServiceAbstraction,
 } from "@bitwarden/importer";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { UnauthGuard } from "../auth/guards/unauth.guard";
 import { FormValidationErrorsService as FormValidationErrorsServiceAbstraction } from "../platform/abstractions/form-validation-errors.service";
 import { BroadcasterService } from "../platform/services/broadcaster.service";
 import { FormValidationErrorsService } from "../platform/services/form-validation-errors.service";
-import { PasswordRepromptService } from "../vault/services/password-reprompt.service";
 
 import {
   LOCALES_DIRECTORY,
@@ -186,6 +185,8 @@ import { AbstractThemingService } from "./theming/theming.service.abstraction";
     AuthGuard,
     UnauthGuard,
     ModalService,
+    PasswordRepromptService,
+
     { provide: WINDOW, useValue: window },
     {
       provide: LOCALE_ID,
@@ -603,7 +604,6 @@ import { AbstractThemingService } from "./theming/theming.service.abstraction";
         UserVerificationApiServiceAbstraction,
       ],
     },
-    { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
     {
       provide: OrganizationServiceAbstraction,
       useClass: OrganizationService,

libs/angular/src/vault/components/add-edit.component.ts

@@ -21,7 +21,6 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
@@ -34,6 +33,7 @@ import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { SecureNoteView } from "@bitwarden/common/vault/models/view/secure-note.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 @Directive()
 export class AddEditComponent implements OnInit, OnDestroy {

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

@@ -1,42 +0,0 @@
-import { Directive } from "@angular/core";
-
-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 { ModalRef } from "../../components/modal/modal.ref";
-
-/**
- * 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.
- */
-@Directive()
-export class PasswordRepromptComponent {
-  showPassword = false;
-  masterPassword = "";
-
-  constructor(
-    private modalRef: ModalRef,
-    private cryptoService: CryptoService,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService
-  ) {}
-
-  togglePassword() {
-    this.showPassword = !this.showPassword;
-  }
-
-  async submit() {
-    const storedMasterKey = await this.cryptoService.getOrDeriveMasterKey(this.masterPassword);
-    if (!(await this.cryptoService.compareAndUpdateKeyHash(this.masterPassword, storedMasterKey))) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidMasterPassword")
-      );
-      return;
-    }
-
-    this.modalRef.close(true);
-  }
-}

libs/angular/src/vault/components/view.component.ts

@@ -27,7 +27,6 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { EncArrayBuffer } from "@bitwarden/common/platform/models/domain/enc-array-buffer";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.view";
@@ -35,6 +34,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 const BroadcasterSubscriptionId = "ViewComponent";
 

libs/common/src/vault/abstractions/password-reprompt.service.ts

@@ -1,5 +0,0 @@
-export abstract class PasswordRepromptService {
-  protectedFields: () => string[];
-  showPasswordPrompt: () => Promise<boolean>;
-  enabled: () => Promise<boolean>;
-}

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);
+  };
+}

libs/vault/src/index.ts

@@ -0,0 +1 @@
+export { PasswordRepromptService } from "./services/password-reprompt.service";

libs/vault/src/services/password-reprompt.service.spec.ts

@@ -1,8 +1,7 @@
 import { MockProxy, mock } from "jest-mock-extended";
 
-import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/src/auth/abstractions/user-verification/user-verification.service.abstraction";
-
+import { DialogService } from "@bitwarden/components";
-import { ModalService } from "../../services/modal.service";
 
 import { PasswordRepromptService } from "./password-reprompt.service";
 
@@ -10,13 +9,13 @@ describe("PasswordRepromptService", () => {
   let passwordRepromptService: PasswordRepromptService;
 
   let userVerificationService: MockProxy<UserVerificationService>;
-  let modalService: MockProxy<ModalService>;
+  let dialogService: MockProxy<DialogService>;
 
   beforeEach(() => {
-    modalService = mock<ModalService>();
+    dialogService = mock<DialogService>();
     userVerificationService = mock<UserVerificationService>();
 
-    passwordRepromptService = new PasswordRepromptService(modalService, userVerificationService);
+    passwordRepromptService = new PasswordRepromptService(dialogService, userVerificationService);
   });
 
   describe("enabled()", () => {

libs/vault/src/services/password-reprompt.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from "@angular/core";
+import { lastValueFrom } from "rxjs";
 
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
-import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
+import { DialogService } from "@bitwarden/components";
 
-import { ModalService } from "../../services/modal.service";
 import { PasswordRepromptComponent } from "../components/password-reprompt.component";
 
 /**
@@ -11,11 +11,9 @@ import { PasswordRepromptComponent } from "../components/password-reprompt.compo
  * See UserVerificationService for any other situation where you need to verify the user's identity.
  */
 @Injectable()
-export class PasswordRepromptService implements PasswordRepromptServiceAbstraction {
+export class PasswordRepromptService {
-  protected component = PasswordRepromptComponent;
-
   constructor(
-    private modalService: ModalService,
+    private dialogService: DialogService,
     private userVerificationService: UserVerificationService
   ) {}
 
@@ -28,13 +26,12 @@ export class PasswordRepromptService implements PasswordRepromptServiceAbstracti
       return true;
     }
 
-    const ref = this.modalService.open(this.component, { allowMultipleModals: true });
+    const dialog = this.dialogService.open<boolean>(PasswordRepromptComponent, {
+      ariaModal: true,
+    });
 
-    if (ref == null) {
+    const result = await lastValueFrom(dialog.closed);
-      return false;
-    }
 
-    const result = await ref.onClosedPromise();
     return result === true;
   }