[PM-2135] [BEEEP] Refactor and refresh web user verification components (#5377)

* [PM-2135] feat: create new user-verification module * [PM-2136] feat: add ability to remove form field bottom margin (cherry picked from commit 05925ff77ed47f3865c2aecade8271390d9e2fa6) * [PM-2135] feat: refactor user-verification component * [PM-2135] feat: refactor user-verification-prompt * [PM-2135] feat: use form validation in prompt * [PM-2135] feat: change autofocus target * [PM-2135] chore: clean up old code * [PM-2135] feat: allow user verification to show invalid password error * [PM-2135] feat: hack mark as touched to get error to display * [PM-2135] chore: move to auth * [PM-2135] fix: hardcoded dialog buttons * [PM-2135] feat: add onDestroy handler * [PM-2135] fix: remove unecessary directive input * [PM-2135] feat: add password toggle * [PM-2135] chore: add hack comment * [PM-2135] chore: move services to auth folder and rename * [PM-2135] fix: show correct error messages * [PM-2135] fix: re-add non-existant files to whitelist I honestly don't know why the linter is complaining about this * Fix capital letters whitelist * [PM-2135] chore: remove rows that were mistakenly added during merge from master * [PM-2135] chore: remove rows that were mistakenly added during merge from master * [PM-2135] feat: disable built-in browser validations * Revert "[PM-2135] feat: disable built-in browser validations" This reverts commit 969f75822a. --------- Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2025-12-23 11:43:46 +00:00 · 2023-06-28 15:02:22 +02:00
parent 6ef6140b29
commit a73525a80c
48 changed files with 288 additions and 173 deletions
--- a/apps/web/src/app/auth/settings/deauthorize-sessions.component.ts
+++ b/apps/web/src/app/auth/settings/deauthorize-sessions.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";

 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { UpdateTwoFactorAuthenticatorRequest } from "@bitwarden/common/auth/models/request/update-two-factor-authenticator.request";
 import { TwoFactorAuthenticatorResponse } from "@bitwarden/common/auth/models/response/two-factor-authenticator.response";
--- a/apps/web/src/app/auth/settings/two-factor-base.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-base.component.ts
@@ -2,7 +2,7 @@ import { Directive, EventEmitter, Output } from "@angular/core";

 import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { VerificationType } from "@bitwarden/common/auth/enums/verification-type";
 import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request/secret-verification.request";
--- a/apps/web/src/app/auth/settings/two-factor-duo.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-duo.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";

 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { UpdateTwoFactorDuoRequest } from "@bitwarden/common/auth/models/request/update-two-factor-duo.request";
 import { TwoFactorDuoResponse } from "@bitwarden/common/auth/models/response/two-factor-duo.response";
--- a/apps/web/src/app/auth/settings/two-factor-email.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-email.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";

 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { TwoFactorEmailRequest } from "@bitwarden/common/auth/models/request/two-factor-email.request";
 import { UpdateTwoFactorEmailRequest } from "@bitwarden/common/auth/models/request/update-two-factor-email.request";
--- a/apps/web/src/app/auth/settings/two-factor-verify.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-verify.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { VerificationType } from "@bitwarden/common/auth/enums/verification-type";
 import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request/secret-verification.request";
--- a/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
@@ -2,7 +2,7 @@ import { Component, NgZone } from "@angular/core";

 import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request/secret-verification.request";
 import { UpdateTwoFactorWebAuthnDeleteRequest } from "@bitwarden/common/auth/models/request/update-two-factor-web-authn-delete.request";
--- a/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";

 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { UpdateTwoFactorYubioOtpRequest } from "@bitwarden/common/auth/models/request/update-two-factor-yubio-otp.request";
 import { TwoFactorYubiKeyResponse } from "@bitwarden/common/auth/models/response/two-factor-yubi-key.response";
--- a/apps/web/src/app/auth/shared/components/user-verification/index.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/index.ts
@@ -0,0 +1,3 @@
+export * from "./user-verification.module";
+export * from "./user-verification.component";
+export * from "./user-verification-prompt.component";
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.html
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.html
@@ -0,0 +1,20 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <span bitDialogTitle>{{ modalTitle | i18n }}</span>
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ confirmDescription | i18n }}</p>
+      <app-user-verification
+        [(invalidSecret)]="invalidSecret"
+        formControlName="secret"
+      ></app-user-verification>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ confirmButtonText | i18n }}
+      </button>
+      <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
@@ -0,0 +1,60 @@
+import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { UserVerificationPromptComponent as BaseUserVerificationPrompt } from "@bitwarden/angular/auth/components/user-verification-prompt.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
+import { ModalConfig } from "@bitwarden/angular/services/modal.service";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+export interface UserVerificationPromptParams {
+  confirmDescription: string;
+  confirmButtonText: string;
+  modalTitle: string;
+}
+
+@Component({
+  templateUrl: "user-verification-prompt.component.html",
+})
+export class UserVerificationPromptComponent extends BaseUserVerificationPrompt {
+  constructor(
+    @Inject(DIALOG_DATA) data: UserVerificationPromptParams,
+    private dialogRef: DialogRef<boolean>,
+    userVerificationService: UserVerificationService,
+    formBuilder: FormBuilder,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService
+  ) {
+    // TODO: Remove when BaseUserVerificationPrompt has support for CL
+    const modalConfig: ModalConfig = { data };
+    super(
+      null,
+      modalConfig,
+      userVerificationService,
+      formBuilder,
+      platformUtilsService,
+      i18nService
+    );
+  }
+
+  override close(success: boolean) {
+    this.dialogRef.close(success);
+  }
+}
+
+/**
+ * Strongly typed helper to open a UserVerificationPrompt
+ * @param dialogService Instance of the dialog service that will be used to open the dialog
+ * @param config Configuration for the dialog
+ */
+export const openUserVerificationPrompt = (
+  dialogService: DialogServiceAbstraction,
+  config: DialogConfig<UserVerificationPromptParams>
+) => {
+  return dialogService.open<boolean, UserVerificationPromptParams>(
+    UserVerificationPromptComponent,
+    config
+  );
+};
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
@@ -0,0 +1,41 @@
+<ng-container *ngIf="!usesKeyConnector">
+  <bit-form-field disableMargin>
+    <bit-label>{{ "masterPass" | i18n }}</bit-label>
+    <input
+      bitInput
+      id="masterPassword"
+      type="password"
+      name="MasterPasswordHash"
+      [formControl]="secret"
+      appAutofocus
+      appInputVerbatim
+    />
+    <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+    <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
+  </bit-form-field>
+</ng-container>
+<ng-container *ngIf="usesKeyConnector">
+  <div class="tw-mb-6">
+    <label class="tw-block">{{ "sendVerificationCode" | i18n }}</label>
+    <button type="button" bitButton buttonType="secondary" [bitAction]="requestOTP" appAutofocus>
+      {{ "sendCode" | i18n }}
+    </button>
+    <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
+      <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+      {{ "codeSent" | i18n }}
+    </span>
+  </div>
+
+  <bit-form-field disableMargin>
+    <bit-label>{{ "verificationCode" | i18n }}</bit-label>
+    <input
+      bitInput
+      type="text"
+      id="verificationCode"
+      name="verificationCode"
+      [formControl]="secret"
+      appInputVerbatim
+    />
+    <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
+  </bit-form-field>
+</ng-container>
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.ts
@@ -0,0 +1,23 @@
+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 {}
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification.module.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { SharedModule } from "../../../../shared/shared.module";
+
+import { UserVerificationPromptComponent } from "./user-verification-prompt.component";
+import { UserVerificationComponent } from "./user-verification.component";
+
+@NgModule({
+  imports: [SharedModule, FormsModule, ReactiveFormsModule],
+  declarations: [UserVerificationComponent, UserVerificationPromptComponent],
+  exports: [UserVerificationComponent, UserVerificationPromptComponent],
+})
+export class UserVerificationModule {}
--- a/apps/web/src/app/auth/update-password.component.ts
+++ b/apps/web/src/app/auth/update-password.component.ts
@@ -4,8 +4,8 @@ import { Router } from "@angular/router";
 import { UpdatePasswordComponent as BaseUpdatePasswordComponent } from "@bitwarden/angular/auth/components/update-password.component";
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";