[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-18 17:23:37 +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/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";