1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Files
browser/libs/tools/generator/components/src/password-settings.component.html
✨ Audrey ✨ 414bdde232 [PM-13876] replace angular validation with html constraints validation (#11816)
* rough-in passphrase validation failure handling

* trigger valid change from settings

* fix `max` constraint enforcement

* add taps for generator validation monitoring/debugging

* HTML constraints validation rises like a phoenix

* remove min/max boundaries to fix chrome display issue

* bind settings components as view children of options components

* remove defunct `okSettings$`

* extend validationless generator to passwords

* extend validationless generator to catchall emails

* extend validationless generator to forwarder emails

* extend validationless generator to subaddress emails

* extend validationless generator to usernames

* fix observable cycle

* disable generate button when no algorithm is selected

* prevent duplicate algorithm emissions

* add constraints that assign email address defaults
2024-11-06 17:54:29 +01:00

101 lines
3.6 KiB
HTML

<bit-section [disableMargin]="disableMargin">
<bit-section-header *ngIf="showHeader">
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
</bit-section-header>
<form class="box" [formGroup]="settings" class="tw-container">
<div class="tw-mb-4">
<bit-card>
<bit-form-field disableMargin>
<bit-label>{{ "length" | i18n }}</bit-label>
<input bitInput formControlName="length" type="number" (change)="save('length')" />
<bit-hint>{{ lengthBoundariesHint$ | async }}</bit-hint>
</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"
(change)="save('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"
(change)="save('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="number" (change)="save('number')" />
<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"
(change)="save('special')"
/>
<bit-label>{{ "specialCharactersLabel" | i18n }}</bit-label>
</bit-form-control>
</div>
<div class="tw-flex">
<bit-form-field class="tw-w-full tw-basis-1/2 tw-mr-4">
<bit-label>{{ "minNumbers" | i18n }}</bit-label>
<input
bitInput
type="number"
formControlName="minNumber"
(change)="save('minNumbers')"
/>
</bit-form-field>
<bit-form-field class="tw-w-full tw-basis-1/2">
<bit-label>{{ "minSpecial" | i18n }}</bit-label>
<input
bitInput
type="number"
formControlName="minSpecial"
(change)="save('minSpecial')"
/>
</bit-form-field>
</div>
<bit-form-control [disableMargin]="!policyInEffect">
<input
bitCheckbox
type="checkbox"
formControlName="avoidAmbiguous"
(change)="save('avoidAmbiguous')"
/>
<bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
</bit-form-control>
<p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>
</bit-card>
</div>
</form>
</bit-section>