From ff65297275d43ca0bf2a03a7c1cf2d98fb1cb247 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 27 Jun 2018 23:55:50 -0400 Subject: [PATCH] consolidate 2fa component functionality --- src/app/app.module.ts | 2 + .../two-factor-authenticator.component.html | 17 +-- .../two-factor-authenticator.component.ts | 88 ++++----------- src/app/settings/two-factor-base.component.ts | 65 ++++++++++++ .../settings/two-factor-duo.component.html | 17 +-- src/app/settings/two-factor-duo.component.ts | 90 ++++------------ .../settings/two-factor-email.component.html | 17 +-- .../settings/two-factor-email.component.ts | 88 ++++----------- .../settings/two-factor-u2f.component.html | 17 +-- src/app/settings/two-factor-u2f.component.ts | 100 +++++------------- .../settings/two-factor-verify.component.html | 15 +++ .../settings/two-factor-verify.component.ts | 73 +++++++++++++ .../two-factor-yubikey.component.html | 20 +--- .../settings/two-factor-yubikey.component.ts | 81 ++++---------- 14 files changed, 279 insertions(+), 411 deletions(-) create mode 100644 src/app/settings/two-factor-base.component.ts create mode 100644 src/app/settings/two-factor-verify.component.html create mode 100644 src/app/settings/two-factor-verify.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5463d81d3be..0711989218d 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html index 69207de3623..1eaa9b986ac 100644 --- a/src/app/settings/two-factor-authenticator.component.html +++ b/src/app/settings/two-factor-authenticator.component.html @@ -10,21 +10,8 @@ -
-
-

{{'twoStepLoginAuthDesc' | i18n}}

- - -
-
- - -
-
+ +
diff --git a/src/app/settings/two-factor-authenticator.component.ts b/src/app/settings/two-factor-authenticator.component.ts index ed67c90883b..ab523267338 100644 --- a/src/app/settings/two-factor-authenticator.component.ts +++ b/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(); - - enabled = false; - authed = false; +export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent { key: string; qr: string; token: string; - masterPassword: string; - - authPromise: Promise; formPromise: Promise; - 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) { diff --git a/src/app/settings/two-factor-base.component.ts b/src/app/settings/two-factor-base.component.ts new file mode 100644 index 00000000000..be4c785da94 --- /dev/null +++ b/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(); + + 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) { + 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) { + 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 { } + } +} diff --git a/src/app/settings/two-factor-duo.component.html b/src/app/settings/two-factor-duo.component.html index d4268af7c6a..9338ded4257 100644 --- a/src/app/settings/two-factor-duo.component.html +++ b/src/app/settings/two-factor-duo.component.html @@ -10,21 +10,8 @@
- -
-

{{'twoStepLoginAuthDesc' | i18n}}

- - -
-
- - -
-
+ +
diff --git a/src/app/settings/two-factor-duo.component.ts b/src/app/settings/two-factor-duo.component.ts index 68ec8d2736d..5f5c3af3f2d 100644 --- a/src/app/settings/two-factor-duo.component.ts +++ b/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(); - - enabled = false; - authed = false; +export class TwoFactorDuoComponent extends TwoFactorBaseComponent { ikey: string; skey: string; host: string; - masterPassword: string; - - authPromise: Promise; formPromise: Promise; - 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; diff --git a/src/app/settings/two-factor-email.component.html b/src/app/settings/two-factor-email.component.html index 7ea7bf34591..c202d576786 100644 --- a/src/app/settings/two-factor-email.component.html +++ b/src/app/settings/two-factor-email.component.html @@ -10,21 +10,8 @@
- -
-

{{'twoStepLoginAuthDesc' | i18n}}

- - -
-
- - -
-
+ +
diff --git a/src/app/settings/two-factor-email.component.ts b/src/app/settings/two-factor-email.component.ts index cfbc1cd93a3..f72422a9688 100644 --- a/src/app/settings/two-factor-email.component.ts +++ b/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(); - - enabled = false; - authed = false; +export class TwoFactorEmailComponent extends TwoFactorBaseComponent { email: string; token: string; - masterPassword: string; sentEmail: string; - - authPromise: Promise; formPromise: Promise; emailPromise: Promise; - 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) { diff --git a/src/app/settings/two-factor-u2f.component.html b/src/app/settings/two-factor-u2f.component.html index 1581824d091..70d7f5de0e1 100644 --- a/src/app/settings/two-factor-u2f.component.html +++ b/src/app/settings/two-factor-u2f.component.html @@ -10,21 +10,8 @@
- -
-

{{'twoStepLoginAuthDesc' | i18n}}

- - -
-
- - -
-
+ +
diff --git a/src/app/settings/two-factor-u2f.component.ts b/src/app/settings/two-factor-u2f.component.ts index 32342211c56..e32cf9d6154 100644 --- a/src/app/settings/two-factor-u2f.component.ts +++ b/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(); - - enabled = false; - authed = false; +export class TwoFactorU2fComponent extends TwoFactorBaseComponent implements OnInit, OnDestroy { u2fChallenge: any; u2fError: boolean; u2fListening: boolean; u2fResponse: string; - masterPassword: string; - - authPromise: Promise; formPromise: Promise; - 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; } diff --git a/src/app/settings/two-factor-verify.component.html b/src/app/settings/two-factor-verify.component.html new file mode 100644 index 00000000000..8681c91e965 --- /dev/null +++ b/src/app/settings/two-factor-verify.component.html @@ -0,0 +1,15 @@ + +
+

{{'twoStepLoginAuthDesc' | i18n}}

+ + +
+
+ + +
+ diff --git a/src/app/settings/two-factor-verify.component.ts b/src/app/settings/two-factor-verify.component.ts new file mode 100644 index 00000000000..9e002342cb4 --- /dev/null +++ b/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(); + + masterPassword: string; + formPromise: Promise; + + 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 { } + } +} diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html index db73c215767..e9560fc5132 100644 --- a/src/app/settings/two-factor-yubikey.component.html +++ b/src/app/settings/two-factor-yubikey.component.html @@ -10,21 +10,8 @@
-
-
-

{{'twoStepLoginAuthDesc' | i18n}}

- - -
-
- - -
-
+ +
@@ -49,7 +36,8 @@
- +
{{k.existingKey}}