[PM-5607] password generator component & configuration (#10767)
This commit is contained in:
✨ Audrey ✨
GitHub
parent
33f66263fa
commit
7e1706a0ec
|
|
@ -384,16 +384,56 @@
|
|||
"message": "Minimum password length"
|
||||
},
|
||||
"uppercase": {
|
||||
"message": "Uppercase (A-Z)"
|
||||
"message": "Uppercase (A-Z)",
|
||||
"description": "deprecated. Use uppercaseLabel instead."
|
||||
},
|
||||
"lowercase": {
|
||||
"message": "Lowercase (a-z)"
|
||||
"message": "Lowercase (a-z)",
|
||||
"description": "deprecated. Use lowercaseLabel instead."
|
||||
},
|
||||
"numbers": {
|
||||
"message": "Numbers (0-9)"
|
||||
"message": "Numbers (0-9)",
|
||||
"description": "deprecated. Use numbersLabel instead."
|
||||
},
|
||||
"specialCharacters": {
|
||||
"message": "Special characters (!@#$%^&*)"
|
||||
"message": "Special characters (!@#$%^&*)",
|
||||
"description": "deprecated. Use specialCharactersLabel instead."
|
||||
},
|
||||
"include": {
|
||||
"message": "Include",
|
||||
"description": "Card header for password generator include block"
|
||||
},
|
||||
"uppercaseDescription": {
|
||||
"message": "Include uppercase characters",
|
||||
"description": "Tooltip for the password generator uppercase character checkbox"
|
||||
},
|
||||
"uppercaseLabel": {
|
||||
"message": "A-Z",
|
||||
"description": "Label for the password generator uppercase character checkbox"
|
||||
},
|
||||
"lowercaseDescription": {
|
||||
"message": "Include lowercase characters",
|
||||
"description": "Full description for the password generator lowercase character checkbox"
|
||||
},
|
||||
"lowercaseLabel": {
|
||||
"message": "a-z",
|
||||
"description": "Label for the password generator lowercase character checkbox"
|
||||
},
|
||||
"numbersDescription": {
|
||||
"message": "Include numbers",
|
||||
"description": "Full description for the password generator numbers checkbox"
|
||||
},
|
||||
"numbersLabel": {
|
||||
"message": "0-9",
|
||||
"description": "Label for the password generator numbers checkbox"
|
||||
},
|
||||
"specialCharactersDescription": {
|
||||
"message": "Include special characters",
|
||||
"description": "Full description for the password generator special characters checkbox"
|
||||
},
|
||||
"specialCharactersLabel": {
|
||||
"message": "!@#$%^&*",
|
||||
"description": "Label for the password generator special characters checkbox"
|
||||
},
|
||||
"numWords": {
|
||||
"message": "Number of words"
|
||||
|
|
@ -415,7 +455,12 @@
|
|||
"message": "Minimum special"
|
||||
},
|
||||
"avoidAmbChar": {
|
||||
"message": "Avoid ambiguous characters"
|
||||
"message": "Avoid ambiguous characters",
|
||||
"description": "deprecated. Use avoidAmbiguous instead."
|
||||
},
|
||||
"avoidAmbiguous": {
|
||||
"message": "Avoid ambiguous characters",
|
||||
"description": "Label for the avoid ambiguous characters checkbox."
|
||||
},
|
||||
"searchVault": {
|
||||
"message": "Search vault"
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<bit-passphrase-settings />
|
||||
<bit-password-settings />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Component } from "@angular/core";
|
||||
|
||||
import { PassphraseSettingsComponent } from "@bitwarden/generator-components";
|
||||
import {
|
||||
PassphraseSettingsComponent,
|
||||
PasswordSettingsComponent,
|
||||
} from "@bitwarden/generator-components";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: "credential-generator",
|
||||
templateUrl: "credential-generator.component.html",
|
||||
imports: [PassphraseSettingsComponent],
|
||||
imports: [PassphraseSettingsComponent, PasswordSettingsComponent],
|
||||
})
|
||||
export class CredentialGeneratorComponent {}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
export { PassphraseSettingsComponent } from "./passphrase-settings.component";
|
||||
export { PasswordSettingsComponent } from "./password-settings.component";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
<bit-section>
|
||||
<bit-section-header *ngIf="showHeader">
|
||||
<h5 bitTypography="h5">{{ "options" | i18n }}</h5>
|
||||
</bit-section-header>
|
||||
<form class="box" [formGroup]="settings" class="tw-container">
|
||||
<div class="tw-mb-4">
|
||||
<bit-card>
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "length" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
formControlName="length"
|
||||
type="number"
|
||||
[min]="minLength"
|
||||
[max]="maxLength"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</bit-card>
|
||||
</div>
|
||||
<div>
|
||||
<bit-card>
|
||||
<div class="tw-mb-4">{{ "include" | i18n }}</div>
|
||||
<div class="tw-flex tw-justify-between">
|
||||
<bit-form-control
|
||||
class="tw-w-1/5"
|
||||
attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
|
||||
title="{{ 'uppercaseDescription' | i18n }}"
|
||||
>
|
||||
<input bitCheckbox type="checkbox" formControlName="uppercase" />
|
||||
<bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
<bit-form-control
|
||||
class="tw-w-1/5"
|
||||
attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
|
||||
title="{{ 'lowercaseDescription' | i18n }}"
|
||||
>
|
||||
<input bitCheckbox type="checkbox" formControlName="lowercase" />
|
||||
<bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
<bit-form-control
|
||||
class="tw-w-1/5"
|
||||
attr.aria-description="{{ 'numbersDescription' | i18n }}"
|
||||
title="{{ 'numbersDescription' | i18n }}"
|
||||
>
|
||||
<input bitCheckbox type="checkbox" formControlName="numbers" />
|
||||
<bit-label>{{ "numbersLabel" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
<bit-form-control
|
||||
class="tw-w-2/5"
|
||||
attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
|
||||
title="{{ 'specialCharactersDescription' | i18n }}"
|
||||
>
|
||||
<input bitCheckbox type="checkbox" formControlName="special" />
|
||||
<bit-label>{{ "specialCharactersLabel" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
</div>
|
||||
<div class="tw-flex">
|
||||
<bit-form-field class="tw-basis-1/2 tw-mr-4">
|
||||
<bit-label>{{ "minNumbers" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="number"
|
||||
[min]="minMinNumber"
|
||||
[max]="maxMinNumber"
|
||||
formControlName="minNumber"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<bit-form-field class="tw-basis-1/2">
|
||||
<bit-label>{{ "minSpecial" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="number"
|
||||
[min]="minMinSpecial"
|
||||
[max]="maxMinSpecial"
|
||||
formControlName="minSpecial"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<bit-form-control>
|
||||
<input bitCheckbox type="checkbox" formControlName="avoidAmbiguous" />
|
||||
<bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
</bit-card>
|
||||
</div>
|
||||
</form>
|
||||
</bit-section>
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
|
||||
import { FormBuilder } from "@angular/forms";
|
||||
import { BehaviorSubject, skip, takeUntil, Subject, map } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
import {
|
||||
Generators,
|
||||
CredentialGeneratorService,
|
||||
PasswordGenerationOptions,
|
||||
} from "@bitwarden/generator-core";
|
||||
|
||||
import { DependenciesModule } from "./dependencies";
|
||||
import { completeOnAccountSwitch, toValidators } from "./util";
|
||||
|
||||
const Controls = Object.freeze({
|
||||
length: "length",
|
||||
uppercase: "uppercase",
|
||||
lowercase: "lowercase",
|
||||
numbers: "numbers",
|
||||
special: "special",
|
||||
minNumber: "minNumber",
|
||||
minSpecial: "minSpecial",
|
||||
avoidAmbiguous: "avoidAmbiguous",
|
||||
});
|
||||
|
||||
/** Options group for passwords */
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: "bit-password-settings",
|
||||
templateUrl: "password-settings.component.html",
|
||||
imports: [DependenciesModule],
|
||||
})
|
||||
export class PasswordSettingsComponent implements OnInit, 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 password component to a specific user's settings.
|
||||
* When this input is not provided, the form binds to the active
|
||||
* user
|
||||
*/
|
||||
@Input()
|
||||
userId: UserId | null;
|
||||
|
||||
/** When `true`, an options header is displayed by the component. Otherwise, the header is hidden. */
|
||||
@Input()
|
||||
showHeader: boolean = true;
|
||||
|
||||
/** 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<PasswordGenerationOptions>();
|
||||
|
||||
protected settings = this.formBuilder.group({
|
||||
[Controls.length]: [Generators.Password.settings.initial.length],
|
||||
[Controls.uppercase]: [Generators.Password.settings.initial.uppercase],
|
||||
[Controls.lowercase]: [Generators.Password.settings.initial.lowercase],
|
||||
[Controls.numbers]: [Generators.Password.settings.initial.number],
|
||||
[Controls.special]: [Generators.Password.settings.initial.special],
|
||||
[Controls.minNumber]: [Generators.Password.settings.initial.minNumber],
|
||||
[Controls.minSpecial]: [Generators.Password.settings.initial.minSpecial],
|
||||
[Controls.avoidAmbiguous]: [!Generators.Password.settings.initial.ambiguous],
|
||||
});
|
||||
|
||||
async ngOnInit() {
|
||||
const singleUserId$ = this.singleUserId$();
|
||||
const settings = await this.generatorService.settings(Generators.Password, { singleUserId$ });
|
||||
|
||||
settings
|
||||
.pipe(
|
||||
map((settings) => {
|
||||
// interface is "avoid" while storage is "include"
|
||||
const s: any = { ...settings };
|
||||
s.avoidAmbiguous = s.ambiguous;
|
||||
delete s.ambiguous;
|
||||
return s;
|
||||
}),
|
||||
takeUntil(this.destroyed$),
|
||||
)
|
||||
.subscribe((s) => {
|
||||
// skips reactive event emissions to break a subscription cycle
|
||||
this.settings.patchValue(s, { emitEvent: false });
|
||||
});
|
||||
|
||||
// the first emission is the current value; subsequent emissions are updates
|
||||
settings.pipe(skip(1), takeUntil(this.destroyed$)).subscribe(this.onUpdated);
|
||||
|
||||
///
|
||||
this.generatorService
|
||||
.policy$(Generators.Password, { userId$: singleUserId$ })
|
||||
.pipe(takeUntil(this.destroyed$))
|
||||
.subscribe((policy) => {
|
||||
this.settings
|
||||
.get(Controls.length)
|
||||
.setValidators(toValidators(Controls.length, Generators.Password, policy));
|
||||
|
||||
this.settings
|
||||
.get(Controls.minNumber)
|
||||
.setValidators(toValidators(Controls.minNumber, Generators.Password, policy));
|
||||
|
||||
this.settings
|
||||
.get(Controls.minSpecial)
|
||||
.setValidators(toValidators(Controls.minSpecial, Generators.Password, policy));
|
||||
|
||||
// forward word boundaries to the template (can't do it through the rx form)
|
||||
// FIXME: move the boundary logic fully into the policy evaluator
|
||||
this.minLength = policy.length?.min ?? Generators.Password.settings.constraints.length.min;
|
||||
this.maxLength = policy.length?.max ?? Generators.Password.settings.constraints.length.max;
|
||||
this.minMinNumber =
|
||||
policy.minNumber?.min ?? Generators.Password.settings.constraints.minNumber.min;
|
||||
this.maxMinNumber =
|
||||
policy.minNumber?.max ?? Generators.Password.settings.constraints.minNumber.max;
|
||||
this.minMinSpecial =
|
||||
policy.minSpecial?.min ?? Generators.Password.settings.constraints.minSpecial.min;
|
||||
this.maxMinSpecial =
|
||||
policy.minSpecial?.max ?? Generators.Password.settings.constraints.minSpecial.max;
|
||||
|
||||
const toggles = [
|
||||
[Controls.length, policy.length.min < policy.length.max],
|
||||
[Controls.uppercase, !policy.policy.useUppercase],
|
||||
[Controls.lowercase, !policy.policy.useLowercase],
|
||||
[Controls.numbers, !policy.policy.useNumbers],
|
||||
[Controls.special, !policy.policy.useSpecial],
|
||||
[Controls.minNumber, policy.minNumber.min < policy.minNumber.max],
|
||||
[Controls.minSpecial, policy.minSpecial.min < policy.minSpecial.max],
|
||||
] as [keyof typeof Controls, boolean][];
|
||||
|
||||
for (const [control, enabled] of toggles) {
|
||||
this.toggleEnabled(control, enabled);
|
||||
}
|
||||
});
|
||||
|
||||
// now that outputs are set up, connect inputs
|
||||
this.settings.valueChanges
|
||||
.pipe(
|
||||
map((settings) => {
|
||||
// interface is "avoid" while storage is "include"
|
||||
const s: any = { ...settings };
|
||||
s.ambiguous = s.avoidAmbiguous;
|
||||
delete s.avoidAmbiguous;
|
||||
return s;
|
||||
}),
|
||||
takeUntil(this.destroyed$),
|
||||
)
|
||||
.subscribe(settings);
|
||||
}
|
||||
|
||||
/** attribute binding for length[min] */
|
||||
protected minLength: number;
|
||||
|
||||
/** attribute binding for length[max] */
|
||||
protected maxLength: number;
|
||||
|
||||
/** attribute binding for minNumber[min] */
|
||||
protected minMinNumber: number;
|
||||
|
||||
/** attribute binding for minNumber[max] */
|
||||
protected maxMinNumber: number;
|
||||
|
||||
/** attribute binding for minSpecial[min] */
|
||||
protected minMinSpecial: number;
|
||||
|
||||
/** attribute binding for minSpecial[max] */
|
||||
protected maxMinSpecial: number;
|
||||
|
||||
private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
|
||||
if (enabled) {
|
||||
this.settings.get(setting).enable();
|
||||
} else {
|
||||
this.settings.get(setting).disable();
|
||||
}
|
||||
}
|
||||
|
||||
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 destroyed$ = new Subject<void>();
|
||||
ngOnDestroy(): void {
|
||||
this.destroyed$.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,16 @@
|
|||
import { PASSPHRASE_SETTINGS } from "../strategies/storage";
|
||||
import { PassphraseGenerationOptions, PassphraseGeneratorPolicy } from "../types";
|
||||
import { PASSPHRASE_SETTINGS, PASSWORD_SETTINGS } from "../strategies/storage";
|
||||
import {
|
||||
PassphraseGenerationOptions,
|
||||
PassphraseGeneratorPolicy,
|
||||
PasswordGenerationOptions,
|
||||
PasswordGeneratorPolicy,
|
||||
} from "../types";
|
||||
import { CredentialGeneratorConfiguration } from "../types/credential-generator-configuration";
|
||||
|
||||
import { DefaultPassphraseBoundaries } from "./default-passphrase-boundaries";
|
||||
import { DefaultPassphraseGenerationOptions } from "./default-passphrase-generation-options";
|
||||
import { DefaultPasswordBoundaries } from "./default-password-boundaries";
|
||||
import { DefaultPasswordGenerationOptions } from "./default-password-generation-options";
|
||||
import { Policies } from "./policies";
|
||||
|
||||
const PASSPHRASE = Object.freeze({
|
||||
|
|
@ -24,8 +31,33 @@ const PASSPHRASE = Object.freeze({
|
|||
PassphraseGeneratorPolicy
|
||||
>);
|
||||
|
||||
const PASSWORD = Object.freeze({
|
||||
settings: {
|
||||
initial: DefaultPasswordGenerationOptions,
|
||||
constraints: {
|
||||
length: {
|
||||
min: DefaultPasswordBoundaries.length.min,
|
||||
max: DefaultPasswordBoundaries.length.max,
|
||||
},
|
||||
minNumber: {
|
||||
min: DefaultPasswordBoundaries.minDigits.min,
|
||||
max: DefaultPasswordBoundaries.minDigits.max,
|
||||
},
|
||||
minSpecial: {
|
||||
min: DefaultPasswordBoundaries.minSpecialCharacters.min,
|
||||
max: DefaultPasswordBoundaries.minSpecialCharacters.max,
|
||||
},
|
||||
},
|
||||
account: PASSWORD_SETTINGS,
|
||||
},
|
||||
policy: Policies.Password,
|
||||
} satisfies CredentialGeneratorConfiguration<PasswordGenerationOptions, PasswordGeneratorPolicy>);
|
||||
|
||||
/** Generator configurations */
|
||||
export const Generators = Object.freeze({
|
||||
/** Passphrase generator configuration */
|
||||
Passphrase: PASSPHRASE,
|
||||
|
||||
/** Password generator configuration */
|
||||
Password: PASSWORD,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const PASSWORD = Object.freeze({
|
|||
}),
|
||||
combine: passwordLeastPrivilege,
|
||||
createEvaluator: (policy) => new PasswordGeneratorOptionsEvaluator(policy),
|
||||
createEvaluatorV2: (policy) => new PasswordGeneratorOptionsEvaluator(policy),
|
||||
} as PolicyConfiguration<PasswordGeneratorPolicy, PasswordGenerationOptions>);
|
||||
|
||||
/** Policy configurations */
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { Constraints } from "@bitwarden/common/tools/types";
|
||||
|
||||
import { PolicyEvaluator } from "../abstractions";
|
||||
import { DefaultPasswordBoundaries } from "../data";
|
||||
import { Boundary, PasswordGeneratorPolicy, PasswordGenerationOptions } from "../types";
|
||||
|
|
@ -5,8 +7,19 @@ import { Boundary, PasswordGeneratorPolicy, PasswordGenerationOptions } from "..
|
|||
/** Enforces policy for password generation.
|
||||
*/
|
||||
export class PasswordGeneratorOptionsEvaluator
|
||||
implements PolicyEvaluator<PasswordGeneratorPolicy, PasswordGenerationOptions>
|
||||
implements
|
||||
PolicyEvaluator<PasswordGeneratorPolicy, PasswordGenerationOptions>,
|
||||
Constraints<PasswordGenerationOptions>
|
||||
{
|
||||
// Constraints<PasswordGenerationOptions> compatibility
|
||||
get minNumber() {
|
||||
return this.minDigits;
|
||||
}
|
||||
|
||||
get minSpecial() {
|
||||
return this.minSpecialCharacters;
|
||||
}
|
||||
|
||||
// This design is not ideal, but it is a step towards a more robust password
|
||||
// generator. Ideally, `sanitize` would be implemented on an options class,
|
||||
// and `applyPolicy` would be implemented on a policy class, "mise en place".
|
||||
|
|
|
|||
Loading…
Reference in New Issue