Update export to match the design changes (#1163)

jslib

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

src/app/app.module.ts

@@ -33,7 +33,6 @@ import { VaultTimeoutInputComponent } from './accounts/vault-timeout-input.compo
 
 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 { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
@@ -75,6 +74,7 @@ import { NavComponent } from './layout/nav.component';
 
 import { PasswordRepromptComponent } from './components/password-reprompt.component';
 import { SetPinComponent } from './components/set-pin.component';
+import { VerifyMasterPasswordComponent } from './components/verify-master-password.component';
 
 import { registerLocaleData } from '@angular/common';
 import localeAf from '@angular/common/locales/af';

src/app/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/app/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/app/vault/export.component.html

@@ -16,15 +16,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>
             </div>

src/locales/en/messages.json

@@ -541,12 +541,21 @@
   "noItemsInList": {
     "message": "There are no items to list."
   },
-  "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."
+  },
   "verificationCodeRequired": {
     "message": "Verification code is required."
   },
@@ -1260,9 +1269,6 @@
   "encExportAccountWarningDesc": {
     "message": "Account encryption keys are unique to each Bitwarden user account, so you can't import an encrypted export into a different account."
   },
-  "exportMasterPassword": {
-    "message": "Enter your master password to export your vault data."
-  },
   "noOrganizationsList": {
     "message": "You do not belong to any organizations. Organizations allow you to securely share items with other users."
   },