1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 01:33:33 +00:00

[PM-5085] Create InputPasswordComponent (#9630)

* setup for InputPasswordComponent and basic story

* add all input fields

* add translated error messages

* update validation

* add password-callout

* update hint text

* use PolicyService in component

* setup SetPasswordComponent

* remove div

* add default button text

* add mocks for InputPassword storybook

* simplify ngOnInit

* change param and use PolicyApiService

* check for breaches and validate against policy

* user toastService

* use useValue for mocks

* hash before emitting

* validation cleanup and use PreloadedEnglishI18nModule

* add ngOnDestroy

* create validateFormInputsDoNotMatch fn

* update validateFormInputsComparison and add deprecation jsdocs

* rename validator fn

* fix bugs in validation fn

* cleanup and re-introduce services/logic

* toggle password inputs together

* update hint help text

* remove SetPassword test

* remove master key creation / hashing

* add translations to browser/desktop

* mock basic password-strength functionality

* add check for controls

* hash before emitting

* type the EventEmitter

* use DEFAULT_KDF_CONFIG

* emit master key

* clarify comment

* update password mininum help text to match org policy requirement
This commit is contained in:
rr-bw
2024-06-17 14:56:24 -07:00
committed by GitHub
parent 75615902a3
commit 2a0e21b4bb
8 changed files with 534 additions and 3 deletions

View File

@@ -0,0 +1,73 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<auth-password-callout
*ngIf="masterPasswordPolicy"
[policy]="masterPasswordPolicy"
></auth-password-callout>
<div class="tw-mb-6">
<bit-form-field>
<bit-label>{{ "masterPassword" | i18n }}</bit-label>
<input
id="input-password-form_password"
bitInput
type="password"
formControlName="password"
/>
<button
type="button"
bitIconButton
bitSuffix
bitPasswordInputToggle
[(toggled)]="showPassword"
></button>
<bit-hint>
<span class="tw-font-bold">{{ "important" | i18n }} </span>
{{ "masterPassImportant" | i18n }}
{{ minPasswordMsg }}.
</bit-hint>
</bit-form-field>
<app-password-strength
[password]="formGroup.controls.password.value"
[email]="email"
[showText]="true"
(passwordStrengthResult)="getPasswordStrengthResult($event)"
></app-password-strength>
</div>
<bit-form-field>
<bit-label>{{ "confirmMasterPassword" | i18n }}</bit-label>
<input
id="input-password-form_confirmed-password"
bitInput
type="password"
formControlName="confirmedPassword"
/>
<button
type="button"
bitIconButton
bitSuffix
bitPasswordInputToggle
[(toggled)]="showPassword"
></button>
</bit-form-field>
<bit-form-field>
<bit-label>{{ "masterPassHintLabel" | i18n }}</bit-label>
<input bitInput formControlName="hint" />
<bit-hint>
{{ "masterPassHintText" | i18n: formGroup.value.hint.length : maxHintLength.toString() }}
</bit-hint>
</bit-form-field>
<bit-form-control>
<input type="checkbox" bitCheckbox formControlName="checkForBreaches" />
<bit-label>{{ "checkForBreaches" | i18n }}</bit-label>
</bit-form-control>
<button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
{{ buttonText || ("setMasterPassword" | i18n) }}
</button>
<bit-error-summary *ngIf="showErrorSummary" [formGroup]="formGroup"></bit-error-summary>
</form>