import { Component, NgZone, } from '@angular/core'; import { ToasterService } from 'angular2-toaster'; 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 { SecretVerificationRequest } from 'jslib-common/models/request/secretVerificationRequest'; import { UpdateTwoFactorWebAuthnDeleteRequest } from 'jslib-common/models/request/updateTwoFactorWebAuthnDeleteRequest'; import { UpdateTwoFactorWebAuthnRequest } from 'jslib-common/models/request/updateTwoFactorWebAuthnRequest'; import { ChallengeResponse, TwoFactorWebAuthnResponse, } from 'jslib-common/models/response/twoFactorWebAuthnResponse'; import { TwoFactorBaseComponent } from './two-factor-base.component'; @Component({ selector: 'app-two-factor-webauthn', templateUrl: 'two-factor-webauthn.component.html', }) export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent { type = TwoFactorProviderType.WebAuthn; name: string; keys: any[]; keyIdAvailable: number = null; keysConfiguredCount = 0; webAuthnError: boolean; webAuthnListening: boolean; webAuthnResponse: PublicKeyCredential; challengePromise: Promise; formPromise: Promise; constructor(apiService: ApiService, i18nService: I18nService, toasterService: ToasterService, platformUtilsService: PlatformUtilsService, private ngZone: NgZone, logService: LogService, userVerificationService: UserVerificationService) { super(apiService, i18nService, toasterService, platformUtilsService, logService, userVerificationService); } auth(authResponse: any) { super.auth(authResponse); this.processResponse(authResponse.response); } async submit() { if (this.webAuthnResponse == null || this.keyIdAvailable == null) { // Should never happen. return Promise.reject(); } const request = await this.buildRequestModel(UpdateTwoFactorWebAuthnRequest); request.deviceResponse = this.webAuthnResponse; request.id = this.keyIdAvailable; request.name = this.name; return super.enable(async () => { this.formPromise = this.apiService.putTwoFactorWebAuthn(request); const response = await this.formPromise; await this.processResponse(response); }); } disable() { return super.disable(this.formPromise); } async remove(key: any) { if (this.keysConfiguredCount <= 1 || key.removePromise != null) { return; } const name = key.name != null ? key.name : this.i18nService.t('webAuthnkeyX', key.id); const confirmed = await this.platformUtilsService.showDialog( this.i18nService.t('removeU2fConfirmation'), name, this.i18nService.t('yes'), this.i18nService.t('no'), 'warning'); if (!confirmed) { return; } const request = await this.buildRequestModel(UpdateTwoFactorWebAuthnDeleteRequest); request.id = key.id; try { key.removePromise = this.apiService.deleteTwoFactorWebAuthn(request); const response = await key.removePromise; key.removePromise = null; await this.processResponse(response); } catch (e) { this.logService.error(e); } } async readKey() { if (this.keyIdAvailable == null) { return; } const request = await this.buildRequestModel(SecretVerificationRequest); try { this.challengePromise = this.apiService.getTwoFactorWebAuthnChallenge(request); const challenge = await this.challengePromise; this.readDevice(challenge); } catch (e) { this.logService.error(e); } } private readDevice(webAuthnChallenge: ChallengeResponse) { // tslint:disable-next-line console.log('listening for key...'); this.resetWebAuthn(true); navigator.credentials.create({ publicKey: webAuthnChallenge, }).then((data: PublicKeyCredential) => { this.ngZone.run(() => { this.webAuthnListening = false; this.webAuthnResponse = data; }); }).catch(err => { // tslint:disable-next-line console.error(err); this.resetWebAuthn(false); // TODO: Should we display the actual error? this.webAuthnError = true; }); } private resetWebAuthn(listening = false) { this.webAuthnResponse = null; this.webAuthnError = false; this.webAuthnListening = listening; } private processResponse(response: TwoFactorWebAuthnResponse) { this.resetWebAuthn(); this.keys = []; this.keyIdAvailable = null; this.name = null; this.keysConfiguredCount = 0; for (let i = 1; i <= 5; i++) { if (response.keys != null) { const key = response.keys.filter(k => k.id === i); if (key.length > 0) { this.keysConfiguredCount++; this.keys.push({ id: i, name: key[0].name, configured: true, migrated: key[0].migrated, removePromise: null, }); continue; } } this.keys.push({ id: i, name: null, configured: false, removePromise: null }); if (this.keyIdAvailable == null) { this.keyIdAvailable = i; } } this.enabled = response.enabled; } }