From 5ccf5584b881ab7bbad8b82e4082c7e681784fe1 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Fri, 5 May 2023 10:33:39 +0200
Subject: [PATCH] [PM-2135] feat: refactor user-verification component

---
 .../user-verification.component.html          | 51 +++++++++----------
 .../components/user-verification.component.ts |  8 +--
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/app/components/user-verification/user-verification.component.html b/apps/web/src/app/components/user-verification/user-verification.component.html
index b90c6074d8..b0b4a543cd 100644
--- a/apps/web/src/app/components/user-verification/user-verification.component.html
+++ b/apps/web/src/app/components/user-verification/user-verification.component.html
@@ -1,46 +1,41 @@
 <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>
+  <bit-form-field disableMargin>
+    <bit-label>{{ "masterPass" | i18n }}</bit-label>
+    <input
+      bitInput
+      id="masterPassword"
+      type="password"
+      name="MasterPasswordHash"
+      [formControl]="secret"
+      appAutofocus
+      appInputVerbatim
+    />
+    <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
+  </bit-form-field>
 </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"
-    >
+  <div class="tw-mb-6">
+    <label class="tw-block">{{ "sendVerificationCode" | i18n }}</label>
+    <button type="button" bitButton buttonType="secondary" [bitAction]="requestOTP">
       {{ "sendCode" | i18n }}
     </button>
-    <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
+    <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>
 
-  <div class="form-group">
-    <label for="verificationCode">{{ "verificationCode" | i18n }}</label>
+  <bit-form-field disableMargin>
+    <bit-label>{{ "verificationCode" | i18n }}</bit-label>
     <input
+      bitInput
+      type="text"
       id="verificationCode"
-      type="input"
       name="verificationCode"
-      class="form-control"
       [formControl]="secret"
-      required
       appAutofocus
       appInputVerbatim
     />
-    <small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small>
-  </div>
+    <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
+  </bit-form-field>
 </ng-container>
diff --git a/libs/angular/src/auth/components/user-verification.component.ts b/libs/angular/src/auth/components/user-verification.component.ts
index ea514e177c..63ddd0e9bc 100644
--- a/libs/angular/src/auth/components/user-verification.component.ts
+++ b/libs/angular/src/auth/components/user-verification.component.ts
@@ -1,5 +1,5 @@
 import { Directive, OnInit } from "@angular/core";
-import { ControlValueAccessor, FormControl } from "@angular/forms";
+import { ControlValueAccessor, FormControl, Validators } from "@angular/forms";
 
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
 import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
@@ -22,7 +22,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
   disableRequestOTP = false;
   sentCode = false;
 
-  secret = new FormControl("");
+  secret = new FormControl("", [Validators.required]);
 
   private onChange: (value: Verification) => void;
 
@@ -39,7 +39,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
     this.secret.valueChanges.subscribe((secret: string) => this.processChanges(secret));
   }
 
-  async requestOTP() {
+  requestOTP = async () => {
     if (this.usesKeyConnector) {
       this.disableRequestOTP = true;
       try {
@@ -49,7 +49,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
         this.disableRequestOTP = false;
       }
     }
-  }
+  };
 
   writeValue(obj: any): void {
     this.secret.setValue(obj);