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

* split stories: 1 default, 1 with policy

* add storybook docs

libs/auth/src/angular/input-password/input-password.mdx

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

libs/auth/src/angular/input-password/input-password.stories.ts

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