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