[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>
2025-12-15 07:43:35 +00:00 · 2023-10-04 22:56:27 -04:00
parent a91a39fe80
commit 922de469f4
51 changed files with 144 additions and 332 deletions
--- a/apps/browser/src/popup/app.module.ts
+++ b/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,
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/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) => {
--- a/apps/browser/src/vault/popup/components/action-buttons.component.ts
+++ b/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",
--- a/apps/browser/src/vault/popup/components/password-reprompt.component.html
+++ b/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>
--- a/apps/browser/src/vault/popup/components/password-reprompt.component.ts
+++ b/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 {}
--- a/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
+++ b/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";
--- a/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
+++ b/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";
--- a/apps/browser/src/vault/popup/components/vault/view.component.ts
+++ b/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";
--- a/apps/browser/src/vault/popup/services/password-reprompt.service.ts
+++ b/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;
-}
--- a/apps/browser/tsconfig.json
+++ b/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
  },
--- a/apps/desktop/src/app/app.module.ts
+++ b/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,
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/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,
--- a/apps/desktop/src/vault/app/components/password-reprompt.component.html
+++ b/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>
--- a/apps/desktop/src/vault/app/components/password-reprompt.component.ts
+++ b/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 {}
--- a/apps/desktop/src/vault/app/vault/add-edit.component.ts
+++ b/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";

--- a/apps/desktop/src/vault/app/vault/vault.component.ts
+++ b/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";
--- a/apps/desktop/src/vault/app/vault/view.component.ts
+++ b/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";

--- a/apps/desktop/src/vault/services/password-reprompt.service.ts
+++ b/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;
-}
--- a/apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts
+++ b/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";
--- a/apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts
+++ b/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";
--- a/apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts
+++ b/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";
--- a/apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts
+++ b/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";
--- a/apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts
+++ b/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";
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-add-edit.component.ts
+++ b/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";

--- a/apps/web/src/app/core/core.module.ts
+++ b/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,
--- a/apps/web/src/app/reports/pages/cipher-report.component.ts
+++ b/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";
--- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.ts
+++ b/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";

--- a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts
+++ b/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";

--- a/apps/web/src/app/reports/pages/reused-passwords-report.component.ts
+++ b/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";

--- a/apps/web/src/app/reports/pages/unsecured-websites-report.component.ts
+++ b/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";

--- a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
+++ b/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";

--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/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,
--- a/apps/web/src/app/vault/components/password-reprompt.component.html
+++ b/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>
--- a/apps/web/src/app/vault/components/password-reprompt.component.ts
+++ b/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 {}
--- a/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html
+++ b/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>
--- a/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.ts
+++ b/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",
    });
  }
--- a/apps/web/src/app/vault/core/password-reprompt.service.ts
+++ b/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;
-}
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.ts
+++ b/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",
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/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,
--- a/apps/web/src/app/vault/org-vault/add-edit.component.ts
+++ b/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";

--- a/apps/web/src/app/vault/org-vault/vault.component.ts
+++ b/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";