mirror of
https://github.com/bitwarden/browser
synced 2026-02-12 22:44:11 +00:00
76 lines
2.4 KiB
Plaintext
76 lines
2.4 KiB
Plaintext
import { Meta, Story } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./input-password.stories.ts";
|
|
|
|
<Meta of={stories} />
|
|
|
|
# InputPassword Component
|
|
|
|
The `InputPasswordComponent` allows a user to enter a master password and hint. On submission it
|
|
creates a master key, master key hash, and emits those values to the parent (along with the hint and
|
|
default kdfConfig).
|
|
|
|
The component is intended for re-use in different scenarios throughout the application. Therefore it
|
|
is mostly presentational and simply emits values rather than acting on them itself. It is the job of
|
|
the parent component to act on those values as needed.
|
|
|
|
<br />
|
|
|
|
## `@Input()`'s
|
|
|
|
- `email` (**required**) - the parent component must provide an email so that the
|
|
`InputPasswordComponent` can create a master key.
|
|
- `buttonText` (optional) - an `i18n` translated string that can be used as button text (default
|
|
text is "Set master password").
|
|
- `masterPasswordPolicyOptions` (optional) - used to display and enforce master password policy
|
|
requirements.
|
|
|
|
<br />
|
|
|
|
## Form Input Fields
|
|
|
|
The `InputPasswordComponent` allows a user to enter:
|
|
|
|
1. Master password
|
|
2. Master password confirmation
|
|
3. Hint (optional)
|
|
4. Chooses whether to check for password breaches (checkbox)
|
|
|
|
Validation ensures that the master password and confirmed master password are the same, and that the
|
|
master password and hint values are not the same.
|
|
|
|
<br />
|
|
|
|
## On Submit
|
|
|
|
When the form is submitted, the `InputPasswordComponent` does the following in order:
|
|
|
|
1. If the user selected the checkbox to check for password breaches, they will recieve a popup
|
|
dialog if their entered password is found in a breach. The popup will give them the option to
|
|
continue with the password or to back out and choose a different password.
|
|
2. If there is a master password policy being enforced by an org, it will check to make sure the
|
|
entered master password meets the policy requirements.
|
|
3. The component will use the password, email, and default kdfConfig to create a master key and
|
|
master key hash.
|
|
4. The component will emit the following values (defined in the `PasswordInputResult` interface) to
|
|
be used by the parent component as needed:
|
|
|
|
```typescript
|
|
export interface PasswordInputResult {
|
|
masterKey: MasterKey;
|
|
masterKeyHash: string;
|
|
kdfConfig: PBKDF2KdfConfig;
|
|
hint: string;
|
|
}
|
|
```
|
|
|
|
# Default Example
|
|
|
|
<Story of={stories.Default} />
|
|
|
|
<br />
|
|
|
|
# With Policy Requrements
|
|
|
|
<Story of={stories.WithPolicy} />
|