[AC-561] Refactor delete organization component (#5007)

* [AC-561] Rename DeleteOrganizationComponent to DeleteOrganizationDialogComponent

* [AC-561] Refactor delete organization dialog to use dialog service

- Use new bit-dialog
- Use reactive form and bitSubmit directives
- Add injected dialog params
- Switch to observable pattern
- Use dialog result instead of success event emitter
- Add helper method to open dialog using dialog service
- Update usage in families-for-enterprise-setup.component.ts and account.component.ts

* [AC-561] Create a UserVerification module

Move the user verification components into their own module that can be imported in multiple modules without conflict and allow tree shaking.

* [AC-561] Move delete-organization-dialog into its own folder

* [AC-561] Create delete organization dialog module

* [AC-561] Cleanup delete org dialog import statements

* [AC-561] Remove unused property

* [AC-561] Use organization observable from organizationService

* [AC-561] Use organization object instead of pull out storing the name individually

* [AC-561] Make the delete organization dialog a standalone component

- Remove the delete organization dialog module
- Move the dialog component up a directory
- Remove references to the deleted module

* [AC-561] Fix DialogServiceAbstraction references after merge

* [AC-561] Cleanup dialog loading spinner and cancel button

* [AC-561] Fix broken barrel file after merge

apps/web/src/app/components/user-verification-prompt.component.html

@@ -1,26 +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()">
-      <h2 class="tw-my-6 tw-px-3.5 tw-font-semibold" id="modalTitle | i18n ">
-        {{ modalTitle | i18n | uppercase }}
-      </h2>
-      <div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-3.5">
-        {{ confirmDescription | i18n }}
-      </div>
-      <div class="tw-p-3.5">
-        <app-user-verification ngDefaultControl [formControl]="secret" name="secret">
-        </app-user-verification>
-      </div>
-      <div
-        class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-3.5"
-      >
-        <button type="button" bitButton buttonType="primary" type="submit" appBlurClick>
-          <span>{{ confirmButtonText | i18n }}</span>
-        </button>
-        <button type="button" bitButton buttonType="secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/web/src/app/components/user-verification-prompt.component.ts

@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-import { UserVerificationPromptComponent as BaseUserVerificationPrompt } from "@bitwarden/angular/auth/components/user-verification-prompt.component";
-
-@Component({
-  templateUrl: "user-verification-prompt.component.html",
-})
-export class UserVerificationPromptComponent extends BaseUserVerificationPrompt {}

apps/web/src/app/components/user-verification.component.html

@@ -1,46 +0,0 @@
-<ng-container *ngIf="!usesKeyConnector">
-  <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-  <input
-    id="masterPassword"
-    type="password"
-    name="MasterPasswordHash"
-    class="form-control"
-    [formControl]="secret"
-    required
-    appAutofocus
-    appInputVerbatim
-  />
-  <small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small>
-</ng-container>
-<ng-container *ngIf="usesKeyConnector">
-  <div class="form-group">
-    <label class="d-block">{{ "sendVerificationCode" | i18n }}</label>
-    <button
-      type="button"
-      class="btn btn-outline-secondary"
-      (click)="requestOTP()"
-      [disabled]="disableRequestOTP"
-    >
-      {{ "sendCode" | i18n }}
-    </button>
-    <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
-      <i class="bwi bwi-check-circle" aria-hidden="true"></i>
-      {{ "codeSent" | i18n }}
-    </span>
-  </div>
-
-  <div class="form-group">
-    <label for="verificationCode">{{ "verificationCode" | i18n }}</label>
-    <input
-      id="verificationCode"
-      type="input"
-      name="verificationCode"
-      class="form-control"
-      [formControl]="secret"
-      required
-      appAutofocus
-      appInputVerbatim
-    />
-    <small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small>
-  </div>
-</ng-container>

apps/web/src/app/components/user-verification.component.ts

@@ -1,23 +0,0 @@
-import { animate, style, transition, trigger } from "@angular/animations";
-import { Component } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
-
-import { UserVerificationComponent as BaseComponent } from "@bitwarden/angular/auth/components/user-verification.component";
-
-@Component({
-  selector: "app-user-verification",
-  templateUrl: "user-verification.component.html",
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: UserVerificationComponent,
-    },
-  ],
-  animations: [
-    trigger("sent", [
-      transition(":enter", [style({ opacity: 0 }), animate("100ms", style({ opacity: 1 }))]),
-    ]),
-  ],
-})
-export class UserVerificationComponent extends BaseComponent {}