bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00
Code Issues Releases Wiki Activity

Proof of concept for change detection fix

Browse Source
This commit is contained in:
Thomas Rittson
2023-08-07 13:21:35 +10:00
committed by gbubemismith
parent d7b9f92f41
commit 808d3f4d4a
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/browser/src/vault/popup/components/fido2/fido2.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from "@angular/core"; import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { import {
BehaviorSubject, BehaviorSubject,
@@ -18,7 +18,6 @@ import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view"; import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view";
import { BrowserApi } from "../../../../platform/browser/browser-api";
import { import {
BrowserFido2Message, BrowserFido2Message,
BrowserFido2UserInterfaceSession, BrowserFido2UserInterfaceSession,
@@ -48,7 +47,8 @@ export class Fido2Component implements OnInit, OnDestroy {
constructor( constructor(
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private cipherService: CipherService, private cipherService: CipherService,
private passwordRepromptService: PasswordRepromptService private passwordRepromptService: PasswordRepromptService,
private ngZone: NgZone
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
@@ -57,7 +57,16 @@ export class Fido2Component implements OnInit, OnDestroy {
map((queryParamMap) => queryParamMap.get("sessionId")) map((queryParamMap) => queryParamMap.get("sessionId"))
); );
combineLatest([sessionId$, BrowserApi.messageListener$() as Observable<BrowserFido2Message>]) // Duplicated from BrowserApi.MessageListener$, but adds ngZone.run to make sure
// Angular change detection knows when a new value is emitted. Otherwise it is outside the zone.
// TODO: refactor so that this is reusable in other components to help others avoid this trap!
const messageListener$ = new Observable<unknown>((subscriber) => {
const handler = (message: unknown) => this.ngZone.run(() => subscriber.next(message)); // <-- the magic is here
chrome.runtime.onMessage.addListener(handler);
return () => chrome.runtime.onMessage.removeListener(handler);
}) as Observable<BrowserFido2Message>;
combineLatest([sessionId$, messageListener$])
.pipe(takeUntil(this.destroy$)) .pipe(takeUntil(this.destroy$))
.subscribe(([sessionId, message]) => { .subscribe(([sessionId, message]) => {
this.sessionId = sessionId; this.sessionId = sessionId;
@@ -76,6 +85,8 @@ export class Fido2Component implements OnInit, OnDestroy {
this.message$.next(message); this.message$.next(message);
}); });
// setInterval(() => this.message$.next(null), 500);
this.data$ = this.message$.pipe( this.data$ = this.message$.pipe(
filter((message) => message != undefined), filter((message) => message != undefined),
concatMap(async (message) => { concatMap(async (message) => {