From b9895ba79ae8ea67a11f1849f805cb500525416f Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Thu, 28 Jun 2018 09:40:11 -0400 Subject: [PATCH] 2fa recovery code view --- src/app/app.module.ts | 5 +- .../two-factor-recovery.component.html | 27 +++++++++++ .../settings/two-factor-recovery.component.ts | 46 +++++++++++++++++++ .../settings/two-factor-setup.component.html | 2 +- .../settings/two-factor-setup.component.ts | 5 ++ .../settings/two-factor-verify.component.ts | 3 ++ src/locales/en/messages.json | 7 +++ src/scss/styles.scss | 6 +++ 8 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 src/app/settings/two-factor-recovery.component.html create mode 100644 src/app/settings/two-factor-recovery.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 07119892..c5c68916 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,7 @@ import { SettingsComponent } from './settings/settings.component'; import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component'; import { TwoFactorDuoComponent } from './settings/two-factor-duo.component'; import { TwoFactorEmailComponent } from './settings/two-factor-email.component'; +import { TwoFactorRecoveryComponent } from './settings/two-factor-recovery.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'; @@ -154,10 +155,11 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; TwoFactorDuoComponent, TwoFactorEmailComponent, TwoFactorOptionsComponent, + TwoFactorRecoveryComponent, + TwoFactorSetupComponent, TwoFactorU2fComponent, TwoFactorVerifyComponent, TwoFactorYubiKeyComponent, - TwoFactorSetupComponent, UserLayoutComponent, VaultComponent, ], @@ -179,6 +181,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; TwoFactorDuoComponent, TwoFactorEmailComponent, TwoFactorOptionsComponent, + TwoFactorRecoveryComponent, TwoFactorU2fComponent, TwoFactorYubiKeyComponent, ], diff --git a/src/app/settings/two-factor-recovery.component.html b/src/app/settings/two-factor-recovery.component.html new file mode 100644 index 00000000..44dee6e7 --- /dev/null +++ b/src/app/settings/two-factor-recovery.component.html @@ -0,0 +1,27 @@ +
+
+
+
+

+ {{'twoStepLogin' | i18n}} + {{'recoveryCodeTitle' | i18n}} +

+ +
+ + + +
+

{{'twoFactorRecoveryYourCode' | i18n}}:

+ {{code}} +
+
+ + +
+ +
+
+
diff --git a/src/app/settings/two-factor-recovery.component.ts b/src/app/settings/two-factor-recovery.component.ts new file mode 100644 index 00000000..913e2635 --- /dev/null +++ b/src/app/settings/two-factor-recovery.component.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; + +import { TwoFactorRecoverResponse } from 'jslib/models/response/twoFactorRescoverResponse'; + +import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType'; + +@Component({ + selector: 'app-two-factor-recovery', + templateUrl: 'two-factor-recovery.component.html', +}) +export class TwoFactorRecoveryComponent { + code: string; + authed: boolean; + twoFactorProviderType = TwoFactorProviderType; + + constructor(private i18nService: I18nService) { } + + auth(authResponse: any) { + this.authed = true; + this.processResponse(authResponse.response); + } + + print() { + const w = window.open(); + w.document.write('
' + + '

' + this.i18nService.t('twoFactorRecoveryYourCode') + ':

' + + '' + + this.code + '
' + + '

' + new Date() + '

'); + w.print(); + w.close(); + } + + private formatString(s: string) { + if (s == null) { + return null; + } + return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase(); + } + + private processResponse(response: TwoFactorRecoverResponse) { + this.code = this.formatString(response.code); + } +} diff --git a/src/app/settings/two-factor-setup.component.html b/src/app/settings/two-factor-setup.component.html index a09d738b..19ba71d9 100644 --- a/src/app/settings/two-factor-setup.component.html +++ b/src/app/settings/two-factor-setup.component.html @@ -3,7 +3,7 @@

{{'twoStepLoginRecoveryWarning' | i18n}}

- +

{{'providers' | i18n}} diff --git a/src/app/settings/two-factor-setup.component.ts b/src/app/settings/two-factor-setup.component.ts index f87afb67..32403329 100644 --- a/src/app/settings/two-factor-setup.component.ts +++ b/src/app/settings/two-factor-setup.component.ts @@ -19,6 +19,7 @@ import { ModalComponent } from '../modal.component'; import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component'; import { TwoFactorDuoComponent } from './two-factor-duo.component'; import { TwoFactorEmailComponent } from './two-factor-email.component'; +import { TwoFactorRecoveryComponent } from './two-factor-recovery.component'; import { TwoFactorU2fComponent } from './two-factor-u2f.component'; import { TwoFactorYubiKeyComponent } from './two-factor-yubikey.component'; @@ -120,6 +121,10 @@ export class TwoFactorSetupComponent implements OnInit { } } + recoveryCode() { + this.openModal(this.recoveryModalRef, TwoFactorRecoveryComponent); + } + private openModal(ref: ViewContainerRef, type: Type): T { if (this.modal != null) { this.modal.close(); diff --git a/src/app/settings/two-factor-verify.component.ts b/src/app/settings/two-factor-verify.component.ts index 9e002342..5d8ce40b 100644 --- a/src/app/settings/two-factor-verify.component.ts +++ b/src/app/settings/two-factor-verify.component.ts @@ -46,6 +46,9 @@ export class TwoFactorVerifyComponent { try { switch (this.type) { + case -1: + this.formPromise = this.apiService.getTwoFactorRecover(request); + break; case TwoFactorProviderType.Duo: this.formPromise = this.apiService.getTwoFactorDuo(request); break; diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index d14cb729..52e42331 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1125,5 +1125,12 @@ }, "twoFactorU2fProblemReading": { "message": "There was a problem reading the security key." + }, + "twoFactorRecoveryYourCode": { + "message": "Your Bitwarden two-step login recovery code" + }, + "printCode": { + "message": "Print Code", + "description": "Print 2FA recovery code" } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 6fde6f49..fecda1a4 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -378,6 +378,12 @@ app-avatar { } } +app-two-factor-recovery { + code { + font-size: $font-size-lg; + } +} + #duo-frame { background: url('../images/loading.svg') 0 0 no-repeat; height: 330px;