Protect Dashboard: Add the Login protection section

projects/packages/protect/changelog/add-protect-dashboard-login-protection

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add the Login protection section to the Protect dashboard, covering brute force protection, account protection and WordPress.com login.

projects/packages/protect/composer.json

@@ -7,6 +7,7 @@
 		"php": ">=7.4",
 		"automattic/jetpack-admin-ui": "@dev",
 		"automattic/jetpack-connection": "@dev",
+		"automattic/jetpack-ip": "@dev",
 		"automattic/jetpack-protect-models": "@dev",
 		"automattic/jetpack-protect-status": "@dev",
 		"automattic/jetpack-status": "@dev",

projects/packages/protect/routes/dashboard/sections/login-protection/index.tsx

@@ -1,5 +1,12 @@
+import LoginProtectionCard from './login-protection-card';
+import LoginProtectionSettingsCard from './login-protection-settings-card';
 import type { ProtectSection } from '../types';
+import type { LoginProtectionState } from './types';
 
-const section: ProtectSection = { key: 'loginProtection' };
+const section: ProtectSection< LoginProtectionState | undefined > = {
+	key: 'loginProtection',
+	OverviewCard: LoginProtectionCard,
+	SettingsCard: LoginProtectionSettingsCard,
+};
 
 export default section;

projects/packages/protect/routes/dashboard/sections/login-protection/login-protection-card.tsx

@@ -0,0 +1,148 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { lock } from '@wordpress/icons';
+import { Badge, Stack, Text } from '@wordpress/ui';
+import { CardRow, ProtectCard, Stat } from '../../components/card';
+import TabLink from '../../components/tab-link';
+import isModuleActive from '../../data/is-module-active';
+import type { LoginProtectionContext, ModuleState } from './types';
+import type { CardStatus } from '../../components/card';
+
+/**
+ * One way of protecting logins, with whether it's on.
+ *
+ * @param props             - Component props.
+ * @param props.name        - The method's name.
+ * @param props.description - What it does.
+ * @param props.state       - Its module's live state.
+ * @return The row.
+ */
+function Method( {
+	name,
+	description,
+	state,
+}: {
+	name: string;
+	description: string;
+	state: ModuleState;
+} ) {
+	let badge = <Badge intent="draft">{ __( 'Off', 'jetpack-protect-pkg' ) }</Badge>;
+	if ( ! state.available ) {
+		badge = <Badge intent="none">{ __( 'Unavailable', 'jetpack-protect-pkg' ) }</Badge>;
+	} else if ( state.active ) {
+		badge = <Badge intent="stable">{ __( 'On', 'jetpack-protect-pkg' ) }</Badge>;
+	}
+
+	return (
+		<CardRow>
+			<Stack direction="row" gap="md" align="center" justify="space-between">
+				<Stack direction="column" gap="xs">
+					<Text variant="body-lg">{ name }</Text>
+					<Text variant="body-md" className="jp-protect-card__muted">
+						{ description }
+					</Text>
+				</Stack>
+				{ badge }
+			</Stack>
+		</CardRow>
+	);
+}
+
+/**
+ * The card badge's intent: neutral when no method is available.
+ *
+ * @param on        - How many methods are on.
+ * @param available - How many methods are available.
+ * @return The intent.
+ */
+function getStatusIntent( on: number, available: number ): CardStatus[ 'intent' ] {
+	if ( available === 0 ) {
+		return 'none';
+	}
+	return on === available ? 'stable' : 'medium';
+}
+
+/**
+ * The Login protection card: brute force protection, account protection and WordPress.com login.
+ *
+ * @param props          - The dashboard context.
+ * @param props.state    - This section's state from PHP.
+ * @param props.settings - Jetpack settings, for live module state.
+ * @param props.openTab  - Switches dashboard tabs, for the link to Settings.
+ * @return The card, or nothing without the section's state.
+ */
+export default function LoginProtectionCard( {
+	state: login,
+	settings,
+	openTab,
+}: LoginProtectionContext ) {
+	if ( ! login ) {
+		return null;
+	}
+
+	const live = ( module: string, initial: ModuleState ): ModuleState => ( {
+		available: initial.available,
+		active: isModuleActive( settings.settings, module, initial.active ),
+	} );
+	const bruteForce = live( 'protect', login.bruteForce );
+	const accountProtection = live( 'account-protection', login.accountProtection );
+	// The module can stay active after the owner disconnects, but WordPress.com login doesn't run then.
+	const sso = live( 'sso', { ...login.sso, available: login.sso.available && login.ssoUsable } );
+
+	const methods = [ bruteForce, accountProtection, sso ];
+	const on = methods.filter( method => method.available && method.active ).length;
+	const available = methods.filter( method => method.available ).length;
+
+	return (
+		<ProtectCard
+			icon={ lock }
+			title={ __( 'Login protection', 'jetpack-protect-pkg' ) }
+			status={ {
+				label: sprintf(
+					/* translators: %1$d is how many login protections are on, %2$d how many there are. */
+					__( '%1$d of %2$d on', 'jetpack-protect-pkg' ),
+					on,
+					available
+				),
+				intent: getStatusIntent( on, available ),
+			} }
+		>
+			{ bruteForce.active && (
+				<CardRow>
+					<Stat
+						label={ __( 'All-time blocked login attempts', 'jetpack-protect-pkg' ) }
+						value={ login.blockedCount }
+					/>
+				</CardRow>
+			) }
+			<Method
+				name={ __( 'Brute force protection', 'jetpack-protect-pkg' ) }
+				description={ __(
+					'Blocks IP addresses that keep failing to log in.',
+					'jetpack-protect-pkg'
+				) }
+				state={ bruteForce }
+			/>
+			<Method
+				name={ __( 'Account protection', 'jetpack-protect-pkg' ) }
+				description={ __(
+					'Asks users with a weak or leaked password to verify their identity and choose a new one.',
+					'jetpack-protect-pkg'
+				) }
+				state={ accountProtection }
+			/>
+			<Method
+				name={ __( 'WordPress.com login', 'jetpack-protect-pkg' ) }
+				description={ __(
+					'Lets users log in with their WordPress.com account, with optional two-step authentication.',
+					'jetpack-protect-pkg'
+				) }
+				state={ sso }
+			/>
+			<CardRow>
+				<TabLink tab="settings" onOpen={ openTab }>
+					{ __( 'Configure login protection', 'jetpack-protect-pkg' ) }
+				</TabLink>
+			</CardRow>
+		</ProtectCard>
+	);
+}