fix username options and service box display crosstalk

libs/tools/generator/components/src/credential-generator.component.html

@@ -32,13 +32,13 @@
 </bit-card>
 <tools-password-settings
   class="tw-mt-6"
-  *ngIf="(algorithm$ | async)?.id === 'password'"
+  *ngIf="(showAlgorithm$ | async)?.id === 'password'"
   [userId]="userId$ | async"
   (onUpdated)="generate$.next()"
 />
 <tools-passphrase-settings
   class="tw-mt-6"
-  *ngIf="(algorithm$ | async)?.id === 'passphrase'"
+  *ngIf="(showAlgorithm$ | async)?.id === 'passphrase'"
   [userId]="userId$ | async"
   (onUpdated)="generate$.next()"
 />
@@ -57,29 +57,29 @@
           }}</bit-hint>
         </bit-form-field>
       </form>
-      <form *ngIf="!!(showForwarder$ | async)" [formGroup]="forwarder" class="box tw-container">
+      <form *ngIf="showForwarder$ | async" [formGroup]="forwarder" class="box tw-container">
         <bit-form-field>
           <bit-label>{{ "service" | i18n }}</bit-label>
           <bit-select [items]="forwarderOptions$ | async" formControlName="nav"> </bit-select>
         </bit-form-field>
       </form>
       <tools-catchall-settings
-        *ngIf="(algorithm$ | async)?.id === 'catchall'"
+        *ngIf="(showAlgorithm$ | async)?.id === 'catchall'"
         [userId]="userId$ | async"
         (onUpdated)="generate$.next()"
       />
       <tools-forwarder-settings
-        *ngIf="!!(showForwarder$ | async)"
+        *ngIf="!!(forwarderId$ | async)"
         [forwarder]="forwarderId$ | async"
         [userId]="this.userId$ | async"
       />
       <tools-subaddress-settings
-        *ngIf="(algorithm$ | async)?.id === 'subaddress'"
+        *ngIf="(showAlgorithm$ | async)?.id === 'subaddress'"
         [userId]="userId$ | async"
         (onUpdated)="generate$.next()"
       />
       <tools-username-settings
-        *ngIf="(algorithm$ | async)?.id === 'username'"
+        *ngIf="(showAlgorithm$ | async)?.id === 'username'"
         [userId]="userId$ | async"
         (onUpdated)="generate$.next()"
       />

libs/tools/generator/components/src/credential-generator.component.ts

@@ -2,13 +2,13 @@ import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } fro
 import { FormBuilder } from "@angular/forms";
 import {
   BehaviorSubject,
+  combineLatestWith,
   concat,
   distinctUntilChanged,
   filter,
   map,
   of,
   ReplaySubject,
-  startWith,
   Subject,
   switchMap,
   takeUntil,
@@ -50,8 +50,6 @@ type UsernameNavValue = UsernameAlgorithm | EmailAlgorithm | typeof FORWARDER;
 const NONE_SELECTED = "none";
 type ForwarderNavValue = ForwarderIntegration | typeof NONE_SELECTED;
 
-const FORWARDER_INITIALIZED = new GeneratedCredential("-", null, Date.now());
-
 @Component({
   selector: "tools-credential-generator",
   templateUrl: "credential-generator.component.html",
@@ -184,8 +182,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
         });
       });
 
-    // assume the last-visible generator algorithm is the user's preferred one
+    const username$ = new Subject<{ nav: UsernameNavValue }>();
-    const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
     this.root$
       .pipe(
         filter(({ nav }) => !!nav),
@@ -196,6 +193,14 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
             return of(maybeAlgorithm as { nav: CredentialAlgorithm });
           }
         }),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(username$);
+
+    // assume the last-visible generator algorithm is the user's preferred one
+    const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
+    username$
+      .pipe(
         switchMap((maybeAlgorithm) => {
           if (maybeAlgorithm.nav === FORWARDER) {
             return concat(of(this.forwarder.value), this.forwarder.valueChanges);
@@ -229,19 +234,23 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
         } else if (isPasswordAlgorithm(algorithm)) {
           setPreference("password");
         } else {
-          this.showForwarder$.next(false);
           return;
         }
 
         preferences.next(preference);
       });
 
-    this.username.valueChanges
+    username$
       .pipe(
         map(({ nav }) => nav === FORWARDER),
         takeUntil(this.destroyed),
       )
-      .subscribe(this.showForwarder$);
+      .subscribe((showForwarder) => {
+        if (showForwarder) {
+          this.value$.next("-");
+        }
+        this.showForwarder$.next(showForwarder);
+      });
 
     // populate the form with the user's preferences to kick off interactivity
     preferences.pipe(takeUntil(this.destroyed)).subscribe(({ email, username, password }) => {
@@ -317,8 +326,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
       const forwarder = getForwarderConfiguration(type.forwarder);
       const configuration = toCredentialGeneratorConfiguration(forwarder);
       const generator = this.generatorService.generate$(configuration, dependencies);
-
+      return generator;
-      return generator.pipe(startWith(FORWARDER_INITIALIZED));
     }
 
     throw new Error(`Invalid generator type: "${type}"`);
@@ -342,6 +350,11 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
   /** tracks the currently selected credential type */
   protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
 
+  protected showAlgorithm$ = this.algorithm$.pipe(
+    combineLatestWith(this.showForwarder$),
+    map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 

libs/tools/generator/core/src/data/integrations.ts

@@ -30,7 +30,7 @@ const integrations = new Map(Object.values(Integrations).map((i) => [i.id, i]));
 export function getForwarderConfiguration(id: IntegrationId): ForwarderConfiguration<ApiSettings> {
   const maybeForwarder = integrations.get(id);
 
-  if ("forwarder" in maybeForwarder) {
+  if (maybeForwarder && "forwarder" in maybeForwarder) {
     return maybeForwarder as ForwarderConfiguration<ApiSettings>;
   } else {
     return null;