bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[PM-8280] email forwarders (#11563)

Browse Source 
* forwarder lookup and generation support
* localize algorithm names and descriptions in the credential generator service
* add encryption support to UserStateSubject
* move generic rx utilities to common
* move icon button labels to generator configurations
This commit is contained in:
✨ Audrey ✨
2024-10-23 12:11:42 -04:00
committed by GitHub
parent e67577cc39
commit eff9a423da
45 changed files with 3403 additions and 1005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
libs/tools/generator/components/src/credential-generator.component.html
View File

@@ -3,7 +3,7 @@
fullWidth
class="tw-mb-4"
[selected]="(root$ | async).nav"
(selectedChange)="onRootChanged($event)"
(selectedChange)="onRootChanged({ nav: $event })"
attr.aria-label="{{ 'type' | i18n }}"
>
<bit-toggle *ngFor="let option of rootOptions$ | async" [value]="option.value">
@@ -35,23 +35,23 @@
</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()"
/>
<bit-section *ngIf="(category$ | async) !== 'password'">
<bit-section-header>
<h6 bitTypography="h6">{{ "options" | i18n }}</h6>
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
</bit-section-header>
<div class="tw-mb-4">
<bit-card>
<form class="box" [formGroup]="username" class="tw-container">
<form [formGroup]="username" class="box tw-container">
<bit-form-field>
<bit-label>{{ "type" | i18n }}</bit-label>
<bit-select [items]="usernameOptions$ | async" formControlName="nav"> </bit-select>
@@ -60,18 +60,29 @@
}}</bit-hint>
</bit-form-field>
</form>
<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="!!(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()"
/>

376
libs/tools/generator/components/src/credential-generator.component.ts
View File

@@ -2,11 +2,12 @@ import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } fro
import { FormBuilder } from "@angular/forms";
import {
BehaviorSubject,
concat,
catchError,
combineLatest,
combineLatestWith,
distinctUntilChanged,
filter,
map,
of,
ReplaySubject,
Subject,
switchMap,
@@ -16,25 +17,32 @@ import {
import { 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 { IntegrationId } from "@bitwarden/common/tools/integration";
import { UserId } from "@bitwarden/common/types/guid";
import { ToastService } from "@bitwarden/components";
import { Option } from "@bitwarden/components/src/select/option";
import {
AlgorithmInfo,
CredentialAlgorithm,
CredentialCategory,
CredentialGeneratorInfo,
CredentialGeneratorService,
GeneratedCredential,
Generators,
getForwarderConfiguration,
isEmailAlgorithm,
isForwarderIntegration,
isPasswordAlgorithm,
isSameAlgorithm,
isUsernameAlgorithm,
PasswordAlgorithm,
toCredentialGeneratorConfiguration,
} from "@bitwarden/generator-core";
/** root category that drills into username and email categories */
// constants used to identify navigation selections that are not
// generator algorithms
const IDENTIFIER = "identifier";
/** options available for the top-level navigation */
type RootNavValue = PasswordAlgorithm | typeof IDENTIFIER;
const FORWARDER = "forwarder";
const NONE_SELECTED = "none";
@Component({
selector: "tools-credential-generator",
@@ -43,6 +51,8 @@ type RootNavValue = PasswordAlgorithm | typeof IDENTIFIER;
export class CredentialGeneratorComponent implements OnInit, OnDestroy {
constructor(
private generatorService: CredentialGeneratorService,
private toastService: ToastService,
private logService: LogService,
private i18nService: I18nService,
private accountService: AccountService,
private zone: NgZone,
@@ -59,59 +69,25 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
@Output()
readonly onGenerated = new EventEmitter<GeneratedCredential>();
protected root$ = new BehaviorSubject<{ nav: RootNavValue }>({
protected root$ = new BehaviorSubject<{ nav: string }>({
nav: null,
});
/**
* Emits the copy button aria-label respective of the selected credential type
*
* FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
*/
protected credentialTypeCopyLabel$ = this.root$.pipe(
map(({ nav }) => {
if (nav === "password") {
return this.i18nService.t("copyPassword");
}
if (nav === "passphrase") {
return this.i18nService.t("copyPassphrase");
}
return this.i18nService.t("copyUsername");
}),
);
/**
* Emits the generate button aria-label respective of the selected credential type
*
* FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
*/
protected credentialTypeGenerateLabel$ = this.root$.pipe(
map(({ nav }) => {
if (nav === "password") {
return this.i18nService.t("generatePassword");
}
if (nav === "passphrase") {
return this.i18nService.t("generatePassphrase");
}
return this.i18nService.t("generateUsername");
}),
);
protected onRootChanged(nav: RootNavValue) {
protected onRootChanged(value: { nav: string }) {
// prevent subscription cycle
if (this.root$.value.nav !== nav) {
if (this.root$.value.nav !== value.nav) {
this.zone.run(() => {
this.root$.next({ nav });
this.root$.next(value);
});
}
}
protected username = this.formBuilder.group({
nav: [null as CredentialAlgorithm],
nav: [null as string],
});
protected forwarder = this.formBuilder.group({
nav: [null as string],
});
async ngOnInit() {
@@ -130,16 +106,29 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
this.generatorService
.algorithms$(["email", "username"], { userId$: this.userId$ })
.pipe(
map((algorithms) => this.toOptions(algorithms)),
map((algorithms) => {
const usernames = algorithms.filter((a) => !isForwarderIntegration(a.id));
const usernameOptions = this.toOptions(usernames);
usernameOptions.push({ value: FORWARDER, label: this.i18nService.t("forwardedEmail") });
const forwarders = algorithms.filter((a) => isForwarderIntegration(a.id));
const forwarderOptions = this.toOptions(forwarders);
forwarderOptions.unshift({ value: NONE_SELECTED, label: this.i18nService.t("select") });
return [usernameOptions, forwarderOptions] as const;
}),
takeUntil(this.destroyed),
)
.subscribe(this.usernameOptions$);
.subscribe(([usernames, forwarders]) => {
this.usernameOptions$.next(usernames);
this.forwarderOptions$.next(forwarders);
});
this.generatorService
.algorithms$("password", { userId$: this.userId$ })
.pipe(
map((algorithms) => {
const options = this.toOptions(algorithms) as Option<RootNavValue>[];
const options = this.toOptions(algorithms);
options.push({ value: IDENTIFIER, label: this.i18nService.t("username") });
return options;
}),
@@ -149,7 +138,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
this.algorithm$
.pipe(
map((a) => a?.descriptionKey && this.i18nService.t(a?.descriptionKey)),
map((a) => a?.description),
takeUntil(this.destroyed),
)
.subscribe((hint) => {
@@ -162,7 +151,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
this.algorithm$
.pipe(
map((a) => a.category),
map((a) => a?.category),
distinctUntilChanged(),
takeUntil(this.destroyed),
)
@@ -177,7 +166,22 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
// wire up the generator
this.algorithm$
.pipe(
filter((algorithm) => !!algorithm),
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),
)
.subscribe((generated) => {
@@ -189,35 +193,116 @@ 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$ });
// normalize cascade selections; introduce subjects to allow changes
// from user selections and changes from preference updates to
// update the template
type CascadeValue = { nav: string; algorithm?: CredentialAlgorithm };
const activeRoot$ = new Subject<CascadeValue>();
const activeIdentifier$ = new Subject<CascadeValue>();
const activeForwarder$ = new Subject<CascadeValue>();
this.root$
.pipe(
filter(({ nav }) => !!nav),
switchMap((root) => {
if (root.nav === IDENTIFIER) {
return concat(of(this.username.value), this.username.valueChanges);
map(
(root): CascadeValue =>
root.nav === IDENTIFIER
? { nav: root.nav }
: { nav: root.nav, algorithm: JSON.parse(root.nav) },
),
takeUntil(this.destroyed),
)
.subscribe(activeRoot$);
this.username.valueChanges
.pipe(
map(
(username): CascadeValue =>
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([activeRoot$, activeIdentifier$, activeForwarder$])
.pipe(
map(([root, username, forwarder]) => {
const showForwarder = !root.algorithm && !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([activeRoot$, activeIdentifier$, activeForwarder$])
.pipe(
map(([root, username, forwarder]) => {
const selection = root.algorithm ?? username.algorithm ?? forwarder.algorithm;
if (selection) {
return this.generatorService.algorithm(selection);
} else {
return of(root as { nav: PasswordAlgorithm });
return null;
}
}),
filter(({ nav }) => !!nav),
distinctUntilChanged((prev, next) => isSameAlgorithm(prev?.id, next?.id)),
takeUntil(this.destroyed),
)
.subscribe((algorithm) => {
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
this.algorithm$.next(algorithm);
});
});
// assume the last-selected 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),
takeUntil(this.destroyed),
)
.subscribe(([{ nav: algorithm }, preference]) => {
.subscribe(([algorithm, preference]) => {
function setPreference(category: CredentialCategory) {
const p = preference[category];
p.algorithm = algorithm;
p.algorithm = algorithm.id;
p.updated = new Date();
}
// `is*Algorithm` decides `algorithm`'s type, which flows into `setPreference`
if (isEmailAlgorithm(algorithm)) {
if (isEmailAlgorithm(algorithm.id)) {
setPreference("email");
} else if (isUsernameAlgorithm(algorithm)) {
} else if (isUsernameAlgorithm(algorithm.id)) {
setPreference("username");
} else if (isPasswordAlgorithm(algorithm)) {
} else if (isPasswordAlgorithm(algorithm.id)) {
setPreference("password");
} else {
return;
@@ -227,34 +312,74 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
});
// populate the form with the user's preferences to kick off interactivity
preferences.pipe(takeUntil(this.destroyed)).subscribe(({ email, username, password }) => {
// the last preference set by the user "wins"
const userNav = email.updated > username.updated ? email : username;
const rootNav: any = userNav.updated > password.updated ? IDENTIFIER : password.algorithm;
const credentialType = rootNav === IDENTIFIER ? userNav.algorithm : password.algorithm;
// update navigation; break subscription loop
this.onRootChanged(rootNav);
this.username.setValue({ nav: userNav.algorithm }, { emitEvent: false });
// load algorithm metadata
const algorithm = this.generatorService.algorithm(credentialType);
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
this.algorithm$.next(algorithm);
});
});
// generate on load unless the generator prohibits it
this.algorithm$
preferences
.pipe(
distinctUntilChanged((prev, next) => prev.id === next.id),
filter((a) => !a.onlyOnRequest),
map(({ email, username, password }) => {
const forwarderPref = isForwarderIntegration(email.algorithm) ? email : null;
const usernamePref = email.updated > username.updated ? email : username;
// inject drilldown flags
const forwarderNav = !forwarderPref
? NONE_SELECTED
: JSON.stringify(forwarderPref.algorithm);
const userNav = forwarderPref ? FORWARDER : JSON.stringify(usernamePref.algorithm);
const rootNav =
usernamePref.updated > password.updated
? IDENTIFIER
: JSON.stringify(password.algorithm);
// construct cascade metadata
const cascade = {
root: {
selection: { nav: rootNav },
active: {
nav: rootNav,
algorithm: rootNav === IDENTIFIER ? null : password.algorithm,
} as CascadeValue,
},
username: {
selection: { nav: userNav },
active: {
nav: userNav,
algorithm: forwarderPref ? null : usernamePref.algorithm,
},
},
forwarder: {
selection: { nav: forwarderNav },
active: {
nav: forwarderNav,
algorithm: forwarderPref?.algorithm,
},
},
};
return cascade;
}),
takeUntil(this.destroyed),
)
.subscribe(() => this.generate$.next());
.subscribe(({ root, username, forwarder }) => {
// update navigation; break subscription loop
this.onRootChanged(root.selection);
this.username.setValue(username.selection, { emitEvent: false });
this.forwarder.setValue(forwarder.selection, { emitEvent: false });
// update cascade visibility
activeRoot$.next(root.active);
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(() => {
if (!a || a.onlyOnRequest) {
this.value$.next("-");
} else {
this.generate$.next();
}
});
});
}
private typeToGenerator$(type: CredentialAlgorithm) {
@@ -278,20 +403,61 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
case "passphrase":
return this.generatorService.generate$(Generators.passphrase, dependencies);
default:
throw new Error(`Invalid generator type: "${type}"`);
}
if (isForwarderIntegration(type)) {
const forwarder = getForwarderConfiguration(type.forwarder);
const configuration = toCredentialGeneratorConfiguration(forwarder);
const generator = this.generatorService.generate$(configuration, dependencies);
return generator;
}
throw new Error(`Invalid generator type: "${type}"`);
}
/** Lists the credential types of the username algorithm box. */
protected usernameOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
/** Lists the top-level credential types supported by the component.
* @remarks This is string-typed because angular doesn't support
* structural equality for objects, which prevents `CredentialAlgorithm`
* from being selectable within a dropdown when its value contains a
* `ForwarderIntegration`.
*/
protected rootOptions$ = new BehaviorSubject<Option<string>[]>([]);
/** Lists the top-level credential types supported by the component. */
protected rootOptions$ = new BehaviorSubject<Option<RootNavValue>[]>([]);
/** Lists the credential types of the username algorithm box. */
protected usernameOptions$ = new BehaviorSubject<Option<string>[]>([]);
/** Lists the credential types of the username algorithm box. */
protected forwarderOptions$ = new BehaviorSubject<Option<string>[]>([]);
/** Tracks the currently selected forwarder. */
protected forwarderId$ = new BehaviorSubject<IntegrationId>(null);
/** Tracks forwarder control visibility */
protected showForwarder$ = new BehaviorSubject<boolean>(false);
/** tracks the currently selected credential type */
protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
protected showAlgorithm$ = this.algorithm$.pipe(
combineLatestWith(this.showForwarder$),
map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
);
/**
* Emits the copy button aria-label respective of the selected credential type
*/
protected credentialTypeCopyLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
/**
* Emits the generate button aria-label respective of the selected credential type
*/
protected credentialTypeGenerateLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
/** Emits hint key for the currently selected credential type */
protected credentialTypeHint$ = new ReplaySubject<string>(1);
@@ -308,10 +474,10 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
/** Emits when a new credential is requested */
protected readonly generate$ = new Subject<void>();
private toOptions(algorithms: CredentialGeneratorInfo[]) {
const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
value: algorithm.id,
label: this.i18nService.t(algorithm.nameKey),
private toOptions(algorithms: AlgorithmInfo[]) {
const options: Option<string>[] = algorithms.map((algorithm) => ({
value: JSON.stringify(algorithm.id),
label: algorithm.name,
}));
return options;

16
libs/tools/generator/components/src/forwarder-settings.component.html Normal file
View File

@@ -0,0 +1,16 @@
<form class="box" [formGroup]="settings" class="tw-container">
<bit-form-field *ngIf="displayDomain">
<bit-label>{{ "forwarderDomainName" | i18n }}</bit-label>
<input bitInput formControlName="domain" type="text" placeholder="example.com" />
<bit-hint>{{ "forwarderDomainNameHint" | i18n }}</bit-hint>
</bit-form-field>
<bit-form-field *ngIf="displayToken">
<bit-label>{{ "apiKey" | i18n }}</bit-label>
<input bitInput formControlName="token" type="password" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
<bit-form-field *ngIf="displayBaseUrl" disableMargin>
<bit-label>{{ "selfHostBaseUrl" | i18n }}</bit-label>
<input bitInput formControlName="baseUrl" type="text" />
</bit-form-field>
</form>

195
libs/tools/generator/components/src/forwarder-settings.component.ts Normal file
View File

@@ -0,0 +1,195 @@
import {
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
SimpleChanges,
} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import {
BehaviorSubject,
concatMap,
map,
ReplaySubject,
skip,
Subject,
switchAll,
switchMap,
takeUntil,
withLatestFrom,
} from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { IntegrationId } from "@bitwarden/common/tools/integration";
import { UserId } from "@bitwarden/common/types/guid";
import {
CredentialGeneratorConfiguration,
CredentialGeneratorService,
getForwarderConfiguration,
NoPolicy,
toCredentialGeneratorConfiguration,
} from "@bitwarden/generator-core";
import { completeOnAccountSwitch, toValidators } from "./util";
const Controls = Object.freeze({
domain: "domain",
token: "token",
baseUrl: "baseUrl",
});
/** Options group for forwarder integrations */
@Component({
selector: "tools-forwarder-settings",
templateUrl: "forwarder-settings.component.html",
})
export class ForwarderSettingsComponent implements OnInit, OnChanges, OnDestroy {
/** Instantiates the component
* @param accountService queries user availability
* @param generatorService settings and policy logic
* @param formBuilder reactive form controls
*/
constructor(
private formBuilder: FormBuilder,
private generatorService: CredentialGeneratorService,
private accountService: AccountService,
) {}
/** Binds the component to a specific user's settings.
* When this input is not provided, the form binds to the active
* user
*/
@Input()
userId: UserId | null;
@Input({ required: true })
forwarder: IntegrationId;
/** Emits settings updates and completes if the settings become unavailable.
* @remarks this does not emit the initial settings. If you would like
* to receive live settings updates including the initial update,
* use `CredentialGeneratorService.settings$(...)` instead.
*/
@Output()
readonly onUpdated = new EventEmitter<unknown>();
/** The template's control bindings */
protected settings = this.formBuilder.group({
[Controls.domain]: [""],
[Controls.token]: [""],
[Controls.baseUrl]: [""],
});
private forwarderId$ = new ReplaySubject<IntegrationId>(1);
async ngOnInit() {
const singleUserId$ = this.singleUserId$();
const forwarder$ = new ReplaySubject<CredentialGeneratorConfiguration<any, NoPolicy>>(1);
this.forwarderId$
.pipe(
map((id) => getForwarderConfiguration(id)),
// type erasure necessary because the configuration properties are
// determined dynamically at runtime
// FIXME: this can be eliminated by unifying the forwarder settings types;
// see `ForwarderConfiguration<...>` for details.
map((forwarder) => toCredentialGeneratorConfiguration<any>(forwarder)),
takeUntil(this.destroyed$),
)
.subscribe((forwarder) => {
this.displayDomain = forwarder.request.includes("domain");
this.displayToken = forwarder.request.includes("token");
this.displayBaseUrl = forwarder.request.includes("baseUrl");
forwarder$.next(forwarder);
});
const settings$$ = forwarder$.pipe(
concatMap((forwarder) => this.generatorService.settings(forwarder, { singleUserId$ })),
);
// bind settings to the reactive form
settings$$.pipe(switchAll(), takeUntil(this.destroyed$)).subscribe((settings) => {
// skips reactive event emissions to break a subscription cycle
this.settings.patchValue(settings as any, { emitEvent: false });
});
// bind policy to the reactive form
forwarder$
.pipe(
switchMap((forwarder) => {
const constraints$ = this.generatorService
.policy$(forwarder, { userId$: singleUserId$ })
.pipe(map(({ constraints }) => [constraints, forwarder] as const));
return constraints$;
}),
takeUntil(this.destroyed$),
)
.subscribe(([constraints, forwarder]) => {
for (const name in Controls) {
const control = this.settings.get(name);
if (forwarder.request.includes(name as any)) {
control.enable({ emitEvent: false });
control.setValidators(
// the configuration's type erasure affects `toValidators` as well
toValidators(name, forwarder, constraints),
);
} else {
control.disable({ emitEvent: false });
control.clearValidators();
}
}
});
// the first emission is the current value; subsequent emissions are updates
settings$$
.pipe(
map((settings$) => settings$.pipe(skip(1))),
switchAll(),
takeUntil(this.destroyed$),
)
.subscribe(this.onUpdated);
// now that outputs are set up, connect inputs
this.settings.valueChanges
.pipe(withLatestFrom(settings$$), takeUntil(this.destroyed$))
.subscribe(([value, settings]) => {
settings.next(value);
});
}
ngOnChanges(changes: SimpleChanges): void {
this.refresh$.complete();
if ("forwarder" in changes) {
this.forwarderId$.next(this.forwarder);
}
}
protected displayDomain: boolean;
protected displayToken: boolean;
protected displayBaseUrl: boolean;
private singleUserId$() {
// FIXME: this branch should probably scan for the user and make sure
// the account is unlocked
if (this.userId) {
return new BehaviorSubject(this.userId as UserId).asObservable();
}
return this.accountService.activeAccount$.pipe(
completeOnAccountSwitch(),
takeUntil(this.destroyed$),
);
}
private readonly refresh$ = new Subject<void>();
private readonly destroyed$ = new Subject<void>();
ngOnDestroy(): void {
this.destroyed$.complete();
}
}

19
libs/tools/generator/components/src/generator.module.ts
View File

@@ -5,8 +5,11 @@ import { ReactiveFormsModule } from "@angular/forms";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
import { SafeInjectionToken } from "@bitwarden/angular/services/injection-tokens";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
import { EncryptService } from "@bitwarden/common/platform/abstractions/encrypt.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { StateProvider } from "@bitwarden/common/platform/state";
import {
CardComponent,
@@ -30,6 +33,7 @@ import {
import { CatchallSettingsComponent } from "./catchall-settings.component";
import { CredentialGeneratorComponent } from "./credential-generator.component";
import { ForwarderSettingsComponent } from "./forwarder-settings.component";
import { PassphraseSettingsComponent } from "./passphrase-settings.component";
import { PasswordGeneratorComponent } from "./password-generator.component";
import { PasswordSettingsComponent } from "./password-settings.component";
@@ -67,18 +71,27 @@ const RANDOMIZER = new SafeInjectionToken<Randomizer>("Randomizer");
safeProvider({
provide: CredentialGeneratorService,
useClass: CredentialGeneratorService,
deps: [RANDOMIZER, StateProvider, PolicyService],
deps: [
RANDOMIZER,
StateProvider,
PolicyService,
ApiService,
I18nService,
EncryptService,
CryptoService,
],
}),
],
declarations: [
CatchallSettingsComponent,
CredentialGeneratorComponent,
ForwarderSettingsComponent,
SubaddressSettingsComponent,
UsernameSettingsComponent,
PasswordGeneratorComponent,
PasswordSettingsComponent,
PassphraseSettingsComponent,
PasswordSettingsComponent,
UsernameGeneratorComponent,
UsernameSettingsComponent,
],
exports: [CredentialGeneratorComponent, PasswordGeneratorComponent, UsernameGeneratorComponent],
})

54
libs/tools/generator/components/src/password-generator.component.ts
View File

@@ -21,9 +21,9 @@ import {
Generators,
PasswordAlgorithm,
GeneratedCredential,
CredentialGeneratorInfo,
CredentialAlgorithm,
isPasswordAlgorithm,
AlgorithmInfo,
} from "@bitwarden/generator-core";
/** Options group for passwords */
@@ -52,36 +52,6 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
/** tracks the currently selected credential type */
protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>(null);
/**
* Emits the copy button aria-label respective of the selected credential
*
* FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
*/
protected credentialTypeCopyLabel$ = this.credentialType$.pipe(
map((cred) => {
if (cred === "password") {
return this.i18nService.t("copyPassword");
}
return this.i18nService.t("copyPassphrase");
}),
);
/**
* Emits the generate button aria-label respective of the selected credential
*
* FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
*/
protected credentialTypeGenerateLabel$ = this.credentialType$.pipe(
map((cred) => {
if (cred === "password") {
return this.i18nService.t("generatePassword");
}
return this.i18nService.t("generatePassphrase");
}),
);
/** Emits the last generated value. */
protected readonly value$ = new BehaviorSubject<string>("");
@@ -208,12 +178,28 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
protected passwordOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
/** tracks the currently selected credential type */
protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
private toOptions(algorithms: CredentialGeneratorInfo[]) {
/**
* Emits the copy button aria-label respective of the selected credential type
*/
protected credentialTypeCopyLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
/**
* Emits the generate button aria-label respective of the selected credential type
*/
protected credentialTypeGenerateLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
private toOptions(algorithms: AlgorithmInfo[]) {
const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
value: algorithm.id,
label: this.i18nService.t(algorithm.nameKey),
label: this.i18nService.t(algorithm.name),
}));
return options;

23
libs/tools/generator/components/src/username-generator.component.html
View File

@@ -3,45 +3,54 @@
<bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
</div>
<div class="tw-flex tw-items-center tw-space-x-1">
<!-- FIXME: Move appA11yTitle translation to `AlgorithmInfo` within the `CredentialGeneratorService`. -->
<button
type="button"
bitIconButton="bwi-generate"
buttonType="main"
(click)="generate$.next()"
[appA11yTitle]="'generateUsername' | i18n"
[appA11yTitle]="credentialTypeGenerateLabel$ | async"
></button>
<!-- FIXME: Move appA11yTitle translation to `AlgorithmInfo` within the `CredentialGeneratorService`. -->
<button
type="button"
bitIconButton="bwi-clone"
buttonType="main"
showToast
[appA11yTitle]="'copyUsername' | i18n"
[appA11yTitle]="credentialTypeCopyLabel$ | async"
[appCopyClick]="value$ | async"
></button>
</div>
</bit-card>
<bit-section [disableMargin]="disableMargin">
<bit-section-header>
<h6 bitTypography="h6">{{ "options" | i18n }}</h6>
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
</bit-section-header>
<div [ngClass]="{ 'tw-mb-4': !disableMargin }">
<bit-card>
<form class="box" [formGroup]="credential" class="tw-container">
<form class="box" [formGroup]="username" class="tw-container">
<bit-form-field>
<bit-label>{{ "type" | i18n }}</bit-label>
<bit-select [items]="typeOptions$ | async" formControlName="type"> </bit-select>
<bit-select [items]="typeOptions$ | async" formControlName="nav"> </bit-select>
<bit-hint *ngIf="!!(credentialTypeHint$ | async)">{{
credentialTypeHint$ | async
}}</bit-hint>
</bit-form-field>
</form>
<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'"
[userId]="this.userId$ | async"
(onUpdated)="generate$.next()"
/>
<tools-forwarder-settings
*ngIf="!!(forwarderId$ | async)"
[forwarder]="forwarderId$ | async"
[userId]="this.userId$ | async"
/>
<tools-subaddress-settings
*ngIf="(algorithm$ | async)?.id === 'subaddress'"
[userId]="this.userId$ | async"

278
libs/tools/generator/components/src/username-generator.component.ts
View File

@@ -3,6 +3,9 @@ import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } fro
import { FormBuilder } from "@angular/forms";
import {
BehaviorSubject,
catchError,
combineLatest,
combineLatestWith,
distinctUntilChanged,
filter,
map,
@@ -15,18 +18,30 @@ import {
import { 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 { IntegrationId } from "@bitwarden/common/tools/integration";
import { UserId } from "@bitwarden/common/types/guid";
import { ToastService } from "@bitwarden/components";
import { Option } from "@bitwarden/components/src/select/option";
import {
AlgorithmInfo,
CredentialAlgorithm,
CredentialGeneratorInfo,
CredentialGeneratorService,
GeneratedCredential,
Generators,
getForwarderConfiguration,
isEmailAlgorithm,
isForwarderIntegration,
isSameAlgorithm,
isUsernameAlgorithm,
toCredentialGeneratorConfiguration,
} from "@bitwarden/generator-core";
// constants used to identify navigation selections that are not
// generator algorithms
const FORWARDER = "forwarder";
const NONE_SELECTED = "none";
/** Component that generates usernames and emails */
@Component({
selector: "tools-username-generator",
@@ -42,6 +57,8 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
*/
constructor(
private generatorService: CredentialGeneratorService,
private toastService: ToastService,
private logService: LogService,
private i18nService: I18nService,
private accountService: AccountService,
private zone: NgZone,
@@ -62,8 +79,12 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
@Input({ transform: coerceBooleanProperty }) disableMargin = false;
/** Tracks the selected generation algorithm */
protected credential = this.formBuilder.group({
type: [null as CredentialAlgorithm],
protected username = this.formBuilder.group({
nav: [null as string],
});
protected forwarder = this.formBuilder.group({
nav: [null as string],
});
async ngOnInit() {
@@ -82,14 +103,27 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
this.generatorService
.algorithms$(["email", "username"], { userId$: this.userId$ })
.pipe(
map((algorithms) => this.toOptions(algorithms)),
map((algorithms) => {
const usernames = algorithms.filter((a) => !isForwarderIntegration(a.id));
const usernameOptions = this.toOptions(usernames);
usernameOptions.push({ value: FORWARDER, label: this.i18nService.t("forwarder") });
const forwarders = algorithms.filter((a) => isForwarderIntegration(a.id));
const forwarderOptions = this.toOptions(forwarders);
forwarderOptions.unshift({ value: NONE_SELECTED, label: this.i18nService.t("select") });
return [usernameOptions, forwarderOptions] as const;
}),
takeUntil(this.destroyed),
)
.subscribe(this.typeOptions$);
.subscribe(([usernames, forwarders]) => {
this.typeOptions$.next(usernames);
this.forwarderOptions$.next(forwarders);
});
this.algorithm$
.pipe(
map((a) => a?.descriptionKey && this.i18nService.t(a?.descriptionKey)),
map((a) => a?.description),
takeUntil(this.destroyed),
)
.subscribe((hint) => {
@@ -103,7 +137,22 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
// wire up the generator
this.algorithm$
.pipe(
filter((algorithm) => !!algorithm),
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),
)
.subscribe((generated) => {
@@ -115,20 +164,96 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
});
});
// normalize cascade selections; introduce subjects to allow changes
// 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
.pipe(
map(
(username): CascadeValue =>
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 {
return null;
}
}),
distinctUntilChanged((prev, next) => isSameAlgorithm(prev?.id, next?.id)),
takeUntil(this.destroyed),
)
.subscribe((algorithm) => {
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
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.credential.valueChanges
this.algorithm$
.pipe(
filter(({ type }) => !!type),
filter((algorithm) => !!algorithm),
withLatestFrom(preferences),
takeUntil(this.destroyed),
)
.subscribe(([{ type }, preference]) => {
if (isEmailAlgorithm(type)) {
preference.email.algorithm = type;
.subscribe(([algorithm, preference]) => {
if (isEmailAlgorithm(algorithm.id)) {
preference.email.algorithm = algorithm.id;
preference.email.updated = new Date();
} else if (isUsernameAlgorithm(type)) {
preference.username.algorithm = type;
} else if (isUsernameAlgorithm(algorithm.id)) {
preference.username.algorithm = algorithm.id;
preference.username.updated = new Date();
} else {
return;
@@ -137,31 +262,61 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
preferences.next(preference);
});
// populate the form with the user's preferences to kick off interactivity
preferences.pipe(takeUntil(this.destroyed)).subscribe(({ email, username }) => {
// this generator supports email & username; the last preference
// set by the user "wins"
const preference = email.updated > username.updated ? email.algorithm : username.algorithm;
// break subscription loop
this.credential.setValue({ type: preference }, { emitEvent: false });
const algorithm = this.generatorService.algorithm(preference);
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
this.algorithm$.next(algorithm);
});
});
// generate on load unless the generator prohibits it
this.algorithm$
preferences
.pipe(
distinctUntilChanged((prev, next) => prev.id === next.id),
filter((a) => !a.onlyOnRequest),
map(({ email, username }) => {
const forwarderPref = isForwarderIntegration(email.algorithm) ? email : null;
const usernamePref = email.updated > username.updated ? email : username;
// inject drilldown flags
const forwarderNav = !forwarderPref
? NONE_SELECTED
: JSON.stringify(forwarderPref.algorithm);
const userNav = forwarderPref ? FORWARDER : JSON.stringify(usernamePref.algorithm);
// construct cascade metadata
const cascade = {
username: {
selection: { nav: userNav },
active: {
nav: userNav,
algorithm: forwarderPref ? null : usernamePref.algorithm,
},
},
forwarder: {
selection: { nav: forwarderNav },
active: {
nav: forwarderNav,
algorithm: forwarderPref?.algorithm,
},
},
};
return cascade;
}),
takeUntil(this.destroyed),
)
.subscribe(() => this.generate$.next());
.subscribe(({ username, forwarder }) => {
// update navigation; break subscription loop
this.username.setValue(username.selection, { emitEvent: false });
this.forwarder.setValue(forwarder.selection, { emitEvent: false });
// update cascade visibility
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(() => {
if (!a || a.onlyOnRequest) {
this.value$.next("-");
} else {
this.generate$.next();
}
});
});
}
private typeToGenerator$(type: CredentialAlgorithm) {
@@ -179,17 +334,52 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
case "username":
return this.generatorService.generate$(Generators.username, dependencies);
default:
throw new Error(`Invalid generator type: "${type}"`);
}
if (isForwarderIntegration(type)) {
const forwarder = getForwarderConfiguration(type.forwarder);
const configuration = toCredentialGeneratorConfiguration(forwarder);
return this.generatorService.generate$(configuration, dependencies);
}
throw new Error(`Invalid generator type: "${type}"`);
}
/** Lists the credential types supported by the component. */
protected typeOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
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. */
protected forwarderOptions$ = new BehaviorSubject<Option<string>[]>([]);
/** Tracks forwarder control visibility */
protected showForwarder$ = new BehaviorSubject<boolean>(false);
/** tracks the currently selected credential type */
protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
protected showAlgorithm$ = this.algorithm$.pipe(
combineLatestWith(this.showForwarder$),
map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
);
/**
* Emits the copy button aria-label respective of the selected credential type
*/
protected credentialTypeCopyLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
/**
* Emits the generate button aria-label respective of the selected credential type
*/
protected credentialTypeGenerateLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
);
/** Emits hint key for the currently selected credential type */
protected credentialTypeHint$ = new ReplaySubject<string>(1);
@@ -203,10 +393,10 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
/** Emits when a new credential is requested */
protected readonly generate$ = new Subject<void>();
private toOptions(algorithms: CredentialGeneratorInfo[]) {
const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
value: algorithm.id,
label: this.i18nService.t(algorithm.nameKey),
private toOptions(algorithms: AlgorithmInfo[]) {
const options: Option<string>[] = algorithms.map((algorithm) => ({
value: JSON.stringify(algorithm.id),
label: this.i18nService.t(algorithm.name),
}));
return options;

2
libs/tools/generator/components/src/util.ts
View File

@@ -63,7 +63,7 @@ function getConstraint<Key extends keyof AnyConstraint>(
) {
if (policy && key in policy) {
return policy[key] ?? config[key];
} else if (key in config) {
} else if (config && key in config) {
return config[key];
}
}