mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-21 11:35:34 +01:00
add boundary help text to credential settings (#11757)
This commit is contained in:
parent
b5e509409b
commit
9a83509183
@ -2877,6 +2877,20 @@
|
||||
"generateEmail": {
|
||||
"message": "Generate email"
|
||||
},
|
||||
"generatorBoundariesHint": {
|
||||
"message": "Value must be between $MIN$ and $MAX$",
|
||||
"description": "Explains spin box minimum and maximum values to the user",
|
||||
"placeholders": {
|
||||
"min": {
|
||||
"content": "$1",
|
||||
"example": "8"
|
||||
},
|
||||
"max": {
|
||||
"content": "$2",
|
||||
"example": "128"
|
||||
}
|
||||
}
|
||||
},
|
||||
"usernameType": {
|
||||
"message": "Username type"
|
||||
},
|
||||
|
@ -2393,6 +2393,20 @@
|
||||
"generateEmail": {
|
||||
"message": "Generate email"
|
||||
},
|
||||
"generatorBoundariesHint": {
|
||||
"message": "Value must be between $MIN$ and $MAX$",
|
||||
"description": "Explains spin box minimum and maximum values to the user",
|
||||
"placeholders": {
|
||||
"min": {
|
||||
"content": "$1",
|
||||
"example": "8"
|
||||
},
|
||||
"max": {
|
||||
"content": "$2",
|
||||
"example": "128"
|
||||
}
|
||||
}
|
||||
},
|
||||
"usernameType": {
|
||||
"message": "Username type"
|
||||
},
|
||||
|
@ -6412,6 +6412,20 @@
|
||||
"generateEmail": {
|
||||
"message": "Generate email"
|
||||
},
|
||||
"generatorBoundariesHint": {
|
||||
"message": "Value must be between $MIN$ and $MAX$",
|
||||
"description": "Explains spin box minimum and maximum values to the user",
|
||||
"placeholders": {
|
||||
"min": {
|
||||
"content": "$1",
|
||||
"example": "8"
|
||||
},
|
||||
"max": {
|
||||
"content": "$2",
|
||||
"example": "128"
|
||||
}
|
||||
}
|
||||
},
|
||||
"usernameType": {
|
||||
"message": "Username type"
|
||||
},
|
||||
|
@ -8,6 +8,7 @@
|
||||
<bit-form-field disableMargin>
|
||||
<bit-label>{{ "numWords" | i18n }}</bit-label>
|
||||
<input bitInput formControlName="numWords" id="num-words" type="number" />
|
||||
<bit-hint>{{ numWordsBoundariesHint$ | async }}</bit-hint>
|
||||
</bit-form-field>
|
||||
</bit-card>
|
||||
</div>
|
||||
|
@ -1,9 +1,10 @@
|
||||
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
||||
import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
|
||||
import { FormBuilder } from "@angular/forms";
|
||||
import { BehaviorSubject, skip, takeUntil, Subject } from "rxjs";
|
||||
import { BehaviorSubject, skip, takeUntil, Subject, ReplaySubject } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
import {
|
||||
Generators,
|
||||
@ -29,11 +30,13 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
|
||||
/** Instantiates the component
|
||||
* @param accountService queries user availability
|
||||
* @param generatorService settings and policy logic
|
||||
* @param i18nService localize hints
|
||||
* @param formBuilder reactive form controls
|
||||
*/
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private generatorService: CredentialGeneratorService,
|
||||
private i18nService: I18nService,
|
||||
private accountService: AccountService,
|
||||
) {}
|
||||
|
||||
@ -97,6 +100,13 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
|
||||
|
||||
this.toggleEnabled(Controls.capitalize, !constraints.capitalize?.readonly);
|
||||
this.toggleEnabled(Controls.includeNumber, !constraints.includeNumber?.readonly);
|
||||
|
||||
const boundariesHint = this.i18nService.t(
|
||||
"generatorBoundariesHint",
|
||||
constraints.numWords.min,
|
||||
constraints.numWords.max,
|
||||
);
|
||||
this.numWordsBoundariesHint.next(boundariesHint);
|
||||
});
|
||||
|
||||
// now that outputs are set up, connect inputs
|
||||
@ -106,6 +116,11 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
|
||||
/** display binding for enterprise policy notice */
|
||||
protected policyInEffect: boolean;
|
||||
|
||||
private numWordsBoundariesHint = new ReplaySubject<string>(1);
|
||||
|
||||
/** display binding for min/max constraints of `numWords` */
|
||||
protected numWordsBoundariesHint$ = this.numWordsBoundariesHint.asObservable();
|
||||
|
||||
private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
|
||||
if (enabled) {
|
||||
this.settings.get(setting).enable({ emitEvent: false });
|
||||
|
@ -8,6 +8,7 @@
|
||||
<bit-form-field disableMargin>
|
||||
<bit-label>{{ "length" | i18n }}</bit-label>
|
||||
<input bitInput formControlName="length" type="number" />
|
||||
<bit-hint>{{ lengthBoundariesHint$ | async }}</bit-hint>
|
||||
</bit-form-field>
|
||||
</bit-card>
|
||||
</div>
|
||||
|
@ -1,9 +1,10 @@
|
||||
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
||||
import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
|
||||
import { FormBuilder } from "@angular/forms";
|
||||
import { BehaviorSubject, takeUntil, Subject, map, filter, tap, skip } from "rxjs";
|
||||
import { BehaviorSubject, takeUntil, Subject, map, filter, tap, skip, ReplaySubject } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
import {
|
||||
Generators,
|
||||
@ -33,11 +34,13 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
|
||||
/** Instantiates the component
|
||||
* @param accountService queries user availability
|
||||
* @param generatorService settings and policy logic
|
||||
* @param i18nService localize hints
|
||||
* @param formBuilder reactive form controls
|
||||
*/
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private generatorService: CredentialGeneratorService,
|
||||
private i18nService: I18nService,
|
||||
private accountService: AccountService,
|
||||
) {}
|
||||
|
||||
@ -147,6 +150,13 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
|
||||
for (const [control, enabled] of toggles) {
|
||||
this.toggleEnabled(control, enabled);
|
||||
}
|
||||
|
||||
const boundariesHint = this.i18nService.t(
|
||||
"generatorBoundariesHint",
|
||||
constraints.length.min,
|
||||
constraints.length.max,
|
||||
);
|
||||
this.lengthBoundariesHint.next(boundariesHint);
|
||||
});
|
||||
|
||||
// cascade selections between checkboxes and spinboxes
|
||||
@ -208,6 +218,11 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
|
||||
/** display binding for enterprise policy notice */
|
||||
protected policyInEffect: boolean;
|
||||
|
||||
private lengthBoundariesHint = new ReplaySubject<string>(1);
|
||||
|
||||
/** display binding for min/max constraints of `length` */
|
||||
protected lengthBoundariesHint$ = this.lengthBoundariesHint.asObservable();
|
||||
|
||||
private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
|
||||
if (enabled) {
|
||||
this.settings.get(setting).enable({ emitEvent: false });
|
||||
|
Loading…
Reference in New Issue
Block a user