From ea9a8b979d5b5797ddf010bbc625843b149065e9 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <oscar@oscarhinton.com>
Date: Wed, 17 Nov 2021 11:57:05 +0100
Subject: [PATCH] Update verify master password component (#553)

---
 .../verify-master-password.component.html     | 10 +++++++--
 .../verify-master-password.component.ts       | 22 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/angular/src/components/verify-master-password.component.html b/angular/src/components/verify-master-password.component.html
index ff34926a30..19132c15b5 100644
--- a/angular/src/components/verify-master-password.component.html
+++ b/angular/src/components/verify-master-password.component.html
@@ -5,14 +5,20 @@
 </ng-container>
 <ng-container *ngIf="usesKeyConnector">
     <div class="form-group">
-        <button type="button" class="btn btn-primary" (click)="requestOTP()" [disabled]="disableRequestOTP">
-            {{'requestVerificationCode' | i18n}}
+        <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="fa fa-check-circle-o" 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>
diff --git a/angular/src/components/verify-master-password.component.ts b/angular/src/components/verify-master-password.component.ts
index 9d8bca633f..1975b4e200 100644
--- a/angular/src/components/verify-master-password.component.ts
+++ b/angular/src/components/verify-master-password.component.ts
@@ -1,3 +1,9 @@
+import {
+    animate,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
 import {
     Component,
     OnInit,
@@ -25,10 +31,19 @@ import { Verification } from 'jslib-common/types/verification';
             useExisting: VerifyMasterPasswordComponent,
         },
     ],
+    animations: [
+        trigger('sent', [
+            transition(':enter', [
+                style({ opacity: 0 }),
+                animate('100ms', style({ opacity: 1 })),
+            ]),
+        ]),
+    ],
 })
 export class VerifyMasterPasswordComponent implements ControlValueAccessor, OnInit {
     usesKeyConnector: boolean = false;
     disableRequestOTP: boolean = false;
+    sentCode: boolean = false;
 
     secret = new FormControl('');
 
@@ -47,7 +62,12 @@ export class VerifyMasterPasswordComponent implements ControlValueAccessor, OnIn
     async requestOTP() {
         if (this.usesKeyConnector) {
             this.disableRequestOTP = true;
-            await this.userVerificationService.requestOTP();
+            try {
+                await this.userVerificationService.requestOTP();
+                this.sentCode = true;
+            } finally {
+                this.disableRequestOTP = false;
+            }
         }
     }