[PM-5085] Add additional InputPasswordComponent story and docs (#9752)

* split stories: 1 default, 1 with policy

* add storybook docs
This commit is contained in:
rr-bw 2024-06-25 09:04:49 -07:00 committed by GitHub
parent 44fb8cda1b
commit 9ec01422df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 100 additions and 5 deletions

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

View File

@ -29,7 +29,10 @@ const mockMasterPasswordPolicyOptions = {
export default { export default {
title: "Auth/Input Password", title: "Auth/Input Password",
component: InputPasswordComponent, component: InputPasswordComponent,
decorators: [ } as Meta;
const decorators = (options: { hasPolicy?: boolean }) => {
return [
applicationConfig({ applicationConfig({
providers: [ providers: [
importProvidersFrom(PreloadedEnglishI18nModule), importProvidersFrom(PreloadedEnglishI18nModule),
@ -56,13 +59,15 @@ export default {
{ {
provide: PolicyApiServiceAbstraction, provide: PolicyApiServiceAbstraction,
useValue: { useValue: {
getMasterPasswordPolicyOptsForOrgUser: () => mockMasterPasswordPolicyOptions, getMasterPasswordPolicyOptsForOrgUser: () =>
options.hasPolicy ? mockMasterPasswordPolicyOptions : null,
} as Partial<PolicyService>, } as Partial<PolicyService>,
}, },
{ {
provide: PolicyService, provide: PolicyService,
useValue: { useValue: {
masterPasswordPolicyOptions$: () => of(mockMasterPasswordPolicyOptions), masterPasswordPolicyOptions$: () =>
options.hasPolicy ? of(mockMasterPasswordPolicyOptions) : null,
evaluateMasterPassword: (score) => { evaluateMasterPassword: (score) => {
if (score < 4) { if (score < 4) {
return false; return false;
@ -101,8 +106,8 @@ export default {
}, },
], ],
}), }),
], ];
} as Meta; };
type Story = StoryObj<InputPasswordComponent>; type Story = StoryObj<InputPasswordComponent>;
@ -113,4 +118,19 @@ export const Default: Story = {
<auth-input-password></auth-input-password> <auth-input-password></auth-input-password>
`, `,
}), }),
decorators: decorators({
hasPolicy: false,
}),
};
export const WithPolicy: Story = {
render: (args) => ({
props: args,
template: `
<auth-input-password></auth-input-password>
`,
}),
decorators: decorators({
hasPolicy: true,
}),
}; };