diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5b557fcc72d..aa552494382 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,6 +44,7 @@ import { PurgeVaultComponent } from './settings/purge-vault.component'; import { SettingsComponent } from './settings/settings.component'; import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component'; import { TwoFactorSetupComponent } from './settings/two-factor-setup.component'; +import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component'; import { ExportComponent } from './tools/export.component'; import { ImportComponent } from './tools/import.component'; @@ -147,6 +148,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; TwoFactorAuthenticatorComponent, TwoFactorComponent, TwoFactorOptionsComponent, + TwoFactorYubiKeyComponent, TwoFactorSetupComponent, UserLayoutComponent, VaultComponent, @@ -167,6 +169,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; ShareComponent, TwoFactorAuthenticatorComponent, TwoFactorOptionsComponent, + TwoFactorYubiKeyComponent, ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html index cf6ef3b21a6..520d85e38f1 100644 --- a/src/app/settings/two-factor-authenticator.component.html +++ b/src/app/settings/two-factor-authenticator.component.html @@ -28,6 +28,7 @@
+

{{'twoStepAuthenticatorDesc' | i18n}}

1. {{'twoStepAuthenticatorDownloadApp' | i18n}} @@ -38,6 +39,7 @@

{{'twoStepLoginProviderEnabled' | i18n}}

{{'twoStepAuthenticatorReaddDesc' | i18n}} +

{{'twoStepAuthenticatorNeedApp' | i18n}}
diff --git a/src/app/settings/two-factor-setup.component.ts b/src/app/settings/two-factor-setup.component.ts index cba828e1c54..22dbe6c853a 100644 --- a/src/app/settings/two-factor-setup.component.ts +++ b/src/app/settings/two-factor-setup.component.ts @@ -17,6 +17,7 @@ import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType'; import { ModalComponent } from '../modal.component'; import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component'; +import { TwoFactorYubiKeyComponent } from './two-factor-yubikey.component'; @Component({ selector: 'app-two-factor-setup', @@ -81,11 +82,17 @@ export class TwoFactorSetupComponent implements OnInit { manage(type: TwoFactorProviderType) { switch (type) { case TwoFactorProviderType.Authenticator: - const component = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent); - component.onUpdated.subscribe((enabled: boolean) => { + const authComp = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent); + authComp.onUpdated.subscribe((enabled: boolean) => { this.updateStatus(enabled, TwoFactorProviderType.Authenticator) }); break; + case TwoFactorProviderType.Yubikey: + const yubiComp = this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent); + yubiComp.onUpdated.subscribe((enabled: boolean) => { + this.updateStatus(enabled, TwoFactorProviderType.Yubikey) + }); + break; default: break; } diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html new file mode 100644 index 00000000000..9977f76a780 --- /dev/null +++ b/src/app/settings/two-factor-yubikey.component.html @@ -0,0 +1,83 @@ +
+
+
+
+

+ {{'twoStepLogin' | i18n}} + {{'yubiKeyTitle' | i18n}} +

+ +
+ +
+

{{'twoStepLoginAuthDesc' | i18n}}

+ + +
+
+ + +
+ +
+
+ + {{'twoStepLoginProviderEnabled' | i18n}} + + +

{{'twoFactorYubikeyWarning' | i18n}}

+
    +
  • {{'twoFactorYubikeySupportUsb' | i18n}}
    • +
  • {{'twoFactorYubikeySupportMobile' | i18n}}
    • +
+ + +

{{'twoFactorYubikeyAdd' | i18n}}:

+
    +
  1. {{'twoFactorYubikeyPlugIn' | i18n}}
    2. +
  2. {{'twoFactorYubikeySelectKey' | i18n}}
    3. +
  3. {{'twoFactorYubikeyTouchButton' | i18n}}
    4. +
  4. {{'twoFactorYubikeySaveForm' | i18n}}
    5. +
+
+
+
+ + +
+ {{k.existingKey}} + +
+
+
+ {{'nfcSupport' | i18n}} +
+ + +
+ {{'twoFactorYubikeySupportsNfcDesc' | i18n}} +
+
+ + + +
+
+
+
+
diff --git a/src/app/settings/two-factor-yubikey.component.ts b/src/app/settings/two-factor-yubikey.component.ts new file mode 100644 index 00000000000..f06af196c90 --- /dev/null +++ b/src/app/settings/two-factor-yubikey.component.ts @@ -0,0 +1,130 @@ +import { + Component, + EventEmitter, + 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 { UpdateTwoFactorYubioOtpRequest } from 'jslib/models/request/updateTwoFactorYubioOtpRequest'; +import { TwoFactorYubiKeyResponse } from 'jslib/models/response/twoFactorYubiKeyResponse'; + +import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType'; + +@Component({ + selector: 'app-two-factor-yubikey', + templateUrl: 'two-factor-yubikey.component.html', +}) +export class TwoFactorYubiKeyComponent { + @Output() onUpdated = new EventEmitter(); + + enabled = false; + authed = false; + keys: any[]; + nfc = false; + masterPassword: string; + + authPromise: Promise; + formPromise: Promise; + disablePromise: 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.getTwoFactorYubiKey(request); + const response = await this.authPromise; + this.authed = true; + this.processResponse(response); + } catch { } + } + + async submit() { + const request = new UpdateTwoFactorYubioOtpRequest(); + request.masterPasswordHash = this.masterPasswordHash; + 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; + 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 { + 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 { } + } + + remove(key: any) { + key.existingKey = null; + key.key = null; + } + + private processResponse(response: TwoFactorYubiKeyResponse) { + this.enabled = response.enabled; + this.keys = [ + { key: response.key1, existingKey: this.padRight(response.key1) }, + { key: response.key2, existingKey: this.padRight(response.key2) }, + { key: response.key3, existingKey: this.padRight(response.key3) }, + { key: response.key4, existingKey: this.padRight(response.key4) }, + { key: response.key5, existingKey: this.padRight(response.key5) }, + ]; + this.nfc = response.nfc || !response.enabled; + } + + private padRight(str: string, character = '•', size = 44) { + if (str == null || character == null || str.length >= size) { + return str; + } + const max = (size - str.length) / character.length; + for (let i = 0; i < max; i++) { + str += character; + } + return str; + } +} diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 9747d6d5dee..56eb78a96ff 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1026,5 +1026,53 @@ }, "twoStepDisabled": { "message": "Two-step login provider disabled." + }, + "twoFactorYubikeyAdd": { + "message": "Add a new YubiKey to your account" + }, + "twoFactorYubikeyPlugIn": { + "message": "Plug the YubiKey (NEO or 4 series) into your computer's USB port." + }, + "twoFactorYubikeySelectKey": { + "message": "Select in the first empty YubiKey input field below." + }, + "twoFactorYubikeyTouchButton": { + "message": "Touch the YubiKey's button." + }, + "twoFactorYubikeySaveForm": { + "message": "Save the form." + }, + "twoFactorYubikeyWarning": { + "message": "Due to platform limitations, YubiKeys cannot be used on all Bitwarden applications. You should enable another two-step login provider so that you can access your account when YubiKeys cannot be used. Supported platforms:" + }, + "twoFactorYubikeySupportUsb": { + "message": "Web vault, desktop application, CLI, and all browser extensions on a device with a USB port that can accept your YubiKey." + }, + "twoFactorYubikeySupportMobile": { + "message": "Mobile apps on a device with NFC capabilities or a USB port that can accept your YubiKey." + }, + "yubikeyX": { + "message": "YubiKey $INDEX$", + "placeholders": { + "index": { + "content": "$1", + "example": "2" + } + } + }, + "nfcSupport": { + "message": "NFC Support" + }, + "twoFactorYubikeySupportsNfc": { + "message": "One of my keys supports NFC." + }, + "twoFactorYubikeySupportsNfcDesc": { + "message": "If one of your YubiKeys supports NFC (such as a YubiKey NEO), you will be prompted on mobile devices whenever NFC availability is detected." + }, + "yubikeysUpdated": { + "message": "YubiKeys updated" + }, + "disableAllKeys": { + "message": "Disable All Keys" } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 2724e9cd9c6..6fde6f49b52 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -25,6 +25,8 @@ $h4-font-size: 1rem; $h5-font-size: 1rem; $h6-font-size: 1rem; +$code-font-size: 100%; + $navbar-padding-y: .75rem; $grid-gutter-width: 20px; $card-spacer-y: .6rem;