[KeyConnector] Add support for key connector OTP (#1256)

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

src/app/settings/account.component.html

@@ -2,18 +2,24 @@
     <h1>{{'myAccount' | i18n}}</h1>
 </div>
 <app-profile></app-profile>
-<div class="secondary-header">
-    <h1>{{'changeEmail' | i18n}}</h1>
-</div>
-<app-change-email></app-change-email>
-<div class="secondary-header">
-    <h1>{{'changeMasterPassword' | i18n}}</h1>
-</div>
-<app-change-password></app-change-password>
-<div class="secondary-header">
-    <h1>{{'encKeySettings' | i18n}}</h1>
-</div>
-<app-change-kdf></app-change-kdf>
+<ng-container *ngIf="showChangeEmail">
+    <div class="secondary-header">
+        <h1>{{'changeEmail' | i18n}}</h1>
+    </div>
+    <app-change-email></app-change-email>
+</ng-container>
+<ng-container *ngIf="showChangePassword">
+    <div class="secondary-header">
+        <h1>{{'changeMasterPassword' | i18n}}</h1>
+    </div>
+    <app-change-password></app-change-password>
+</ng-container>
+<ng-container *ngIf="showChangeKdf">
+    <div class="secondary-header">
+        <h1>{{'encKeySettings' | i18n}}</h1>
+    </div>
+    <app-change-kdf></app-change-kdf>
+</ng-container>
 <div class="secondary-header border-0 mb-0">
     <h1>{{'apiKey' | i18n}}</h1>
 </div>

src/app/settings/account.component.ts

@@ -10,6 +10,7 @@ import { DeleteAccountComponent } from './delete-account.component';
 import { PurgeVaultComponent } from './purge-vault.component';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { ModalService } from 'jslib-angular/services/modal.service';
@@ -25,8 +26,17 @@ export class AccountComponent {
     @ViewChild('viewUserApiKeyTemplate', { read: ViewContainerRef, static: true }) viewUserApiKeyModalRef: ViewContainerRef;
     @ViewChild('rotateUserApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateUserApiKeyModalRef: ViewContainerRef;
 
+    showChangePassword = true;
+    showChangeKdf = true;
+    showChangeEmail = true;
+
     constructor(private modalService: ModalService, private apiService: ApiService,
-        private userService: UserService) { }
+        private userService: UserService, private keyConnectorService: KeyConnectorService) { }
+
+    async ngOnInit() {
+        this.showChangeEmail = this.showChangeKdf = this.showChangePassword =
+            !await this.keyConnectorService.getUsesKeyConnector();
+    }
 
     async deauthorizeSessions() {
         await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);

src/app/settings/api-key.component.html

@@ -9,11 +9,9 @@
             </div>
             <div class="modal-body">
                 <p>{{apiKeyDescription | i18n}}</p>
-                <ng-container *ngIf="!clientSecret">
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-                        [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
-                </ng-container>
+                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret" *ngIf="!clientSecret">
+                </app-verify-master-password>
+
                 <app-callout type="warning" *ngIf="clientSecret">{{apiKeyWarning | i18n}}</app-callout>
                 <app-callout type="info" title="{{'oauth2ClientCredentials' | i18n}}" icon="fa-key"
                     *ngIf="clientSecret">

src/app/settings/api-key.component.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
-
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { SecretVerificationRequest } from 'jslib-common/models/request/secretVerificationRequest';
 
 import { ApiKeyResponse } from 'jslib-common/models/response/apiKeyResponse';
 
+import { Verification } from 'jslib-common/types/verification';
+
 @Component({
     selector: 'app-api-key',
     templateUrl: 'api-key.component.html',
@@ -17,7 +16,7 @@ import { ApiKeyResponse } from 'jslib-common/models/response/apiKeyResponse';
 export class ApiKeyComponent {
     keyType: string;
     isRotation: boolean;
-    postKey: (entityId: string, request: PasswordVerificationRequest) => Promise<ApiKeyResponse>;
+    postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
     entityId: string;
     scope: string;
     grantType: string;
@@ -25,23 +24,16 @@ export class ApiKeyComponent {
     apiKeyWarning: string;
     apiKeyDescription: string;
 
-    masterPassword: string;
+    masterPassword: Verification;
     formPromise: Promise<ApiKeyResponse>;
     clientId: string;
     clientSecret: string;
 
-    constructor(private i18nService: I18nService, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private logService: LogService) { }
+    constructor(private userVerificationService: UserVerificationService, private logService: LogService) { }
 
     async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
+        const request = await this.userVerificationService.buildRequest(this.masterPassword);
 
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
             this.formPromise = this.postKey(this.entityId, request);
             const response = await this.formPromise;

src/app/settings/deauthorize-sessions.component.html

@@ -10,9 +10,8 @@
             <div class="modal-body">
                 <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
                 <app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
-                <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-                    [(ngModel)]="masterPassword" required appAutoFocus appInputVerbatim>
+                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
+                </app-verify-master-password>
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">

src/app/settings/deauthorize-sessions.component.ts

@@ -3,34 +3,28 @@ import { Component } from '@angular/core';
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { Verification } from 'jslib-common/types/verification';
 
 @Component({
     selector: 'app-deauthorize-sessions',
     templateUrl: 'deauthorize-sessions.component.html',
 })
 export class DeauthorizeSessionsComponent {
-    masterPassword: string;
+    masterPassword: Verification;
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
         private messagingService: MessagingService, private logService: LogService) { }
 
     async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
+        const request = await this.userVerificationService.buildRequest(this.masterPassword);
 
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
             this.formPromise = this.apiService.postSecurityStamp(request);
             await this.formPromise;

src/app/settings/delete-account.component.html

@@ -10,9 +10,8 @@
             <div class="modal-body">
                 <p>{{'deleteAccountDesc' | i18n}}</p>
                 <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
-                <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-                    [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
+                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
+                </app-verify-master-password>
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">

src/app/settings/delete-account.component.ts

@@ -3,34 +3,28 @@ import { Component } from '@angular/core';
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { Verification } from 'jslib-common/types/verification';
 
 @Component({
     selector: 'app-delete-account',
     templateUrl: 'delete-account.component.html',
 })
 export class DeleteAccountComponent {
-    masterPassword: string;
+    masterPassword: Verification;
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
         private messagingService: MessagingService, private logService: LogService) { }
 
     async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
+        const request = await this.userVerificationService.buildRequest(this.masterPassword);
 
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
             this.formPromise = this.apiService.deleteAccount(request);
             await this.formPromise;

src/app/settings/emergency-add-edit.component.ts

@@ -9,6 +9,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -33,10 +34,10 @@ export class EmergencyAddEditComponent extends BaseAddEditComponent {
         userService: UserService, collectionService: CollectionService,
         totpService: TotpService, passwordGenerationService: PasswordGenerationService,
         messagingService: MessagingService, eventService: EventService, policyService: PolicyService,
-        logService: LogService) {
+        logService: LogService, passwordRepromptService: PasswordRepromptService) {
         super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
             userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService, policyService, logService);
+            eventService, policyService, passwordRepromptService, logService);
     }
 
     async load() {

src/app/settings/profile.component.html

@@ -13,7 +13,7 @@
                 <label for="email">{{'email' | i18n}}</label>
                 <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="profile.email" readonly>
             </div>
-            <div class="form-group">
+            <div class="form-group" *ngIf="!hidePasswordHint">
                 <label for="masterPasswordHint">{{'masterPassHintLabel' | i18n}}</label>
                 <input id="masterPasswordHint" class="form-control" type="text" name="MasterPasswordHint"
                     [(ngModel)]="profile.masterPasswordHint">

src/app/settings/profile.component.ts

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -23,12 +24,14 @@ export class ProfileComponent implements OnInit {
     loading = true;
     profile: ProfileResponse;
     fingerprint: string;
+    hidePasswordHint = false;
 
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private userService: UserService,
-        private cryptoService: CryptoService, private logService: LogService) { }
+        private cryptoService: CryptoService, private logService: LogService,
+        private keyConnectorService: KeyConnectorService) { }
 
     async ngOnInit() {
         this.profile = await this.apiService.getProfile();
@@ -37,6 +40,7 @@ export class ProfileComponent implements OnInit {
         if (fingerprint != null) {
             this.fingerprint = fingerprint.join('-');
         }
+        this.hidePasswordHint = await this.keyConnectorService.getUsesKeyConnector();
     }
 
     async submit() {

src/app/settings/purge-vault.component.html

@@ -10,9 +10,8 @@
             <div class="modal-body">
                 <p>{{(organizationId ? 'purgeOrgVaultDesc' : 'purgeVaultDesc') | i18n}}</p>
                 <app-callout type="warning">{{'purgeVaultWarning' | i18n}}</app-callout>
-                <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-                    [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
+                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
+                </app-verify-master-password>
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">

src/app/settings/purge-vault.component.ts

@@ -7,11 +7,11 @@ import { Router } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { Verification } from 'jslib-common/types/verification';
 
 @Component({
     selector: 'app-purge-vault',
@@ -20,22 +20,16 @@ import { PasswordVerificationRequest } from 'jslib-common/models/request/passwor
 export class PurgeVaultComponent {
     @Input() organizationId?: string = null;
 
-    masterPassword: string;
+    masterPassword: Verification;
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
         private router: Router, private logService: LogService) { }
 
     async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
+        const request = await this.userVerificationService.buildRequest(this.masterPassword);
 
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
             this.formPromise = this.apiService.postPurgeCiphers(request, this.organizationId);
             await this.formPromise;

src/app/settings/two-factor-authenticator.component.ts

@@ -11,6 +11,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { UpdateTwoFactorAuthenticatorRequest } from 'jslib-common/models/request/updateTwoFactorAuthenticatorRequest';
 import { TwoFactorAuthenticatorResponse } from 'jslib-common/models/response/twoFactorAuthenticatorResponse';
@@ -32,9 +33,10 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent impl
     private qrScript: HTMLScriptElement;
 
     constructor(apiService: ApiService, i18nService: I18nService,
-        toasterService: ToasterService, private userService: UserService,
-        platformUtilsService: PlatformUtilsService, logService: LogService) {
-        super(apiService, i18nService, toasterService, platformUtilsService, logService);
+        toasterService: ToasterService, userVerificationService: UserVerificationService,
+        platformUtilsService: PlatformUtilsService, logService: LogService,
+        private userService: UserService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService);
         this.qrScript = window.document.createElement('script');
         this.qrScript.src = 'scripts/qrious.min.js';
         this.qrScript.async = true;
@@ -61,9 +63,8 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent impl
         }
     }
 
-    protected enable() {
-        const request = new UpdateTwoFactorAuthenticatorRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+    protected async enable() {
+        const request = await this.buildRequestModel(UpdateTwoFactorAuthenticatorRequest);
         request.token = this.token;
         request.key = this.key;
 

src/app/settings/two-factor-base.component.ts

@@ -10,8 +10,12 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
+import { VerificationType } from 'jslib-common/enums/verificationType';
+
+import { SecretVerificationRequest } from 'jslib-common/models/request/secretVerificationRequest';
 import { TwoFactorProviderRequest } from 'jslib-common/models/request/twoFactorProviderRequest';
 
 @Directive()
@@ -24,14 +28,16 @@ export abstract class TwoFactorBaseComponent {
     enabled = false;
     authed = false;
 
-    protected masterPasswordHash: string;
+    protected hashedSecret: string;
+    protected verificationType: VerificationType;
 
     constructor(protected apiService: ApiService, protected i18nService: I18nService,
         protected toasterService: ToasterService, protected platformUtilsService: PlatformUtilsService,
-        protected logService: LogService) { }
+        protected logService: LogService, protected userVerificationService: UserVerificationService) { }
 
     protected auth(authResponse: any) {
-        this.masterPasswordHash = authResponse.masterPasswordHash;
+        this.hashedSecret = authResponse.secret;
+        this.verificationType = authResponse.verificationType;
         this.authed = true;
     }
 
@@ -52,8 +58,7 @@ export abstract class TwoFactorBaseComponent {
         }
 
         try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
+            const request = await this.buildRequestModel(TwoFactorProviderRequest);
             request.type = this.type;
             if (this.organizationId != null) {
                 promise = this.apiService.putTwoFactorOrganizationDisable(this.organizationId, request);
@@ -68,4 +73,11 @@ export abstract class TwoFactorBaseComponent {
             this.logService.error(e);
         }
     }
+
+    protected async buildRequestModel<T extends SecretVerificationRequest>(requestClass: new() => T)  {
+        return this.userVerificationService.buildRequest({
+            secret: this.hashedSecret,
+            type: this.verificationType,
+        }, requestClass, true);
+    }
 }

src/app/settings/two-factor-duo.component.ts

@@ -6,6 +6,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
 import { UpdateTwoFactorDuoRequest } from 'jslib-common/models/request/updateTwoFactorDuoRequest';
@@ -26,8 +27,8 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
 
     constructor(apiService: ApiService, i18nService: I18nService,
         toasterService: ToasterService, platformUtilsService: PlatformUtilsService,
-        logService: LogService) {
-        super(apiService, i18nService, toasterService, platformUtilsService, logService);
+        logService: LogService, userVerificationService: UserVerificationService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService);
     }
 
     auth(authResponse: any) {
@@ -43,9 +44,8 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
         }
     }
 
-    protected enable() {
-        const request = new UpdateTwoFactorDuoRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+    protected async enable() {
+        const request = await this.buildRequestModel(UpdateTwoFactorDuoRequest);
         request.integrationKey = this.ikey;
         request.secretKey = this.skey;
         request.host = this.host;

src/app/settings/two-factor-email.component.ts

@@ -7,6 +7,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { TwoFactorEmailRequest } from 'jslib-common/models/request/twoFactorEmailRequest';
 
@@ -30,8 +31,9 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
 
     constructor(apiService: ApiService, i18nService: I18nService,
         toasterService: ToasterService, platformUtilsService: PlatformUtilsService,
-        private userService: UserService, logService: LogService) {
-        super(apiService, i18nService, toasterService, platformUtilsService, logService);
+        logService: LogService, userVerificationService: UserVerificationService,
+        private userService: UserService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService);
     }
 
     auth(authResponse: any) {
@@ -49,7 +51,8 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
 
     async sendEmail() {
         try {
-            const request = new TwoFactorEmailRequest(this.email, this.masterPasswordHash);
+            const request = await this.buildRequestModel(TwoFactorEmailRequest);
+            request.email = this.email;
             this.emailPromise = this.apiService.postTwoFactorEmailSetup(request);
             await this.emailPromise;
             this.sentEmail = this.email;
@@ -58,9 +61,8 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
         }
     }
 
-    protected enable() {
-        const request = new UpdateTwoFactorEmailRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+    protected async enable() {
+        const request = await this.buildRequestModel(UpdateTwoFactorEmailRequest);
         request.email = this.email;
         request.token = this.token;
 

src/app/settings/two-factor-verify.component.html

@@ -1,9 +1,8 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="modal-body">
         <p>{{'twoStepLoginAuthDesc' | i18n}}</p>
-        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-        <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-            [(ngModel)]="masterPassword" required appAutoFocus appInputVerbatim>
+        <app-verify-master-password [(ngModel)]="secret" ngDefaultControl name="secret">
+        </app-verify-master-password>
     </div>
     <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">

src/app/settings/two-factor-verify.component.ts

@@ -5,16 +5,14 @@ import {
     Output,
 } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
-
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
+import { VerificationType } from 'jslib-common/enums/verificationType';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { Verification } from 'jslib-common/types/verification';
 
 @Component({
     selector: 'app-two-factor-verify',
@@ -25,25 +23,14 @@ export class TwoFactorVerifyComponent {
     @Input() organizationId: string;
     @Output() onAuthed = new EventEmitter<any>();
 
-    masterPassword: string;
+    secret: Verification;
     formPromise: Promise<any>;
 
-    private masterPasswordHash: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private cryptoService: CryptoService,
-        private logService: LogService) { }
+    constructor(private apiService: ApiService, private logService: LogService,
+        private userVerificationService: UserVerificationService) { }
 
     async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
-
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = this.masterPasswordHash =
-            await this.cryptoService.hashPassword(this.masterPassword, null);
+        const request = await this.userVerificationService.buildRequest(this.secret);
 
         try {
             switch (this.type) {
@@ -75,7 +62,10 @@ export class TwoFactorVerifyComponent {
             const response = await this.formPromise;
             this.onAuthed.emit({
                 response: response,
-                masterPasswordHash: this.masterPasswordHash,
+                secret: this.secret.type === VerificationType.MasterPassword
+                    ? request.masterPasswordHash
+                    : request.otp,
+                verificationType: this.secret.type,
             });
         } catch (e) {
             this.logService.error(e);

src/app/settings/two-factor-webauthn.component.ts

@@ -9,10 +9,11 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
 
-import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
+import { SecretVerificationRequest } from 'jslib-common/models/request/secretVerificationRequest';
 import { UpdateTwoFactorWebAuthnDeleteRequest } from 'jslib-common/models/request/updateTwoFactorWebAuthnDeleteRequest';
 import { UpdateTwoFactorWebAuthnRequest } from 'jslib-common/models/request/updateTwoFactorWebAuthnRequest';
 import {
@@ -40,8 +41,8 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
 
     constructor(apiService: ApiService, i18nService: I18nService,
         toasterService: ToasterService, platformUtilsService: PlatformUtilsService,
-        private ngZone: NgZone, logService: LogService) {
-        super(apiService, i18nService, toasterService, platformUtilsService, logService);
+        private ngZone: NgZone, logService: LogService, userVerificationService: UserVerificationService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService);
     }
 
     auth(authResponse: any) {
@@ -49,13 +50,12 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
         this.processResponse(authResponse.response);
     }
 
-    submit() {
+    async submit() {
         if (this.webAuthnResponse == null || this.keyIdAvailable == null) {
             // Should never happen.
             return Promise.reject();
         }
-        const request = new UpdateTwoFactorWebAuthnRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+        const request = await this.buildRequestModel(UpdateTwoFactorWebAuthnRequest);
         request.deviceResponse = this.webAuthnResponse;
         request.id = this.keyIdAvailable;
         request.name = this.name;
@@ -82,9 +82,8 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
         if (!confirmed) {
             return;
         }
-        const request = new UpdateTwoFactorWebAuthnDeleteRequest();
+        const request = await this.buildRequestModel(UpdateTwoFactorWebAuthnDeleteRequest);
         request.id = key.id;
-        request.masterPasswordHash = this.masterPasswordHash;
         try {
             key.removePromise = this.apiService.deleteTwoFactorWebAuthn(request);
             const response = await key.removePromise;
@@ -99,8 +98,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
         if (this.keyIdAvailable == null) {
             return;
         }
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+        const request = await this.buildRequestModel(SecretVerificationRequest);
         try {
             this.challengePromise = this.apiService.getTwoFactorWebAuthnChallenge(request);
             const challenge = await this.challengePromise;

src/app/settings/two-factor-yubikey.component.ts

@@ -6,6 +6,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { UpdateTwoFactorYubioOtpRequest } from 'jslib-common/models/request/updateTwoFactorYubioOtpRequest';
 import { TwoFactorYubiKeyResponse } from 'jslib-common/models/response/twoFactorYubiKeyResponse';
@@ -28,8 +29,8 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
 
     constructor(apiService: ApiService, i18nService: I18nService,
         toasterService: ToasterService, platformUtilsService: PlatformUtilsService,
-        logService: LogService) {
-        super(apiService, i18nService, toasterService, platformUtilsService, logService);
+        logService: LogService, userVerificationService: UserVerificationService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService);
     }
 
     auth(authResponse: any) {
@@ -37,9 +38,8 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
         this.processResponse(authResponse.response);
     }
 
-    submit() {
-        const request = new UpdateTwoFactorYubioOtpRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
+    async submit() {
+        const request = await this.buildRequestModel(UpdateTwoFactorYubioOtpRequest);
         request.key1 = this.keys != null && this.keys.length > 0 ? this.keys[0].key : null;
         request.key2 = this.keys != null && this.keys.length > 1 ? this.keys[1].key : null;
         request.key3 = this.keys != null && this.keys.length > 2 ? this.keys[2].key : null;