mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-22 07:50:04 +02:00
port fixes from credential to username generator component
This commit is contained in:
parent
cb964d8a98
commit
ffe13bb239
@ -44,7 +44,7 @@
|
|||||||
/>
|
/>
|
||||||
<bit-section *ngIf="(category$ | async) !== 'password'">
|
<bit-section *ngIf="(category$ | async) !== 'password'">
|
||||||
<bit-section-header>
|
<bit-section-header>
|
||||||
<h6 bitTypography="h6">{{ "options" | i18n }}</h6>
|
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
|
||||||
</bit-section-header>
|
</bit-section-header>
|
||||||
<div class="tw-mb-4">
|
<div class="tw-mb-4">
|
||||||
<bit-card>
|
<bit-card>
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
</bit-card>
|
</bit-card>
|
||||||
<bit-section [disableMargin]="disableMargin">
|
<bit-section [disableMargin]="disableMargin">
|
||||||
<bit-section-header>
|
<bit-section-header>
|
||||||
<h6 bitTypography="h6">{{ "options" | i18n }}</h6>
|
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
|
||||||
</bit-section-header>
|
</bit-section-header>
|
||||||
<div [ngClass]="{ 'tw-mb-4': !disableMargin }">
|
<div [ngClass]="{ 'tw-mb-4': !disableMargin }">
|
||||||
<bit-card>
|
<bit-card>
|
||||||
@ -32,9 +32,9 @@
|
|||||||
}}</bit-hint>
|
}}</bit-hint>
|
||||||
</bit-form-field>
|
</bit-form-field>
|
||||||
</form>
|
</form>
|
||||||
<form class="box" [formGroup]="forwarder" class="tw-container">
|
<form *ngIf="showForwarder$ | async" [formGroup]="forwarder" class="box tw-container">
|
||||||
<bit-form-field>
|
<bit-form-field>
|
||||||
<bit-label>{{ "forwarder" | i18n }}</bit-label>
|
<bit-label>{{ "service" | i18n }}</bit-label>
|
||||||
<bit-select [items]="forwarderOptions$ | async" formControlName="nav"> </bit-select>
|
<bit-select [items]="forwarderOptions$ | async" formControlName="nav"> </bit-select>
|
||||||
</bit-form-field>
|
</bit-form-field>
|
||||||
</form>
|
</form>
|
||||||
|
@ -3,11 +3,12 @@ import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } fro
|
|||||||
import { FormBuilder } from "@angular/forms";
|
import { FormBuilder } from "@angular/forms";
|
||||||
import {
|
import {
|
||||||
BehaviorSubject,
|
BehaviorSubject,
|
||||||
concat,
|
catchError,
|
||||||
|
combineLatest,
|
||||||
|
combineLatestWith,
|
||||||
distinctUntilChanged,
|
distinctUntilChanged,
|
||||||
filter,
|
filter,
|
||||||
map,
|
map,
|
||||||
of,
|
|
||||||
ReplaySubject,
|
ReplaySubject,
|
||||||
Subject,
|
Subject,
|
||||||
switchMap,
|
switchMap,
|
||||||
@ -17,30 +18,29 @@ import {
|
|||||||
|
|
||||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||||
|
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||||
import { IntegrationId } from "@bitwarden/common/tools/integration";
|
import { IntegrationId } from "@bitwarden/common/tools/integration";
|
||||||
import { UserId } from "@bitwarden/common/types/guid";
|
import { UserId } from "@bitwarden/common/types/guid";
|
||||||
|
import { ToastService } from "@bitwarden/components";
|
||||||
import { Option } from "@bitwarden/components/src/select/option";
|
import { Option } from "@bitwarden/components/src/select/option";
|
||||||
import {
|
import {
|
||||||
AlgorithmInfo,
|
AlgorithmInfo,
|
||||||
CredentialAlgorithm,
|
CredentialAlgorithm,
|
||||||
CredentialGeneratorService,
|
CredentialGeneratorService,
|
||||||
EmailAlgorithm,
|
|
||||||
ForwarderIntegration,
|
|
||||||
GeneratedCredential,
|
GeneratedCredential,
|
||||||
Generators,
|
Generators,
|
||||||
getForwarderConfiguration,
|
getForwarderConfiguration,
|
||||||
isEmailAlgorithm,
|
isEmailAlgorithm,
|
||||||
isForwarderIntegration,
|
isForwarderIntegration,
|
||||||
|
isSameAlgorithm,
|
||||||
isUsernameAlgorithm,
|
isUsernameAlgorithm,
|
||||||
toCredentialGeneratorConfiguration,
|
toCredentialGeneratorConfiguration,
|
||||||
UsernameAlgorithm,
|
|
||||||
} from "@bitwarden/generator-core";
|
} from "@bitwarden/generator-core";
|
||||||
|
|
||||||
|
// constants used to identify navigation selections that are not
|
||||||
|
// generator algorithms
|
||||||
const FORWARDER = "forwarder";
|
const FORWARDER = "forwarder";
|
||||||
type UsernameNavValue = UsernameAlgorithm | EmailAlgorithm | typeof FORWARDER;
|
|
||||||
|
|
||||||
const NONE_SELECTED = "none";
|
const NONE_SELECTED = "none";
|
||||||
type ForwarderNavValue = ForwarderIntegration | typeof NONE_SELECTED;
|
|
||||||
|
|
||||||
/** Component that generates usernames and emails */
|
/** Component that generates usernames and emails */
|
||||||
@Component({
|
@Component({
|
||||||
@ -57,6 +57,8 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private generatorService: CredentialGeneratorService,
|
private generatorService: CredentialGeneratorService,
|
||||||
|
private toastService: ToastService,
|
||||||
|
private logService: LogService,
|
||||||
private i18nService: I18nService,
|
private i18nService: I18nService,
|
||||||
private accountService: AccountService,
|
private accountService: AccountService,
|
||||||
private zone: NgZone,
|
private zone: NgZone,
|
||||||
@ -78,11 +80,11 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
/** Tracks the selected generation algorithm */
|
/** Tracks the selected generation algorithm */
|
||||||
protected username = this.formBuilder.group({
|
protected username = this.formBuilder.group({
|
||||||
nav: [null as UsernameNavValue],
|
nav: [null as string],
|
||||||
});
|
});
|
||||||
|
|
||||||
protected forwarder = this.formBuilder.group({
|
protected forwarder = this.formBuilder.group({
|
||||||
nav: [null as ForwarderNavValue],
|
nav: [null as string],
|
||||||
});
|
});
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
@ -103,11 +105,11 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
.pipe(
|
.pipe(
|
||||||
map((algorithms) => {
|
map((algorithms) => {
|
||||||
const usernames = algorithms.filter((a) => !isForwarderIntegration(a.id));
|
const usernames = algorithms.filter((a) => !isForwarderIntegration(a.id));
|
||||||
const usernameOptions = this.toOptions(usernames) as Option<UsernameNavValue>[];
|
const usernameOptions = this.toOptions(usernames);
|
||||||
usernameOptions.push({ value: FORWARDER, label: this.i18nService.t("forwarder") });
|
usernameOptions.push({ value: FORWARDER, label: this.i18nService.t("forwarder") });
|
||||||
|
|
||||||
const forwarders = algorithms.filter((a) => isForwarderIntegration(a.id));
|
const forwarders = algorithms.filter((a) => isForwarderIntegration(a.id));
|
||||||
const forwarderOptions = this.toOptions(forwarders) as Option<ForwarderNavValue>[];
|
const forwarderOptions = this.toOptions(forwarders);
|
||||||
forwarderOptions.unshift({ value: NONE_SELECTED, label: this.i18nService.t("select") });
|
forwarderOptions.unshift({ value: NONE_SELECTED, label: this.i18nService.t("select") });
|
||||||
|
|
||||||
return [usernameOptions, forwarderOptions] as const;
|
return [usernameOptions, forwarderOptions] as const;
|
||||||
@ -135,7 +137,22 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
// wire up the generator
|
// wire up the generator
|
||||||
this.algorithm$
|
this.algorithm$
|
||||||
.pipe(
|
.pipe(
|
||||||
|
filter((algorithm) => !!algorithm),
|
||||||
switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
|
switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
|
||||||
|
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;
|
||||||
|
}),
|
||||||
takeUntil(this.destroyed),
|
takeUntil(this.destroyed),
|
||||||
)
|
)
|
||||||
.subscribe((generated) => {
|
.subscribe((generated) => {
|
||||||
@ -147,34 +164,96 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// assume the last-visible generator algorithm is the user's preferred one
|
// normalize cascade selections; introduce subjects to allow changes
|
||||||
const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
|
// from user selections and changes from preference updates to
|
||||||
|
// update the template
|
||||||
|
type CascadeValue = { nav: string; algorithm?: CredentialAlgorithm };
|
||||||
|
const activeIdentifier$ = new Subject<CascadeValue>();
|
||||||
|
const activeForwarder$ = new Subject<CascadeValue>();
|
||||||
|
|
||||||
this.username.valueChanges
|
this.username.valueChanges
|
||||||
.pipe(
|
.pipe(
|
||||||
switchMap((username) => {
|
map(
|
||||||
if (username.nav === FORWARDER) {
|
(username): CascadeValue =>
|
||||||
return concat(of(this.forwarder.value), this.forwarder.valueChanges);
|
username.nav === FORWARDER
|
||||||
|
? { nav: username.nav }
|
||||||
|
: { nav: username.nav, algorithm: JSON.parse(username.nav) },
|
||||||
|
),
|
||||||
|
takeUntil(this.destroyed),
|
||||||
|
)
|
||||||
|
.subscribe(activeIdentifier$);
|
||||||
|
|
||||||
|
this.forwarder.valueChanges
|
||||||
|
.pipe(
|
||||||
|
map(
|
||||||
|
(forwarder): CascadeValue =>
|
||||||
|
forwarder.nav === NONE_SELECTED
|
||||||
|
? { nav: forwarder.nav }
|
||||||
|
: { nav: forwarder.nav, algorithm: JSON.parse(forwarder.nav) },
|
||||||
|
),
|
||||||
|
takeUntil(this.destroyed),
|
||||||
|
)
|
||||||
|
.subscribe(activeForwarder$);
|
||||||
|
|
||||||
|
// update forwarder cascade visibility
|
||||||
|
combineLatest([activeIdentifier$, activeForwarder$])
|
||||||
|
.pipe(
|
||||||
|
map(([username, forwarder]) => {
|
||||||
|
const showForwarder = !username.algorithm;
|
||||||
|
const forwarderId =
|
||||||
|
showForwarder && isForwarderIntegration(forwarder.algorithm)
|
||||||
|
? forwarder.algorithm.forwarder
|
||||||
|
: null;
|
||||||
|
return [showForwarder, forwarderId] as const;
|
||||||
|
}),
|
||||||
|
distinctUntilChanged((prev, next) => prev[0] === next[0] && prev[1] === next[1]),
|
||||||
|
takeUntil(this.destroyed),
|
||||||
|
)
|
||||||
|
.subscribe(([showForwarder, forwarderId]) => {
|
||||||
|
// update subjects within the angular zone so that the
|
||||||
|
// template bindings refresh immediately
|
||||||
|
this.zone.run(() => {
|
||||||
|
this.showForwarder$.next(showForwarder);
|
||||||
|
this.forwarderId$.next(forwarderId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// update active algorithm
|
||||||
|
combineLatest([activeIdentifier$, activeForwarder$])
|
||||||
|
.pipe(
|
||||||
|
map(([username, forwarder]) => {
|
||||||
|
const selection = username.algorithm ?? forwarder.algorithm;
|
||||||
|
if (selection) {
|
||||||
|
return this.generatorService.algorithm(selection);
|
||||||
} else {
|
} else {
|
||||||
return of(username as { nav: CredentialAlgorithm });
|
return null;
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
map((forwarder) => {
|
distinctUntilChanged((prev, next) => isSameAlgorithm(prev?.id, next?.id)),
|
||||||
if (forwarder.nav === NONE_SELECTED) {
|
takeUntil(this.destroyed),
|
||||||
return { nav: null };
|
)
|
||||||
} else {
|
.subscribe((algorithm) => {
|
||||||
return forwarder as { nav: CredentialAlgorithm };
|
// update subjects within the angular zone so that the
|
||||||
}
|
// template bindings refresh immediately
|
||||||
}),
|
this.zone.run(() => {
|
||||||
filter(({ nav }) => !!nav),
|
this.algorithm$.next(algorithm);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// assume the last-visible generator algorithm is the user's preferred one
|
||||||
|
const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
|
||||||
|
this.algorithm$
|
||||||
|
.pipe(
|
||||||
|
filter((algorithm) => !!algorithm),
|
||||||
withLatestFrom(preferences),
|
withLatestFrom(preferences),
|
||||||
takeUntil(this.destroyed),
|
takeUntil(this.destroyed),
|
||||||
)
|
)
|
||||||
.subscribe(([{ nav: algorithm }, preference]) => {
|
.subscribe(([algorithm, preference]) => {
|
||||||
if (isEmailAlgorithm(algorithm)) {
|
if (isEmailAlgorithm(algorithm.id)) {
|
||||||
preference.email.algorithm = algorithm;
|
preference.email.algorithm = algorithm.id;
|
||||||
preference.email.updated = new Date();
|
preference.email.updated = new Date();
|
||||||
} else if (isUsernameAlgorithm(algorithm)) {
|
} else if (isUsernameAlgorithm(algorithm.id)) {
|
||||||
preference.username.algorithm = algorithm;
|
preference.username.algorithm = algorithm.id;
|
||||||
preference.username.updated = new Date();
|
preference.username.updated = new Date();
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
@ -183,45 +262,61 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
preferences.next(preference);
|
preferences.next(preference);
|
||||||
});
|
});
|
||||||
|
|
||||||
// populate the form with the user's preferences to kick off interactivity
|
preferences
|
||||||
preferences.pipe(takeUntil(this.destroyed)).subscribe(({ email, username }) => {
|
.pipe(
|
||||||
// the last preference set by the user "wins"
|
map(({ email, username }) => {
|
||||||
const forwarderPref = isForwarderIntegration(email.algorithm) ? email : null;
|
const forwarderPref = isForwarderIntegration(email.algorithm) ? email : null;
|
||||||
const usernamePref = email.updated > username.updated ? email : username;
|
const usernamePref = email.updated > username.updated ? email : username;
|
||||||
|
|
||||||
// inject drilldown flags
|
// inject drilldown flags
|
||||||
const forwarderNav = forwarderPref
|
const forwarderNav = !forwarderPref
|
||||||
? (forwarderPref.algorithm as ForwarderIntegration)
|
? NONE_SELECTED
|
||||||
: NONE_SELECTED;
|
: JSON.stringify(forwarderPref.algorithm);
|
||||||
const userNav = forwarderPref ? FORWARDER : (usernamePref.algorithm as UsernameAlgorithm);
|
const userNav = forwarderPref ? FORWARDER : JSON.stringify(usernamePref.algorithm);
|
||||||
|
|
||||||
// update navigation; break subscription loop
|
// construct cascade metadata
|
||||||
this.username.setValue({ nav: userNav }, { emitEvent: false });
|
const cascade = {
|
||||||
this.forwarder.setValue({ nav: forwarderNav }, { emitEvent: false });
|
username: {
|
||||||
|
selection: { nav: userNav },
|
||||||
|
active: {
|
||||||
|
nav: userNav,
|
||||||
|
algorithm: forwarderPref ? null : usernamePref.algorithm,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
forwarder: {
|
||||||
|
selection: { nav: forwarderNav },
|
||||||
|
active: {
|
||||||
|
nav: forwarderNav,
|
||||||
|
algorithm: forwarderPref?.algorithm,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// load selected algorithm metadata
|
return cascade;
|
||||||
const algorithm = this.generatorService.algorithm(usernamePref.algorithm);
|
}),
|
||||||
|
takeUntil(this.destroyed),
|
||||||
|
)
|
||||||
|
.subscribe(({ username, forwarder }) => {
|
||||||
|
// update navigation; break subscription loop
|
||||||
|
this.username.setValue(username.selection, { emitEvent: false });
|
||||||
|
this.forwarder.setValue(forwarder.selection, { emitEvent: false });
|
||||||
|
|
||||||
// update subjects within the angular zone so that the
|
// update cascade visibility
|
||||||
// template bindings refresh immediately
|
activeIdentifier$.next(username.active);
|
||||||
|
activeForwarder$.next(forwarder.active);
|
||||||
|
});
|
||||||
|
|
||||||
|
// automatically regenerate when the algorithm switches if the algorithm
|
||||||
|
// allows it; otherwise set a placeholder
|
||||||
|
this.algorithm$.pipe(takeUntil(this.destroyed)).subscribe((a) => {
|
||||||
this.zone.run(() => {
|
this.zone.run(() => {
|
||||||
this.algorithm$.next(algorithm);
|
if (!a || a.onlyOnRequest) {
|
||||||
if (userNav === FORWARDER && forwarderNav !== NONE_SELECTED) {
|
this.value$.next("-");
|
||||||
this.forwarderId$.next(forwarderNav.forwarder);
|
|
||||||
} else {
|
} else {
|
||||||
this.forwarderId$.next(null);
|
this.generate$.next();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// generate on load unless the generator prohibits it
|
|
||||||
this.algorithm$
|
|
||||||
.pipe(
|
|
||||||
distinctUntilChanged((prev, next) => prev.id === next.id),
|
|
||||||
filter((a) => !a.onlyOnRequest),
|
|
||||||
takeUntil(this.destroyed),
|
|
||||||
)
|
|
||||||
.subscribe(() => this.generate$.next());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private typeToGenerator$(type: CredentialAlgorithm) {
|
private typeToGenerator$(type: CredentialAlgorithm) {
|
||||||
@ -251,16 +346,24 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** Lists the credential types supported by the component. */
|
/** Lists the credential types supported by the component. */
|
||||||
protected typeOptions$ = new BehaviorSubject<Option<UsernameNavValue>[]>([]);
|
protected typeOptions$ = new BehaviorSubject<Option<string>[]>([]);
|
||||||
|
|
||||||
|
/** Tracks the currently selected forwarder. */
|
||||||
|
protected forwarderId$ = new BehaviorSubject<IntegrationId>(null);
|
||||||
|
|
||||||
/** Lists the credential types supported by the component. */
|
/** Lists the credential types supported by the component. */
|
||||||
protected forwarderOptions$ = new BehaviorSubject<Option<ForwarderNavValue>[]>([]);
|
protected forwarderOptions$ = new BehaviorSubject<Option<string>[]>([]);
|
||||||
|
|
||||||
|
/** Tracks forwarder control visibility */
|
||||||
|
protected showForwarder$ = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
/** tracks the currently selected credential type */
|
/** tracks the currently selected credential type */
|
||||||
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
|
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
|
||||||
|
|
||||||
/** Tracks the currently selected forwarder. */
|
protected showAlgorithm$ = this.algorithm$.pipe(
|
||||||
protected forwarderId$ = new BehaviorSubject<IntegrationId>(null);
|
combineLatestWith(this.showForwarder$),
|
||||||
|
map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
|
||||||
|
);
|
||||||
|
|
||||||
/** Emits hint key for the currently selected credential type */
|
/** Emits hint key for the currently selected credential type */
|
||||||
protected credentialTypeHint$ = new ReplaySubject<string>(1);
|
protected credentialTypeHint$ = new ReplaySubject<string>(1);
|
||||||
@ -275,8 +378,8 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
|
|||||||
protected readonly generate$ = new Subject<void>();
|
protected readonly generate$ = new Subject<void>();
|
||||||
|
|
||||||
private toOptions(algorithms: AlgorithmInfo[]) {
|
private toOptions(algorithms: AlgorithmInfo[]) {
|
||||||
const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
|
const options: Option<string>[] = algorithms.map((algorithm) => ({
|
||||||
value: algorithm.id,
|
value: JSON.stringify(algorithm.id),
|
||||||
label: this.i18nService.t(algorithm.name),
|
label: this.i18nService.t(algorithm.name),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user