diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html index 56469d363eb..cd8cbf85b7b 100644 --- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html @@ -9,7 +9,7 @@ "emergencyAccessLoggedOutWarning" | i18n: dialogData.grantorName }} - + diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts index 1f80e91ff5c..25dedde4a24 100644 --- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts +++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Component, Inject } from "@angular/core"; -import { ChangePasswordComponent } from "@bitwarden/auth/angular"; +import { ChangePasswordComponent, InputPasswordFlow } from "@bitwarden/auth/angular"; import { ButtonModule, CalloutModule, @@ -46,6 +46,8 @@ export enum EmergencyAccessTakeoverDialogResultType { ], }) export class EmergencyAccessTakeoverDialogComponent { + inputPasswordFlow = InputPasswordFlow.ChangePasswordDelegation; + constructor(@Inject(DIALOG_DATA) protected dialogData: EmergencyAccessTakeoverDialogData) {} /** diff --git a/libs/auth/src/angular/input-password/input-password.component.html b/libs/auth/src/angular/input-password/input-password.component.html index 8955a7b40b1..33403affbcc 100644 --- a/libs/auth/src/angular/input-password/input-password.component.html +++ b/libs/auth/src/angular/input-password/input-password.component.html @@ -42,7 +42,7 @@ bitPasswordInputToggle [(toggled)]="showPassword" > - + {{ "important" | i18n }} {{ "masterPassImportant" | i18n }} {{ minPasswordLengthMsg }}. @@ -74,26 +74,32 @@ > - - {{ "masterPassHintLabel" | i18n }} - - - {{ - "masterPassHintText" - | i18n: formGroup.value.newPasswordHint.length : maxHintLength.toString() - }} - - + + + {{ "masterPassHintLabel" | i18n }} + + + {{ + "masterPassHintText" + | i18n: formGroup.value.newPasswordHint.length : maxHintLength.toString() + }} + + - - - {{ "checkForBreaches" | i18n }} - + + + {{ "checkForBreaches" | i18n }} + + ; newPasswordConfirm: FormControl; - newPasswordHint: FormControl; - checkForBreaches: FormControl; + newPasswordHint?: FormControl; + checkForBreaches?: FormControl; currentPassword?: FormControl; rotateUserKey?: FormControl; } @@ -147,12 +151,6 @@ export class InputPasswordComponent implements OnInit { "newPasswordConfirm", this.i18nService.t("masterPassDoesntMatch"), ), - compareInputs( - ValidationGoal.InputsShouldNotMatch, - "newPassword", - "newPasswordHint", - this.i18nService.t("hintEqualsPassword"), - ), ], }, ); @@ -188,6 +186,26 @@ export class InputPasswordComponent implements OnInit { } private addFormFieldsIfNecessary() { + if (this.flow !== InputPasswordFlow.ChangePasswordDelegation) { + this.formGroup.addControl( + "newPasswordHint", + new FormControl("", [ + Validators.minLength(this.minHintLength), + Validators.maxLength(this.maxHintLength), + ]) as FormControl, + ); + this.formGroup.addControl("checkForBreaches", new FormControl(true) as FormControl); + + this.formGroup.addValidators([ + compareInputs( + ValidationGoal.InputsShouldNotMatch, + "newPassword", + "newPasswordHint", + this.i18nService.t("hintEqualsPassword"), + ), + ]); + } + if ( this.flow === InputPasswordFlow.ChangePassword || this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation @@ -244,8 +262,8 @@ export class InputPasswordComponent implements OnInit { const currentPassword = this.formGroup.controls.currentPassword?.value ?? ""; const newPassword = this.formGroup.controls.newPassword.value; - const newPasswordHint = this.formGroup.controls.newPasswordHint.value; - const checkForBreaches = this.formGroup.controls.checkForBreaches.value; + const newPasswordHint = this.formGroup.controls.newPasswordHint?.value ?? ""; + const checkForBreaches = this.formGroup.controls.checkForBreaches?.value ?? true; // 1. Determine kdfConfig if (this.flow === InputPasswordFlow.AccountRegistration) { diff --git a/libs/auth/src/angular/input-password/input-password.stories.ts b/libs/auth/src/angular/input-password/input-password.stories.ts index 708b74b9925..54ea22070cb 100644 --- a/libs/auth/src/angular/input-password/input-password.stories.ts +++ b/libs/auth/src/angular/input-password/input-password.stories.ts @@ -130,6 +130,7 @@ export default { ], args: { InputPasswordFlow: { + ChangePasswordDelegation: InputPasswordFlow.ChangePasswordDelegation, AccountRegistration: InputPasswordFlow.AccountRegistration, SetInitialPasswordAuthedUser: InputPasswordFlow.SetInitialPasswordAuthedUser, ChangePassword: InputPasswordFlow.ChangePassword, @@ -154,6 +155,15 @@ export default { type Story = StoryObj; +export const ChangePasswordDelegation: Story = { + render: (args) => ({ + props: args, + template: ` + + `, + }), +}; + export const AccountRegistration: Story = { render: (args) => ({ props: args,