diff --git a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts index 215035a0d16..d730d7db775 100644 --- a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts +++ b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts @@ -52,7 +52,7 @@ export type InitiationPath = export class CompleteTrialInitiationComponent implements OnInit, OnDestroy { @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent; - inputPasswordFlow = InputPasswordFlow.AccountRegistration; + inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAccountRegistration; initializing = true; /** Password Manager or Secrets Manager */ diff --git a/libs/auth/src/angular/input-password/input-password.component.ts b/libs/auth/src/angular/input-password/input-password.component.ts index 6c8ca8c88f2..57fdca69cd3 100644 --- a/libs/auth/src/angular/input-password/input-password.component.ts +++ b/libs/auth/src/angular/input-password/input-password.component.ts @@ -53,26 +53,33 @@ import { PasswordInputResult } from "./password-input-result"; // eslint-disable-next-line @bitwarden/platform/no-enums export enum InputPasswordFlow { /** - * Form elements displayed: - * - [Input] New password - * - [Input] New password confirm + * Form Fields: `[newPassword, newPasswordConfirm, newPasswordHint, checkForBreaches]` + * + * Note: this flow does not involve an active account `userId` */ - ChangePasswordDelegation, + SetInitialPasswordAccountRegistration, /** - * All form elements above, plus: - * - [Input] New password hint - * - [Checkbox] Check for breaches + * Form Fields: `[newPassword, newPasswordConfirm, newPasswordHint, checkForBreaches]` */ - AccountRegistration, // important: this flow does not involve an activeAccount/userId SetInitialPasswordAuthedUser, - /* - * All form elements above, plus: [Input] Current password (as the first element in the UI) + /** + * Form Fields: `[currentPassword, newPassword, newPasswordConfirm, newPasswordHint, checkForBreaches]` */ ChangePassword, /** - * All form elements above, plus: [Checkbox] Rotate account encryption key (as the last element in the UI) + * Form Fields: `[currentPassword, newPassword, newPasswordConfirm, newPasswordHint, checkForBreaches, rotateUserKey]` */ ChangePasswordWithOptionalUserKeyRotation, + /** + * This flow is used when a user changes the password for another user's account, such as: + * - Emergency Access Takeover + * - Account Recovery + * + * Form Fields: `[newPassword, newPasswordConfirm]` + * + * Note: this flow does not involve an active account `email` + */ + ChangePasswordDelegation, } interface InputPasswordForm { @@ -278,7 +285,7 @@ export class InputPasswordComponent implements OnInit { const checkForBreaches = this.formGroup.controls.checkForBreaches?.value ?? true; // 1. Determine kdfConfig - if (this.flow === InputPasswordFlow.AccountRegistration) { + if (this.flow === InputPasswordFlow.SetInitialPasswordAccountRegistration) { this.kdfConfig = DEFAULT_KDF_CONFIG; } else { if (!this.userId) { @@ -394,7 +401,7 @@ export class InputPasswordComponent implements OnInit { * from the parent component. */ if ( - this.flow === InputPasswordFlow.AccountRegistration || + this.flow === InputPasswordFlow.SetInitialPasswordAccountRegistration || this.flow === InputPasswordFlow.ChangePasswordDelegation ) { if (this.userId) { @@ -411,7 +418,7 @@ export class InputPasswordComponent implements OnInit { * (b) passed down the correct InputPasswordFlow but failed to pass down a userId */ if ( - this.flow !== InputPasswordFlow.AccountRegistration && + this.flow !== InputPasswordFlow.SetInitialPasswordAccountRegistration && this.flow !== InputPasswordFlow.ChangePasswordDelegation ) { if (!this.userId) { diff --git a/libs/auth/src/angular/input-password/input-password.mdx b/libs/auth/src/angular/input-password/input-password.mdx index b0b05a810ba..dfb88fa7286 100644 --- a/libs/auth/src/angular/input-password/input-password.mdx +++ b/libs/auth/src/angular/input-password/input-password.mdx @@ -24,7 +24,7 @@ the parent component to act on those values as needed. - [The InputPasswordFlow](#the-inputpasswordflow) - [HTML - Form Fields](#html---form-fields) - [TypeScript - Credential Generation](#typescript---credential-generation) - - [Difference between AccountRegistration and SetInitialPasswordAuthedUser](#difference-between-accountregistration-and-setinitialpasswordautheduser) + - [Difference between SetInitialPasswordAccountRegistration and SetInitialPasswordAuthedUser](#difference-between-setinitialpasswordaccountregistration-and-setinitialpasswordautheduser) - [Validation](#validation) - [Submit Logic](#submit-logic) - [Example](#example) @@ -74,7 +74,8 @@ credential generation logic of the component. The `InputPasswordFlow` determines which form fields get displayed in the UI. -**`InputPasswordFlow.AccountRegistration`** and **`InputPasswordFlow.SetInitialPasswordAuthedUser`** +**`InputPasswordFlow.SetInitialPasswordAccountRegistration`** and +**`InputPasswordFlow.SetInitialPasswordAuthedUser`** - Input: New password - Input: Confirm new password @@ -97,22 +98,22 @@ Includes everything above, plus: ### TypeScript - Credential Generation -- The `AccountRegistration` and `SetInitialPasswordAuthedUser` flows involve a user setting their - password for the first time. Therefore on submit the component will only generate new credentials - (`newMasterKey`) and not current credentials (`currentMasterKey`). +- The `SetInitialPasswordAccountRegistration` and `SetInitialPasswordAuthedUser` flows involve a + user setting their password for the first time. Therefore on submit the component will only + generate new credentials (`newMasterKey`) and not current credentials (`currentMasterKey`). - The `ChangePassword` and `ChangePasswordWithOptionalUserKeyRotation` flows both require the user to enter a current password along with a new password. Therefore on submit the component will generate current credentials (`currentMasterKey`) along with new credentials (`newMasterKey`).
-### Difference between `AccountRegistration` and `SetInitialPasswordAuthedUser` +### Difference between `SetInitialPasswordAccountRegistration` and `SetInitialPasswordAuthedUser` These two flows are similar in that they display the same form fields and only generate new credentials, but we need to keep them separate for the following reasons: -- `AccountRegistration` involves scenarios where we have no existing user, and **thus NO active - account `userId`**: +- `SetInitialPasswordAccountRegistration` involves scenarios where we have no existing user, and + **thus NO active account `userId`**: - Standard Account Registration - Email Invite Account Registration @@ -148,12 +149,12 @@ the correct `kdfConfig` prior to key generation: `userId` That said, we cannot mark the `userId` as a required via `@Input({ required: true })` because -`AccountRegistration` flows will not have a `userId`. But we still want to require a `userId` in a -`SetInitialPasswordAuthedUser` flow. Therefore the `InputPasswordComponent` has init logic that -ensures the following: +`SetInitialPasswordAccountRegistration` flows will not have a `userId`. But we still want to require +a `userId` in a `SetInitialPasswordAuthedUser` flow. Therefore the `InputPasswordComponent` has init +logic that ensures the following: -- If the passed down flow is `AccountRegistration`, require that the parent **MUST NOT** have passed - down a `userId` +- If the passed down flow is `SetInitialPasswordAccountRegistration`, require that the parent **MUST + NOT** have passed down a `userId` - If the passed down flow is `SetInitialPasswordAuthedUser` require that the parent must also have passed down a `userId` 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 54ea22070cb..60a0ee5685a 100644 --- a/libs/auth/src/angular/input-password/input-password.stories.ts +++ b/libs/auth/src/angular/input-password/input-password.stories.ts @@ -131,7 +131,8 @@ export default { args: { InputPasswordFlow: { ChangePasswordDelegation: InputPasswordFlow.ChangePasswordDelegation, - AccountRegistration: InputPasswordFlow.AccountRegistration, + SetInitialPasswordAccountRegistration: + InputPasswordFlow.SetInitialPasswordAccountRegistration, SetInitialPasswordAuthedUser: InputPasswordFlow.SetInitialPasswordAuthedUser, ChangePassword: InputPasswordFlow.ChangePassword, ChangePasswordWithOptionalUserKeyRotation: @@ -164,12 +165,12 @@ export const ChangePasswordDelegation: Story = { }), }; -export const AccountRegistration: Story = { +export const SetInitialPasswordAccountRegistration: Story = { render: (args) => ({ props: args, template: ` `, @@ -234,7 +235,7 @@ export const SecondaryButton: Story = { props: args, template: ` @@ -275,7 +276,7 @@ export const InlineButtons: Story = { props: args, template: ` (); - inputPasswordFlow = InputPasswordFlow.AccountRegistration; + inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAccountRegistration; loading = true; submitting = false; email: string;