mirror of
https://github.com/bitwarden/browser
synced 2025-12-11 05:43:41 +00:00
[PM-5085] Add additional InputPasswordComponent story and docs (#9752)
* split stories: 1 default, 1 with policy * add storybook docs
This commit is contained in:
75
libs/auth/src/angular/input-password/input-password.mdx
Normal file
75
libs/auth/src/angular/input-password/input-password.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
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").
|
||||
- `orgId` (optional) - used to retreive and enforce the master password policy requirements for an
|
||||
org.
|
||||
|
||||
<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} />
|
||||
Reference in New Issue
Block a user