Protect card: Add the number of Logins Blocked. (#38396)

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx

@@ -113,10 +113,19 @@ const ValueSection: FC< {
 				<div className="value-section__logins-blocked">
 					<div className="value-section__heading">Logins Blocked</div>
 					<div className="value-section__data">
-						<div className="logins_blocked__count">0</div>
+						<LoginsBlockedStatus />
 					</div>
 				</div>
 			</div>
 		</>
 	);
 };
+
+const LoginsBlockedStatus = () => {
+	const {
+		protect: { wafConfig: wafData },
+	} = getMyJetpackWindowInitialState();
+	const { blocked_logins: blockedLoginsCount = 0 } = wafData || {};
+
+	return <div className="logins_blocked__count">{ blockedLoginsCount }</div>;
+};

projects/packages/my-jetpack/changelog/add-mj-protect-card-logins-blocked-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add the number of logins blocked to the Protect card in My Jetpack.

projects/packages/my-jetpack/global.d.ts

@@ -192,6 +192,7 @@ interface Window {
 			};
 			wafConfig: {
 				automatic_rules_available: boolean;
+				blocked_logins: number;
 				bootstrap_path: string;
 				brute_force_protection: boolean;
 				jetpack_waf_automatic_rules: '1' | '';

projects/packages/my-jetpack/src/class-initializer.php

@@ -264,7 +264,10 @@ public static function enqueue_scripts() {
 				'latestBoostSpeedScores' => $latest_score,
 				'protect'                => array(
 					'scanData'  => $scan_data,
-					'wafConfig' => Waf_Runner::get_config(),
+					'wafConfig' => array_merge(
+						Waf_Runner::get_config(),
+						array( 'blocked_logins' => (int) get_site_option( 'jetpack_protect_blocked_attempts', 0 ) )
+					),
 				),
 			)
 		);