[BEEEP] [PM-3838] Refactor password callout (#6234)

libs/auth/src/index.ts

@@ -1 +1,2 @@
 export * from "./components/fingerprint-dialog.component";
+export * from "./password-callout/password-callout.component";

libs/auth/src/password-callout/password-callout.component.html

@@ -0,0 +1,24 @@
+<bit-callout>
+  {{ message | i18n }}
+
+  <ul *ngIf="policy" class="tw-mb-0">
+    <li *ngIf="policy?.minComplexity > 0">
+      {{ "policyInEffectMinComplexity" | i18n : getPasswordScoreAlertDisplay() }}
+    </li>
+    <li *ngIf="policy?.minLength > 0">
+      {{ "policyInEffectMinLength" | i18n : policy?.minLength.toString() }}
+    </li>
+    <li *ngIf="policy?.requireUpper">
+      {{ "policyInEffectUppercase" | i18n }}
+    </li>
+    <li *ngIf="policy?.requireLower">
+      {{ "policyInEffectLowercase" | i18n }}
+    </li>
+    <li *ngIf="policy?.requireNumbers">
+      {{ "policyInEffectNumbers" | i18n }}
+    </li>
+    <li *ngIf="policy?.requireSpecial">
+      {{ "policyInEffectSpecial" | i18n : "!@#$%^&*" }}
+    </li>
+  </ul>
+</bit-callout>

libs/auth/src/password-callout/password-callout.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CalloutModule } from "@bitwarden/components";
+
+@Component({
+  selector: "auth-password-callout",
+  templateUrl: "password-callout.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, CalloutModule],
+})
+export class PasswordCalloutComponent {
+  @Input() message = "masterPasswordPolicyInEffect";
+  @Input() policy: MasterPasswordPolicyOptions;
+
+  constructor(private i18nService: I18nService) {}
+
+  getPasswordScoreAlertDisplay() {
+    let str: string;
+    switch (this.policy.minComplexity) {
+      case 4:
+        str = this.i18nService.t("strong");
+        break;
+      case 3:
+        str = this.i18nService.t("good");
+        break;
+      default:
+        str = this.i18nService.t("weak");
+        break;
+    }
+    return str + " (" + this.policy.minComplexity + ")";
+  }
+}

libs/auth/src/password-callout/password-callout.stories.ts

@@ -0,0 +1,52 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { I18nMockService } from "@bitwarden/components";
+
+import { PasswordCalloutComponent } from "./password-callout.component";
+
+export default {
+  title: "Auth/Password Callout",
+  component: PasswordCalloutComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              masterPasswordPolicyInEffect:
+                "One or more organization policies require your master password to meet the following requirements:",
+              policyInEffectMinLength: "Minimum length of __$1__",
+              policyInEffectMinComplexity: "Minimum complexity score of __$1__",
+              policyInEffectUppercase: "Contain one or more uppercase characters",
+              policyInEffectLowercase: "Contain one or more lowercase characters",
+              policyInEffectNumbers: "Contain one or more numbers",
+              policyInEffectSpecial:
+                "Contain one or more of the following special characters $CHARS$",
+              weak: "Weak",
+              good: "Good",
+              strong: "Strong",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<PasswordCalloutComponent>;
+
+export const Default: Story = {
+  args: {
+    policy: {
+      minComplexity: 3,
+      minLength: 10,
+      requireUpper: true,
+      requireLower: true,
+      requireNumbers: true,
+      requireSpecial: true,
+    } as MasterPasswordPolicyOptions,
+  },
+};