import { LiveAnnouncer } from "@angular/cdk/a11y"; import { coerceBooleanProperty } from "@angular/cdk/coercion"; import { Component, EventEmitter, Input, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, } from "@angular/core"; import { BehaviorSubject, catchError, distinctUntilChanged, filter, firstValueFrom, map, ReplaySubject, Subject, takeUntil, withLatestFrom, } from "rxjs"; import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { SemanticLogger, disabledSemanticLoggerProvider, ifEnabledSemanticLoggerProvider, } from "@bitwarden/common/tools/log"; import { UserId } from "@bitwarden/common/types/guid"; import { ToastService, Option } from "@bitwarden/components"; import { CredentialGeneratorService, GeneratedCredential, AlgorithmInfo, GenerateRequest, isSameAlgorithm, CredentialAlgorithm, isPasswordAlgorithm, Algorithm, AlgorithmMetadata, Type, GeneratorProfile, Profile, } from "@bitwarden/generator-core"; import { GeneratorHistoryService } from "@bitwarden/generator-history"; import { toAlgorithmInfo, translate } from "./util"; /** Options group for passwords */ // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ selector: "tools-password-generator", templateUrl: "password-generator.component.html", standalone: false, }) export class PasswordGeneratorComponent implements OnInit, OnChanges, OnDestroy { constructor( private generatorService: CredentialGeneratorService, private generatorHistoryService: GeneratorHistoryService, private toastService: ToastService, private i18nService: I18nService, private logService: LogService, private accountService: AccountService, private zone: NgZone, private ariaLive: LiveAnnouncer, ) {} /** exports algorithm symbols to the template */ protected readonly Algorithm = Algorithm; /** Binds the component to a specific user's settings. When this input is not provided, * the form binds to the active user */ // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-signals @Input() account: Account | null = null; protected account$ = new ReplaySubject(1); /** Send structured debug logs from the credential generator component * to the debugger console. * * @warning this may reveal sensitive information in plaintext. */ // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-signals @Input() debug: boolean = false; // this `log` initializer is overridden in `ngOnInit` private log: SemanticLogger = disabledSemanticLoggerProvider({}); async ngOnChanges(changes: SimpleChanges) { const account = changes?.account; if ( account && account.currentValue.id && account.previousValue.id !== account.currentValue.id ) { this.log.debug( { previousUserId: account?.previousValue?.id as UserId, currentUserId: account?.currentValue?.id as UserId, }, "account input change detected", ); this.account$.next(account.currentValue.id); } } // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-signals @Input() profile: GeneratorProfile = Profile.account; /** Removes bottom margin, passed to downstream components */ // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-signals @Input({ transform: coerceBooleanProperty }) disableMargin = false; /** tracks the currently selected credential type */ protected credentialType$ = new BehaviorSubject(null); /** Emits the last generated value. */ protected readonly value$ = new BehaviorSubject(""); /** Emits when a new credential is requested */ private readonly generate$ = new Subject(); /** Identifies generator requests that were requested by the user */ protected readonly USER_REQUEST = "user request"; /** Request a new value from the generator * @param requestor a label used to trace generation request * origin in the debugger. */ protected async generate(source: string) { const algorithm = await firstValueFrom(this.algorithm$); const request: GenerateRequest = { source, algorithm: algorithm.id, profile: this.profile }; this.log.debug(request, "generation requested"); this.generate$.next(request); } /** Tracks changes to the selected credential type * @param type the new credential type */ protected onCredentialTypeChanged(type: CredentialAlgorithm) { // break subscription cycle if (this.credentialType$.value !== type) { this.zone.run(() => { this.credentialType$.next(type); }); } } /** Emits credentials created from a generation request. */ // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref @Output() readonly onGenerated = new EventEmitter(); /** emits algorithm info when the selected algorithm changes */ // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref @Output() readonly onAlgorithm = new EventEmitter(); async ngOnInit() { this.log = ifEnabledSemanticLoggerProvider(this.debug, this.logService, { type: "PasswordGeneratorComponent", }); if (!this.account) { const account = await firstValueFrom(this.accountService.activeAccount$); if (!account) { this.log.panic("active account cannot be `null`."); } this.log.info({ userId: account.id }, "account not specified; using active account settings"); this.account$.next(account); } this.generatorService .algorithms$("password", { account$: this.account$ }) .pipe( map((algorithms) => this.toOptions(algorithms)), takeUntil(this.destroyed), ) .subscribe(this.passwordOptions$); // wire up the generator this.generatorService .generate$({ on$: this.generate$, account$: this.account$ }) .pipe( catchError((error: unknown, generator) => { if (typeof error === "string") { this.toastService.showToast({ message: error, variant: "error", title: "", }); } else { this.logService.error(error); } // continue with origin stream return generator; }), withLatestFrom(this.account$, this.algorithm$), takeUntil(this.destroyed), ) .subscribe(([generated, account, algorithm]) => { this.log.debug({ source: generated.source ?? null }, "credential generated"); this.generatorHistoryService .track(account.id, generated.credential, generated.category, generated.generationDate) .catch((e: unknown) => { this.logService.error(e); }); // update subjects within the angular zone so that the // template bindings refresh immediately this.zone.run(() => { if (generated.source === this.USER_REQUEST) { this.announce(translate(algorithm.i18nKeys.credentialGenerated, this.i18nService)); } this.onGenerated.next(generated); this.value$.next(generated.credential); }); }); // assume the last-visible generator algorithm is the user's preferred one const preferences = await this.generatorService.preferences({ account$: this.account$ }); this.credentialType$ .pipe( filter((type) => !!type), withLatestFrom(preferences), takeUntil(this.destroyed), ) .subscribe(([algorithm, preference]) => { if (isPasswordAlgorithm(algorithm)) { this.log.info({ algorithm, type: Type.password }, "algorithm preferences updated"); preference.password.algorithm = algorithm; preference.password.updated = new Date(); } else { return; } preferences.next(preference); }); // update active algorithm preferences .pipe( map(({ password }) => this.generatorService.algorithm(password.algorithm)), distinctUntilChanged((prev, next) => { if (prev === null || next === null) { return false; } else { return isSameAlgorithm(prev.id, next.id); } }), takeUntil(this.destroyed), ) .subscribe((algorithm) => { this.log.debug({ algorithm: algorithm.id }, "algorithm selected"); // update navigation this.onCredentialTypeChanged(algorithm.id); // update subjects within the angular zone so that the // template bindings refresh immediately this.zone.run(() => { this.maybeAlgorithm$.next(algorithm); this.onAlgorithm.next(toAlgorithmInfo(algorithm, this.i18nService)); }); }); // generate on load unless the generator prohibits it this.maybeAlgorithm$.pipe(takeUntil(this.destroyed)).subscribe((a) => { this.zone.run(() => { if (a?.capabilities?.autogenerate) { this.log.debug("autogeneration enabled"); this.generate("autogenerate").catch((e: unknown) => { this.log.error(e as object, "a failure occurred during autogeneration"); }); } else { this.log.debug("autogeneration disabled; clearing generated credential"); this.value$.next("-"); } }); }); this.log.debug("component initialized"); } private announce(message: string) { this.ariaLive.announce(message).catch((e) => this.logService.error(e)); } /** Lists the credential types supported by the component. */ protected passwordOptions$ = new BehaviorSubject[]>([]); /** Determines when the password/passphrase selector is visible. */ protected showCredentialTypes$ = this.passwordOptions$.pipe(map((options) => options.length > 1)); /** tracks the currently selected credential type */ protected maybeAlgorithm$ = new ReplaySubject(1); /** tracks the last valid algorithm selection */ protected algorithm$ = this.maybeAlgorithm$.pipe( filter((algorithm): algorithm is AlgorithmMetadata => !!algorithm), ); /** * Emits the copy button aria-label respective of the selected credential type */ protected credentialTypeCopyLabel$ = this.algorithm$.pipe( map(({ i18nKeys: { copyCredential } }) => translate(copyCredential, this.i18nService)), ); /** * Emits the generate button aria-label respective of the selected credential type */ protected credentialTypeGenerateLabel$ = this.algorithm$.pipe( map(({ i18nKeys: { generateCredential } }) => translate(generateCredential, this.i18nService)), ); /** * Emits the copy credential toast respective of the selected credential type */ protected credentialTypeLabel$ = this.algorithm$.pipe( map(({ i18nKeys: { credentialType } }) => translate(credentialType, this.i18nService)), ); private toOptions(algorithms: AlgorithmMetadata[]) { const options: Option[] = algorithms.map((algorithm) => ({ value: algorithm.id, label: translate(algorithm.i18nKeys.name, this.i18nService), })); return options; } private readonly destroyed = new Subject(); ngOnDestroy(): void { // tear down subscriptions this.destroyed.complete(); // finalize subjects this.generate$.complete(); this.value$.complete(); // finalize component bindings this.onGenerated.complete(); } }