[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/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;
-}