From 378e6433bee15df157701f58b1519aaf4c3ea79f Mon Sep 17 00:00:00 2001
From: Oscar Hinton <oscar@oscarhinton.com>
Date: Wed, 17 Nov 2021 20:31:35 +0100
Subject: [PATCH] Update export design (#2184)

---
 jslib                                         |  2 +-
 src/_locales/en/messages.json                 | 13 ++++++--
 src/popup/app.module.ts                       |  2 +-
 .../verify-master-password.component.html     | 25 +++++++++++++++
 .../verify-master-password.component.ts       | 31 +++++++++++++++++++
 src/popup/settings/export.component.html      | 10 ++----
 6 files changed, 72 insertions(+), 11 deletions(-)
 create mode 100644 src/popup/components/verify-master-password.component.html
 create mode 100644 src/popup/components/verify-master-password.component.ts

diff --git a/jslib b/jslib
index 720967475b..ea9a8b979d 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 720967475b37d635c18a1eb74bb3702445647b4d
+Subproject commit ea9a8b979d5b5797ddf010bbc625843b149065e9
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 4084c6dd9b..d6d924726a 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -121,12 +121,21 @@
   "continue": {
     "message": "Continue"
   },
-  "requestVerificationCode": {
-    "message": "Request one-time password"
+  "sendVerificationCode": {
+    "message": "Send a verification code to your email"
+  },
+  "sendCode": {
+    "message": "Send Code"
+  },
+  "codeSent": {
+    "message": "Code Sent"
   },
   "verificationCode": {
     "message": "Verification Code"
   },
+  "confirmIdentity": {
+    "message": "Confirm your identity to continue."
+  },
   "account": {
     "message": "Account"
   },
diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index 89719c79e1..61ba5b1cd8 100644
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -81,10 +81,10 @@ import { PasswordRepromptComponent } from './components/password-reprompt.compon
 import { PopOutComponent } from './components/pop-out.component';
 import { SendListComponent } from './components/send-list.component';
 import { SetPinComponent } from './components/set-pin.component';
+import { VerifyMasterPasswordComponent } from './components/verify-master-password.component';
 
 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
-import { VerifyMasterPasswordComponent } from 'jslib-angular/components/verify-master-password.component';
 
 import {
     CurrencyPipe,
diff --git a/src/popup/components/verify-master-password.component.html b/src/popup/components/verify-master-password.component.html
new file mode 100644
index 0000000000..bf85c29920
--- /dev/null
+++ b/src/popup/components/verify-master-password.component.html
@@ -0,0 +1,25 @@
+<ng-container *ngIf="!usesKeyConnector">
+    <div class="box-content-row" appBoxRow>
+        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+        <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+            [formControl]="secret" required appAutofocus appInputVerbatim>
+    </div>
+</ng-container>
+<ng-container *ngIf="usesKeyConnector">
+    <div class="box-content-row" appBoxRow>
+        <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="box-content-row" appBoxRow>
+        <label for="verificationCode">{{'verificationCode' | i18n}}</label>
+        <input id="verificationCode" type="input" name="verificationCode" class="form-control"
+            [formControl]="secret" required appAutofocus appInputVerbatim>
+    </div>
+</ng-container>
diff --git a/src/popup/components/verify-master-password.component.ts b/src/popup/components/verify-master-password.component.ts
new file mode 100644
index 0000000000..d51e5dc614
--- /dev/null
+++ b/src/popup/components/verify-master-password.component.ts
@@ -0,0 +1,31 @@
+import {
+    animate,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import { Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { VerifyMasterPasswordComponent as BaseComponent } from 'jslib-angular/components/verify-master-password.component';
+
+@Component({
+    selector: 'app-verify-master-password',
+    templateUrl: 'verify-master-password.component.html',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: VerifyMasterPasswordComponent,
+        },
+    ],
+    animations: [
+        trigger('sent', [
+            transition(':enter', [
+                style({ opacity: 0 }),
+                animate('100ms', style({ opacity: 1 })),
+            ]),
+        ]),
+    ],
+})
+export class VerifyMasterPasswordComponent extends BaseComponent { }
diff --git a/src/popup/settings/export.component.html b/src/popup/settings/export.component.html
index 75b918cebd..8dfe5babdd 100644
--- a/src/popup/settings/export.component.html
+++ b/src/popup/settings/export.component.html
@@ -26,15 +26,11 @@
                         <option *ngFor="let f of formatOptions" [value]="f.value">{{f.name}}</option>
                     </select>
                 </div>
-                <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
-                        <app-verify-master-password ngDefaultControl formControlName="secret" name="Secret">
-                        </app-verify-master-password>
-                    </div>
-                </div>
+                <app-verify-master-password ngDefaultControl formControlName="secret" name="Secret">
+                </app-verify-master-password>
             </div>
             <div class="box-footer">
-                <p>{{'exportMasterPassword' | i18n}}</p>
+                <p>{{'confirmIdentity' | i18n}}</p>
             </div>
         </div>
     </content>