Update export design (#2184)

jslib

@@ -1 +1 @@
-Subproject commit 720967475b37d635c18a1eb74bb3702445647b4d
+Subproject commit ea9a8b979d5b5797ddf010bbc625843b149065e9

src/_locales/en/messages.json

@@ -121,12 +121,21 @@
   "continue": {
     "message": "Continue"
   },
-  "requestVerificationCode": {
+  "sendVerificationCode": {
-    "message": "Request one-time password"
+    "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"
   },

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,

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>

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 { }

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>
+                <app-verify-master-password ngDefaultControl formControlName="secret" name="Secret">
-                    <div class="row-main">
+                </app-verify-master-password>
-                        <app-verify-master-password ngDefaultControl formControlName="secret" name="Secret">
-                        </app-verify-master-password>
-                    </div>
-                </div>
             </div>
             <div class="box-footer">
-                <p>{{'exportMasterPassword' | i18n}}</p>
+                <p>{{'confirmIdentity' | i18n}}</p>
             </div>
         </div>
     </content>