mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-22 07:50:04 +02:00
fix username options and service box display crosstalk
This commit is contained in:
parent
0cb3e809dd
commit
e496798867
@ -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()"
|
||||
/>
|
||||
|
@ -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 preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
|
||||
const username$ = new Subject<{ nav: UsernameNavValue }>();
|
||||
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.pipe(startWith(FORWARDER_INITIALIZED));
|
||||
return generator;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user