add localized messages

apps/web/src/locales/en/messages.json

@@ -23,6 +23,33 @@
   "reviewAtRiskPasswords": {
     "message": "Review at-risk passwords (weak, exposed, or reused) across applications. Select your most critical applications to prioritize security actions for your users to address at-risk passwords."
   },
+  "riskInsightsInitPromptWelcomeTitle": {
+    "message": "Welcome to Risk insights"
+  },
+  "riskInsightsInitPromptGetStartedMessage": {
+    "message": "To get started, follow these steps to find potential security risks."
+  },
+  "riskInsightsInitPromptStep1Title": {
+    "message": "1. Enforce organization data ownership"
+  },
+  "riskInsightsInitPromptStep1Description": {
+    "message": "Turn on the"
+  },
+  "riskInsightsInitPromptEnforceDataOwnershipPolicyLink": {
+    "message": "enforce organization data ownership policy"
+  },
+  "riskInsightsInitPromptStep1DescriptionContinued": {
+    "message": "to get complete visibility of all organization vault data. This setting can be enabled at any time."
+  },
+  "riskInsightsInitPromptStep2Title": {
+    "message": "2. Run the report"
+  },
+  "riskInsightsInitPromptStep2Description": {
+    "message": "Run the report to see a detailed view of potential at-risk passwords across your most critical applications."
+  },
+  "riskInsightsInitPromptRunReport": {
+    "message": "Run Report"
+  },
   "dataLastUpdated": {
     "message": "Data last updated: $DATE$",
     "placeholders": {

bitwarden_license/bit-web/src/app/dirt/access-intelligence/first-report-prompt-dialog.component.html

@@ -1,45 +1,49 @@
 <bit-simple-dialog hideIcon="true">
-  <span bitDialogTitle>Welcome to Risk insights</span>
+  <span bitDialogTitle>{{ "riskInsightsInitPromptWelcomeTitle" | i18n }}</span>
   <span bitDialogContent>
     <div class="tw-text-left">
-      <p class="tw-text-muted tw-mb-6 tw-text-center">
-        To get started, follow these steps to find potential security risks.
+      <p bitTypography="body1" class="tw-text-muted tw-mb-6 tw-text-center">
+        {{ "riskInsightsInitPromptGetStartedMessage" | i18n }}
       </p>
 
       <div class="tw-space-y-4">
         <div
           class="tw-bg-background-alt tw-p-4 tw-rounded-lg tw-border tw-border-solid tw-border-secondary-100"
         >
-          <h3 class="tw-font-semibold tw-text-main tw-mb-2">
-            1. Enforce organization data ownership
-            <span class="tw-text-muted tw-font-normal">(recommended)</span>
+          <h3 bitTypography="h5" class="tw-text-main tw-mb-2">
+            {{ "riskInsightsInitPromptStep1Title" | i18n }}
+            <span bitTypography="body2" class="tw-text-muted tw-font-normal"
+              >({{ "recommended" | i18n }})</span
+            >
           </h3>
-          <p class="tw-text-muted tw-leading-relaxed">
-            Turn on the
+          <p bitTypography="body2" class="tw-text-muted tw-leading-relaxed">
+            {{ "riskInsightsInitPromptStep1Description" | i18n }}
             <a
               href="https://bitwarden.com/help/policies/#enforce-organization-data-ownership"
               target="_blank"
               rel="noopener noreferrer"
               class="tw-text-primary-600 tw-underline hover:tw-text-primary-700 tw-cursor-pointer"
-              >enforce organization data ownership policy</a
+              >{{ "riskInsightsInitPromptEnforceDataOwnershipPolicyLink" | i18n }}</a
             >
-            to get complete visibility of all organization vault data. This setting can be enabled
-            at any time.
+            {{ "riskInsightsInitPromptStep1DescriptionContinued" | i18n }}
           </p>
         </div>
         <div
           class="tw-bg-background-alt tw-p-4 tw-rounded-lg tw-border tw-border-solid tw-border-secondary-100"
         >
-          <h3 class="tw-font-semibold tw-text-main tw-mb-2">2. Run the report</h3>
-          <p class="tw-text-muted tw-leading-relaxed">
-            Run the report to see a detailed view of potential at-risk passwords across your most
-            critical applications.
+          <h3 bitTypography="h5" class="tw-text-main tw-mb-2">
+            {{ "riskInsightsInitPromptStep2Title" | i18n }}
+          </h3>
+          <p bitTypography="body2" class="tw-text-muted tw-leading-relaxed">
+            {{ "riskInsightsInitPromptStep2Description" | i18n }}
           </p>
         </div>
       </div>
     </div>
   </span>
   <ng-container bitDialogFooter>
-    <button bitButton buttonType="primary" type="button" (click)="runReport()">Run Report</button>
+    <button bitButton buttonType="primary" type="button" (click)="runReport()">
+      {{ "riskInsightsInitPromptRunReport" | i18n }}
+    </button>
   </ng-container>
 </bit-simple-dialog>

bitwarden_license/bit-web/src/app/dirt/access-intelligence/first-report-prompt-dialog.component.ts

@@ -1,11 +1,18 @@
 import { Component, inject } from "@angular/core";
 
 import { RiskInsightsDataService } from "@bitwarden/bit-common/dirt/reports/risk-insights";
-import { ButtonModule, DialogModule, DialogRef, DialogService } from "@bitwarden/components";
+import {
+  ButtonModule,
+  DialogModule,
+  DialogRef,
+  DialogService,
+  TypographyModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
   templateUrl: "./first-report-prompt-dialog.component.html",
-  imports: [ButtonModule, DialogModule],
+  imports: [ButtonModule, DialogModule, TypographyModule, I18nPipe],
 })
 export class FirstReportPromptDialogComponent {
   private dialogRef = inject(DialogRef);