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} />