consolidate 2fa component functionality

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
 import { TwoFactorEmailComponent } from './settings/two-factor-email.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component';
+import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component';
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
 
 import { ExportComponent } from './tools/export.component';
@@ -154,6 +155,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         TwoFactorEmailComponent,
         TwoFactorOptionsComponent,
         TwoFactorU2fComponent,
+        TwoFactorVerifyComponent,
         TwoFactorYubiKeyComponent,
         TwoFactorSetupComponent,
         UserLayoutComponent,

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

@@ -10,21 +10,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
-                <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>
-                </div>
-                <div class="modal-footer">
-                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
-                        <span>{{'continue' | i18n}}</span>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-                </div>
-            </form>
+            <app-two-factor-verify [type]="twoFactorProviderType.Authenticator" (onAuthed)="auth($event)" *ngIf="!authed">
+            </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <ng-container *ngIf="!enabled">

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

@@ -1,107 +1,61 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
-import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
 import { UpdateTwoFactorAuthenticatorRequest } from 'jslib/models/request/updateTwoFactorAuthenticatorRequest';
 import { TwoFactorAuthenticatorResponse } from 'jslib/models/response/twoFactorAuthenticatorResponse';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
+import { TwoFactorBaseComponent } from './two-factor-base.component';
+
 @Component({
     selector: 'app-two-factor-authenticator',
     templateUrl: 'two-factor-authenticator.component.html',
 })
-export class TwoFactorAuthenticatorComponent {
-    @Output() onUpdated = new EventEmitter<boolean>();
-
-    enabled = false;
-    authed = false;
+export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent {
     key: string;
     qr: string;
     token: string;
-    masterPassword: string;
-
-    authPromise: Promise<any>;
     formPromise: Promise<any>;
 
-    private masterPasswordHash: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private userService: UserService,
-        private platformUtilsService: PlatformUtilsService) { }
-
-    async auth() {
-        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);
-        try {
-            this.authPromise = this.apiService.getTwoFactorAuthenticator(request);
-            const response = await this.authPromise;
-            this.authed = true;
-            await this.processResponse(response);
-        } catch { }
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        private userService: UserService, platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
+            TwoFactorProviderType.Authenticator);
     }
 
-    async submit() {
+    auth(authResponse: any) {
+        super.auth(authResponse);
+        return this.processResponse(authResponse.response);
+    }
+
+    submit() {
         if (this.enabled) {
-            this.disable();
+            return super.disable(this.formPromise);
         } else {
-            this.enable();
+            return this.enable();
         }
     }
 
-    private async enable() {
+    protected enable() {
         const request = new UpdateTwoFactorAuthenticatorRequest();
         request.masterPasswordHash = this.masterPasswordHash;
         request.token = this.token;
         request.key = this.key;
-        try {
+
+        return super.enable(async () => {
             this.formPromise = this.apiService.putTwoFactorAuthenticator(request);
             const response = await this.formPromise;
             await this.processResponse(response);
-            this.analytics.eventTrack.next({ action: 'Enabled Two-step Authenticator' });
-            this.onUpdated.emit(true);
-        } catch { }
-    }
-
-    private async disable() {
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
-            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
-            request.type = TwoFactorProviderType.Authenticator;
-            this.formPromise = this.apiService.putTwoFactorDisable(request);
-            await this.formPromise;
-            this.enabled = false;
-            this.analytics.eventTrack.next({ action: 'Disabled Two-step Authenticator' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
-            this.onUpdated.emit(false);
-        } catch { }
+        });
     }
 
     private async processResponse(response: TwoFactorAuthenticatorResponse) {

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

@@ -0,0 +1,65 @@
+import {
+    EventEmitter,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
+
+export abstract class TwoFactorBaseComponent {
+    @Output() onUpdated = new EventEmitter<boolean>();
+
+    twoFactorProviderType = TwoFactorProviderType;
+    enabled = false;
+    authed = false;
+
+    protected masterPasswordHash: string;
+
+    constructor(protected apiService: ApiService, protected i18nService: I18nService,
+        protected analytics: Angulartics2, protected toasterService: ToasterService,
+        protected platformUtilsService: PlatformUtilsService, private type: TwoFactorProviderType) { }
+
+    protected auth(authResponse: any) {
+        this.masterPasswordHash = authResponse.masterPasswordHash;
+        this.authed = true;
+    }
+
+    protected async enable(enableFunction: () => Promise<void>) {
+        try {
+            await enableFunction();
+            this.analytics.eventTrack.next({
+                action: 'Enabled Two-step ' + TwoFactorProviderType[this.type].toString(),
+            });
+            this.onUpdated.emit(true);
+        } catch { }
+    }
+
+    protected async disable(promise: Promise<any>) {
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
+            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return;
+        }
+
+        try {
+            const request = new TwoFactorProviderRequest();
+            request.masterPasswordHash = this.masterPasswordHash;
+            request.type = this.type;
+            promise = this.apiService.putTwoFactorDisable(request);
+            await promise;
+            this.enabled = false;
+            this.analytics.eventTrack.next({
+                action: 'Disabled Two-step ' + TwoFactorProviderType[this.type].toString(),
+            });
+            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
+            this.onUpdated.emit(false);
+        } catch { }
+    }
+}

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

@@ -10,21 +10,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
-                <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>
-                </div>
-                <div class="modal-footer">
-                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
-                        <span>{{'continue' | i18n}}</span>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-                </div>
-            </form>
+            <app-two-factor-verify [type]="twoFactorProviderType.Duo" (onAuthed)="auth($event)" *ngIf="!authed">
+            </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <ng-container *ngIf="enabled">

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

@@ -1,109 +1,63 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
-import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
-
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 import { UpdateTwoFactorDuoRequest } from 'jslib/models/request/updateTwoFactorDuoRequest';
 import { TwoFactorDuoResponse } from 'jslib/models/response/twoFactorDuoResponse';
 
+import { TwoFactorBaseComponent } from './two-factor-base.component';
+
 @Component({
     selector: 'app-two-factor-duo',
     templateUrl: 'two-factor-duo.component.html',
 })
-export class TwoFactorDuoComponent {
-    @Output() onUpdated = new EventEmitter<boolean>();
-
-    enabled = false;
-    authed = false;
+export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
     ikey: string;
     skey: string;
     host: string;
-    masterPassword: string;
-
-    authPromise: Promise<any>;
     formPromise: Promise<any>;
 
-    private masterPasswordHash: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService) { }
-
-    async auth() {
-        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);
-        try {
-            this.authPromise = this.apiService.getTwoFactorDuo(request);
-            const response = await this.authPromise;
-            this.authed = true;
-            await this.processResponse(response);
-        } catch { }
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
+            TwoFactorProviderType.Duo);
     }
 
-    async submit() {
+    auth(authResponse: any) {
+        super.auth(authResponse);
+        this.processResponse(authResponse.response);
+    }
+
+    submit() {
         if (this.enabled) {
-            this.disable();
+            return super.disable(this.formPromise);
         } else {
-            this.enable();
+            return this.enable();
         }
     }
 
-    private async enable() {
+    protected enable() {
         const request = new UpdateTwoFactorDuoRequest();
         request.masterPasswordHash = this.masterPasswordHash;
         request.integrationKey = this.ikey;
         request.secretKey = this.skey;
         request.host = this.host;
-        try {
+
+        return super.enable(async () => {
             this.formPromise = this.apiService.putTwoFactorDuo(request);
             const response = await this.formPromise;
             await this.processResponse(response);
-            this.analytics.eventTrack.next({ action: 'Enabled Two-step Duo' });
-            this.onUpdated.emit(true);
-        } catch { }
+        });
     }
 
-    private async disable() {
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
-            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
-            request.type = TwoFactorProviderType.Duo;
-            this.formPromise = this.apiService.putTwoFactorDisable(request);
-            await this.formPromise;
-            this.enabled = false;
-            this.analytics.eventTrack.next({ action: 'Disabled Two-step Duo' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
-            this.onUpdated.emit(false);
-        } catch { }
-    }
-
-    private async processResponse(response: TwoFactorDuoResponse) {
+    private processResponse(response: TwoFactorDuoResponse) {
         this.ikey = response.integrationKey;
         this.skey = response.secretKey;
         this.host = response.host;

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

@@ -10,21 +10,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
-                <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>
-                </div>
-                <div class="modal-footer">
-                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
-                        <span>{{'continue' | i18n}}</span>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-                </div>
-            </form>
+            <app-two-factor-verify [type]="twoFactorProviderType.Email" (onAuthed)="auth($event)" *ngIf="!authed">
+            </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <ng-container *ngIf="enabled">

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

@@ -1,74 +1,49 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
 import { TwoFactorEmailRequest } from 'jslib/models/request/twoFactorEmailRequest';
-import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 import { UpdateTwoFactorEmailRequest } from 'jslib/models/request/updateTwoFactorEmailRequest';
 import { TwoFactorEmailResponse } from 'jslib/models/response/twoFactorEmailResponse';
 
+import { TwoFactorBaseComponent } from './two-factor-base.component';
+
 @Component({
     selector: 'app-two-factor-email',
     templateUrl: 'two-factor-email.component.html',
 })
-export class TwoFactorEmailComponent {
-    @Output() onUpdated = new EventEmitter<boolean>();
-
-    enabled = false;
-    authed = false;
+export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
     email: string;
     token: string;
-    masterPassword: string;
     sentEmail: string;
-
-    authPromise: Promise<any>;
     formPromise: Promise<any>;
     emailPromise: Promise<any>;
 
-    private masterPasswordHash: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService,
-        private userService: UserService) { }
-
-    async auth() {
-        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);
-        try {
-            this.authPromise = this.apiService.getTwoFactorEmail(request);
-            const response = await this.authPromise;
-            this.authed = true;
-            await this.processResponse(response);
-        } catch { }
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        platformUtilsService: PlatformUtilsService, private userService: UserService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
+            TwoFactorProviderType.Email);
     }
 
-    async submit() {
+    auth(authResponse: any) {
+        super.auth(authResponse);
+        return this.processResponse(authResponse.response);
+    }
+
+    submit() {
         if (this.enabled) {
-            this.disable();
+            return super.disable(this.formPromise);
         } else {
-            this.enable();
+            return this.enable();
         }
     }
 
@@ -81,38 +56,17 @@ export class TwoFactorEmailComponent {
         } catch { }
     }
 
-    private async enable() {
+    protected enable() {
         const request = new UpdateTwoFactorEmailRequest();
         request.masterPasswordHash = this.masterPasswordHash;
         request.email = this.email;
         request.token = this.token;
-        try {
+
+        return super.enable(async () => {
             this.formPromise = this.apiService.putTwoFactorEmail(request);
             const response = await this.formPromise;
             await this.processResponse(response);
-            this.analytics.eventTrack.next({ action: 'Enabled Two-step Email' });
-            this.onUpdated.emit(true);
-        } catch { }
-    }
-
-    private async disable() {
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
-            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
-            request.type = TwoFactorProviderType.Email;
-            this.formPromise = this.apiService.putTwoFactorDisable(request);
-            await this.formPromise;
-            this.enabled = false;
-            this.analytics.eventTrack.next({ action: 'Disabled Two-step Email' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
-            this.onUpdated.emit(false);
-        } catch { }
+        });
     }
 
     private async processResponse(response: TwoFactorEmailResponse) {

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

@@ -10,21 +10,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
-                <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>
-                </div>
-                <div class="modal-footer">
-                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
-                        <span>{{'continue' | i18n}}</span>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-                </div>
-            </form>
+            <app-two-factor-verify [type]="twoFactorProviderType.U2f" (onAuthed)="auth($event)" *ngIf="!authed">
+            </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle" *ngIf="enabled">

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

@@ -1,51 +1,41 @@
 import {
     Component,
-    EventEmitter,
     OnDestroy,
     OnInit,
-    Output,
 } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
-import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
-
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 import { UpdateTwoFactorU2fRequest } from 'jslib/models/request/updateTwoFactorU2fRequest';
 import { TwoFactorU2fResponse } from 'jslib/models/response/twoFactorU2fResponse';
 
+import { TwoFactorBaseComponent } from './two-factor-base.component';
+
 @Component({
     selector: 'app-two-factor-u2f',
     templateUrl: 'two-factor-u2f.component.html',
 })
-export class TwoFactorU2fComponent implements OnInit, OnDestroy {
-    @Output() onUpdated = new EventEmitter<boolean>();
-
-    enabled = false;
-    authed = false;
+export class TwoFactorU2fComponent extends TwoFactorBaseComponent implements OnInit, OnDestroy {
     u2fChallenge: any;
     u2fError: boolean;
     u2fListening: boolean;
     u2fResponse: string;
-    masterPassword: string;
-
-    authPromise: Promise<any>;
     formPromise: Promise<any>;
 
-    private masterPasswordHash: string;
     private closed = false;
     private u2fScript: HTMLScriptElement;
 
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService) {
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
+            TwoFactorProviderType.U2f);
         this.u2fScript = window.document.createElement('script');
         this.u2fScript.src = 'scripts/u2f.js';
         this.u2fScript.async = true;
@@ -60,33 +50,32 @@ export class TwoFactorU2fComponent implements OnInit, OnDestroy {
         window.document.body.removeChild(this.u2fScript);
     }
 
-    async auth() {
-        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);
-        try {
-            this.authPromise = this.apiService.getTwoFactorU2f(request);
-            const response = await this.authPromise;
-            this.authed = true;
-            await this.processResponse(response);
-            this.readDevice();
-        } catch { }
+    auth(authResponse: any) {
+        super.auth(authResponse);
+        this.processResponse(authResponse.response);
+        this.readDevice();
     }
 
-    async submit() {
+    submit() {
         if (this.enabled) {
-            this.disable();
+            return super.disable(this.formPromise);
         } else {
-            this.enable();
+            return this.enable();
         }
     }
 
+    protected enable() {
+        const request = new UpdateTwoFactorU2fRequest();
+        request.masterPasswordHash = this.masterPasswordHash;
+        request.deviceResponse = this.u2fResponse;
+
+        return super.enable(async () => {
+            this.formPromise = this.apiService.putTwoFactorU2f(request);
+            const response = await this.formPromise;
+            await this.processResponse(response);
+        });
+    }
+
     private readDevice() {
         if (this.closed || this.enabled) {
             return;
@@ -117,40 +106,7 @@ export class TwoFactorU2fComponent implements OnInit, OnDestroy {
         }, 10);
     }
 
-    private async enable() {
-        const request = new UpdateTwoFactorU2fRequest();
-        request.masterPasswordHash = this.masterPasswordHash;
-        request.deviceResponse = this.u2fResponse;
-        try {
-            this.formPromise = this.apiService.putTwoFactorU2f(request);
-            const response = await this.formPromise;
-            await this.processResponse(response);
-            this.analytics.eventTrack.next({ action: 'Enabled Two-step U2F' });
-            this.onUpdated.emit(true);
-        } catch { }
-    }
-
-    private async disable() {
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
-            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
-            request.type = TwoFactorProviderType.U2f;
-            this.formPromise = this.apiService.putTwoFactorDisable(request);
-            await this.formPromise;
-            this.enabled = false;
-            this.analytics.eventTrack.next({ action: 'Disabled Two-step U2F' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
-            this.onUpdated.emit(false);
-        } catch { }
-    }
-
-    private async processResponse(response: TwoFactorU2fResponse) {
+    private processResponse(response: TwoFactorU2fResponse) {
         this.u2fChallenge = response.challenge;
         this.enabled = response.enabled;
     }

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

@@ -0,0 +1,15 @@
+<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>
+    </div>
+    <div class="modal-footer">
+        <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin"></i>
+            <span>{{'continue' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+    </div>
+</form>

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

@@ -0,0 +1,73 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
+
+@Component({
+    selector: 'app-two-factor-verify',
+    templateUrl: 'two-factor-verify.component.html',
+})
+export class TwoFactorVerifyComponent {
+    @Input()
+    type: TwoFactorProviderType;
+    @Output()
+    onAuthed = new EventEmitter<any>();
+
+    masterPassword: string;
+    formPromise: Promise<any>;
+
+    private masterPasswordHash: string;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private toasterService: ToasterService, private cryptoService: CryptoService) { }
+
+    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);
+
+        try {
+            switch (this.type) {
+                case TwoFactorProviderType.Duo:
+                    this.formPromise = this.apiService.getTwoFactorDuo(request);
+                    break;
+                case TwoFactorProviderType.Email:
+                    this.formPromise = this.apiService.getTwoFactorEmail(request);
+                    break;
+                case TwoFactorProviderType.U2f:
+                    this.formPromise = this.apiService.getTwoFactorU2f(request);
+                    break;
+                case TwoFactorProviderType.Authenticator:
+                    this.formPromise = this.apiService.getTwoFactorAuthenticator(request);
+                    break;
+                case TwoFactorProviderType.Yubikey:
+                    this.formPromise = this.apiService.getTwoFactorYubiKey(request);
+                    break;
+            }
+
+            const response = await this.formPromise;
+            this.onAuthed.emit({
+                response: response,
+                masterPasswordHash: this.masterPasswordHash,
+            });
+        } catch { }
+    }
+}

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

@@ -10,21 +10,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
-                <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>
-                </div>
-                <div class="modal-footer">
-                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
-                        <span>{{'continue' | i18n}}</span>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-                </div>
-            </form>
+            <app-two-factor-verify [type]="twoFactorProviderType.Yubikey" (onAuthed)="auth($event)" *ngIf="!authed">
+            </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle" *ngIf="enabled">
@@ -49,7 +36,8 @@
                     <div class="row">
                         <div class="form-group col-6" *ngFor="let k of keys; let i = index">
                             <label for="key{{i + 1}}">{{'yubikeyX' | i18n : i + 1}}</label>
-                            <input id="key{{i + 1}}" type="text" name="Key{{i + 1}}" class="form-control" [(ngModel)]="k.key" *ngIf="!k.existingKey" appInputVerbatim>
+                            <input id="key{{i + 1}}" type="text" name="Key{{i + 1}}" class="form-control" [(ngModel)]="k.key" *ngIf="!k.existingKey"
+                                appInputVerbatim>
                             <div class="d-flex" *ngIf="k.existingKey">
                                 <span class="mr-2">{{k.existingKey}}</span>
                                 <button type="button" class="btn btn-link text-danger ml-auto" appBlurClick (click)="remove(k)" title="{{'remove' | i18n}}">

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

@@ -1,66 +1,43 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
-import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
 import { UpdateTwoFactorYubioOtpRequest } from 'jslib/models/request/updateTwoFactorYubioOtpRequest';
 import { TwoFactorYubiKeyResponse } from 'jslib/models/response/twoFactorYubiKeyResponse';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
+import { TwoFactorBaseComponent } from './two-factor-base.component';
+
 @Component({
     selector: 'app-two-factor-yubikey',
     templateUrl: 'two-factor-yubikey.component.html',
 })
-export class TwoFactorYubiKeyComponent {
-    @Output() onUpdated = new EventEmitter<boolean>();
-
-    enabled = false;
-    authed = false;
+export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
     keys: any[];
     nfc = false;
-    masterPassword: string;
 
-    authPromise: Promise<TwoFactorYubiKeyResponse>;
     formPromise: Promise<any>;
     disablePromise: Promise<any>;
 
-    private masterPasswordHash: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService) { }
-
-    async auth() {
-        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);
-        try {
-            this.authPromise = this.apiService.getTwoFactorYubiKey(request);
-            const response = await this.authPromise;
-            this.authed = true;
-            this.processResponse(response);
-        } catch { }
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
+            TwoFactorProviderType.Yubikey);
     }
 
-    async submit() {
+    auth(authResponse: any) {
+        super.auth(authResponse);
+        this.processResponse(authResponse.response);
+    }
+
+    submit() {
         const request = new UpdateTwoFactorYubioOtpRequest();
         request.masterPasswordHash = this.masterPasswordHash;
         request.key1 = this.keys != null && this.keys.length > 0 ? this.keys[0].key : null;
@@ -69,35 +46,17 @@ export class TwoFactorYubiKeyComponent {
         request.key4 = this.keys != null && this.keys.length > 3 ? this.keys[3].key : null;
         request.key5 = this.keys != null && this.keys.length > 4 ? this.keys[4].key : null;
         request.nfc = this.nfc;
-        try {
+
+        return super.enable(async () => {
             this.formPromise = this.apiService.putTwoFactorYubiKey(request);
             const response = await this.formPromise;
             await this.processResponse(response);
-            this.analytics.eventTrack.next({ action: 'Enabled Two-step YubiKey' });
-            this.processResponse(response);
             this.toasterService.popAsync('success', null, this.i18nService.t('yubikeysUpdated'));
-            this.onUpdated.emit(true);
-        } catch { }
+        });
     }
 
-    async disable() {
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
-            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            const request = new TwoFactorProviderRequest();
-            request.masterPasswordHash = this.masterPasswordHash;
-            request.type = TwoFactorProviderType.Yubikey;
-            this.disablePromise = this.apiService.putTwoFactorDisable(request);
-            await this.disablePromise;
-            this.enabled = false;
-            this.analytics.eventTrack.next({ action: 'Disabled Two-step YubiKey' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
-            this.onUpdated.emit(false);
-        } catch { }
+    disable() {
+        return super.disable(this.disablePromise);
     }
 
     remove(key: any) {