From 80314f51a1386dcf0c4af324a149cd721042c4ef Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:52:05 +0200
Subject: [PATCH] [BEEEP] [PM-3838] Refactor password callout (#6234)

---
 .storybook/main.ts                            |  1 +
 .../components/reset-password.component.html  |  9 ++--
 .../organizations/members/members.module.ts   |  3 ++
 .../register-form.component.html              |  8 +--
 .../register-form/register-form.module.ts     |  4 +-
 .../src/app/auth/set-password.component.html  |  8 +--
 .../settings/change-password.component.html   |  8 +--
 .../emergency-access-takeover.component.html  |  8 +--
 .../app/auth/update-password.component.html   |  7 ++-
 .../auth/update-temp-password.component.html  |  8 +--
 .../src/app/shared/loose-components.module.ts |  3 ++
 apps/web/src/scss/callouts.scss               |  4 --
 libs/auth/src/index.ts                        |  1 +
 .../password-callout.component.html           | 24 +++++++++
 .../password-callout.component.ts             | 36 +++++++++++++
 .../password-callout.stories.ts               | 52 +++++++++++++++++++
 16 files changed, 140 insertions(+), 44 deletions(-)
 create mode 100644 libs/auth/src/password-callout/password-callout.component.html
 create mode 100644 libs/auth/src/password-callout/password-callout.component.ts
 create mode 100644 libs/auth/src/password-callout/password-callout.stories.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index acc6e2a56db..37339b7343c 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -4,6 +4,7 @@ import remarkGfm from "remark-gfm";
 
 const config: StorybookConfig = {
   stories: [
+    "../libs/auth/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../libs/components/src/**/*.mdx",
     "../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../apps/web/src/**/*.mdx",
diff --git a/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.html b/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.html
index 4116f56de79..6d41249d6e1 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.html
@@ -19,13 +19,12 @@
         <app-callout type="warning"
           >{{ "resetPasswordLoggedOutWarning" | i18n : loggedOutWarningName }}
         </app-callout>
-        <app-callout
-          type="info"
-          [enforcedPolicyOptions]="enforcedPolicyOptions"
-          enforcedPolicyMessage="{{ 'resetPasswordMasterPasswordPolicyInEffect' | i18n }}"
+        <auth-password-callout
+          [policy]="enforcedPolicyOptions"
+          message="resetPasswordMasterPasswordPolicyInEffect"
           *ngIf="enforcedPolicyOptions"
         >
-        </app-callout>
+        </auth-password-callout>
         <div class="row">
           <div class="col form-group">
             <div class="d-flex">
diff --git a/apps/web/src/app/admin-console/organizations/members/members.module.ts b/apps/web/src/app/admin-console/organizations/members/members.module.ts
index 71f5692a119..083fe354ff1 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.module.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.module.ts
@@ -1,5 +1,7 @@
 import { NgModule } from "@angular/core";
 
+import { PasswordCalloutComponent } from "@bitwarden/auth";
+
 import { LooseComponentsModule } from "../../../shared";
 import { SharedOrganizationModule } from "../shared";
 
@@ -19,6 +21,7 @@ import { PeopleComponent } from "./people.component";
     LooseComponentsModule,
     MembersRoutingModule,
     UserDialogModule,
+    PasswordCalloutComponent,
   ],
   declarations: [
     BulkConfirmComponent,
diff --git a/apps/web/src/app/auth/register-form/register-form.component.html b/apps/web/src/app/auth/register-form/register-form.component.html
index e53c963c938..481140a7d2e 100644
--- a/apps/web/src/app/auth/register-form/register-form.component.html
+++ b/apps/web/src/app/auth/register-form/register-form.component.html
@@ -25,12 +25,8 @@
     </div>
 
     <div class="tw-mb-3">
-      <app-callout
-        type="info"
-        [enforcedPolicyOptions]="enforcedPolicyOptions"
-        *ngIf="enforcedPolicyOptions"
-      >
-      </app-callout>
+      <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+      </auth-password-callout>
       <bit-form-field>
         <bit-label>{{ "masterPass" | i18n }}</bit-label>
         <input
diff --git a/apps/web/src/app/auth/register-form/register-form.module.ts b/apps/web/src/app/auth/register-form/register-form.module.ts
index ee0aa91d1aa..ffe71715ab0 100644
--- a/apps/web/src/app/auth/register-form/register-form.module.ts
+++ b/apps/web/src/app/auth/register-form/register-form.module.ts
@@ -1,11 +1,13 @@
 import { NgModule } from "@angular/core";
 
+import { PasswordCalloutComponent } from "@bitwarden/auth";
+
 import { SharedModule } from "../../shared";
 
 import { RegisterFormComponent } from "./register-form.component";
 
 @NgModule({
-  imports: [SharedModule],
+  imports: [SharedModule, PasswordCalloutComponent],
   declarations: [RegisterFormComponent],
   exports: [RegisterFormComponent],
 })
diff --git a/apps/web/src/app/auth/set-password.component.html b/apps/web/src/app/auth/set-password.component.html
index fa77d8c2c41..8700a4be811 100644
--- a/apps/web/src/app/auth/set-password.component.html
+++ b/apps/web/src/app/auth/set-password.component.html
@@ -17,12 +17,8 @@
             {{ "resetPasswordAutoEnrollInviteWarning" | i18n }}
           </app-callout>
           <div class="form-group">
-            <app-callout
-              type="info"
-              [enforcedPolicyOptions]="enforcedPolicyOptions"
-              *ngIf="enforcedPolicyOptions"
-            >
-            </app-callout>
+            <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+            </auth-password-callout>
             <label for="masterPassword">{{ "masterPass" | i18n }}</label>
             <div class="d-flex">
               <div class="w-100">
diff --git a/apps/web/src/app/auth/settings/change-password.component.html b/apps/web/src/app/auth/settings/change-password.component.html
index 7088cb5a686..b3ad78168d9 100644
--- a/apps/web/src/app/auth/settings/change-password.component.html
+++ b/apps/web/src/app/auth/settings/change-password.component.html
@@ -3,12 +3,8 @@
 </div>
 
 <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
-<app-callout
-  type="info"
-  [enforcedPolicyOptions]="enforcedPolicyOptions"
-  *ngIf="enforcedPolicyOptions"
->
-</app-callout>
+<auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+</auth-password-callout>
 
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
   <div class="row">
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-takeover.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access-takeover.component.html
index dbcce914e9f..99aa194c5d6 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-takeover.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-takeover.component.html
@@ -23,12 +23,8 @@
       </div>
       <div class="modal-body">
         <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
-        <app-callout
-          type="info"
-          [enforcedPolicyOptions]="enforcedPolicyOptions"
-          *ngIf="enforcedPolicyOptions"
-        >
-        </app-callout>
+        <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+        </auth-password-callout>
         <div class="row">
           <div class="col-6">
             <div class="form-group">
diff --git a/apps/web/src/app/auth/update-password.component.html b/apps/web/src/app/auth/update-password.component.html
index 9678ee425f0..7fb3e1fa491 100644
--- a/apps/web/src/app/auth/update-password.component.html
+++ b/apps/web/src/app/auth/update-password.component.html
@@ -5,11 +5,10 @@
       <div class="card d-block">
         <div class="card-body">
           <app-callout type="warning">{{ "masterPasswordInvalidWarning" | i18n }} </app-callout>
-          <app-callout
-            type="info"
-            [enforcedPolicyOptions]="enforcedPolicyOptions"
+          <auth-password-callout
+            [policy]="enforcedPolicyOptions"
             *ngIf="enforcedPolicyOptions"
-          ></app-callout>
+          ></auth-password-callout>
 
           <form
             #form
diff --git a/apps/web/src/app/auth/update-temp-password.component.html b/apps/web/src/app/auth/update-temp-password.component.html
index 20f0c9dcd62..4fd0ea72b5f 100644
--- a/apps/web/src/app/auth/update-temp-password.component.html
+++ b/apps/web/src/app/auth/update-temp-password.component.html
@@ -6,12 +6,8 @@
         class="tw-block tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-8"
       >
         <app-callout type="warning">{{ masterPasswordWarningText }} </app-callout>
-        <app-callout
-          type="info"
-          [enforcedPolicyOptions]="enforcedPolicyOptions"
-          *ngIf="enforcedPolicyOptions"
-        >
-        </app-callout>
+        <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+        </auth-password-callout>
         <bit-form-field *ngIf="requireCurrentPassword">
           <bit-label>{{ "currentMasterPass" | i18n }}</bit-label>
           <input
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index b9c220ab5ef..de3cd6b3583 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -1,5 +1,7 @@
 import { NgModule } from "@angular/core";
 
+import { PasswordCalloutComponent } from "@bitwarden/auth";
+
 import { OrganizationSwitcherComponent } from "../admin-console/components/organization-switcher.component";
 import { OrganizationCreateModule } from "../admin-console/organizations/create/organization-create.module";
 import { OrganizationLayoutComponent } from "../admin-console/organizations/layouts/organization-layout.component";
@@ -126,6 +128,7 @@ import { SharedModule } from "./shared.module";
 
     // To be removed when OrganizationPlansComponent is moved to its own module (see AC-1453)
     SecretsManagerBillingModule,
+    PasswordCalloutComponent,
   ],
   declarations: [
     AcceptEmergencyComponent,
diff --git a/apps/web/src/scss/callouts.scss b/apps/web/src/scss/callouts.scss
index bde5bedcc30..da28d607161 100644
--- a/apps/web/src/scss/callouts.scss
+++ b/apps/web/src/scss/callouts.scss
@@ -76,8 +76,4 @@
       }
     }
   }
-
-  .enforced-policy-options ul {
-    margin-bottom: 0px;
-  }
 }
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index 0b4f07fc29d..7b0dfec05f9 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -1 +1,2 @@
 export * from "./components/fingerprint-dialog.component";
+export * from "./password-callout/password-callout.component";
diff --git a/libs/auth/src/password-callout/password-callout.component.html b/libs/auth/src/password-callout/password-callout.component.html
new file mode 100644
index 00000000000..c0f77938475
--- /dev/null
+++ b/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>
diff --git a/libs/auth/src/password-callout/password-callout.component.ts b/libs/auth/src/password-callout/password-callout.component.ts
new file mode 100644
index 00000000000..b56acb37c1d
--- /dev/null
+++ b/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 + ")";
+  }
+}
diff --git a/libs/auth/src/password-callout/password-callout.stories.ts b/libs/auth/src/password-callout/password-callout.stories.ts
new file mode 100644
index 00000000000..ce5b698b2e8
--- /dev/null
+++ b/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,
+  },
+};