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

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">

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,

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

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],
 })

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">

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">

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">

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

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

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,

apps/web/src/scss/callouts.scss

@@ -76,8 +76,4 @@
       }
     }
   }
-
-  .enforced-policy-options ul {
-    margin-bottom: 0px;
-  }
 }