Account Protection: Disable setting in Protect in unsupported environ…

…ments (#41830) * Protect: use object for account protection settings, add isEnabled and isSupported * Protect: disable account protection toggle when not supported in current env * Adjust implementation * Remove custom class name for disabled case * Fix tests * Fix error * Align copy --------- Co-authored-by: dkmyta <[email protected]> Co-authored-by: dkmyta <[email protected]>
Automattic · Feb 20, 2025 · c62e890 · c62e890
1 parent 03ad3eb
commit c62e890
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 32 deletions.
diff --git a/projects/packages/account-protection/src/class-settings.php b/projects/packages/account-protection/src/class-settings.php
@@ -7,26 +7,24 @@
 
 namespace Automattic\Jetpack\Account_Protection;
 
-use Automattic\Jetpack\Modules;
-
 /**
  * Account Protection Settings
  */
 class Settings {
 	/**
-	 * Modules instance.
+	 * Account Protection instance.
 	 *
-	 * @var Modules|null
+	 * @var Account_Protection
 	 */
-	private $modules;
+	private $account_protection;
 
 	/**
-	 * Constructor.
+	 * Constructor for dependency injection.
 	 *
-	 * @param Modules|null $modules Modules instance.
+	 * @param ?Account_Protection|null $account_protection Account protection dependency.
 	 */
-	public function __construct( ?Modules $modules = null ) {
-		$this->modules = $modules ?? new Modules();
+	public function __construct( ?Account_Protection $account_protection = null ) {
+		$this->account_protection = $account_protection ?? new Account_Protection();
 	}
 
 	/**
@@ -35,11 +33,11 @@ public function __construct( ?Modules $modules = null ) {
 	 * @return array
 	 */
 	public function get() {
-		$account_protection = new Account_Protection( $this->modules );
-
-		return array(
-			'isEnabled'   => $account_protection->is_enabled(),
-			'isSupported' => $account_protection->is_supported_environment(),
+		$settings = array(
+			'isEnabled'   => $this->account_protection->is_enabled(),
+			'isSupported' => $this->account_protection->is_supported_environment(),
 		);
+
+		return $settings;
 	}
 }
diff --git a/projects/packages/account-protection/tests/php/test-settings.php b/projects/packages/account-protection/tests/php/test-settings.php
@@ -10,17 +10,18 @@
  */
 class Settings_Test extends BaseTestCase {
 	public function test_base_case() {
-		$modules_mock = $this->createMock( Modules::class );
-		$modules_mock->expects( $this->once() )
-			->method( 'is_active' )
-			->willReturn( true );
+			$modules_mock = $this->createMock( Modules::class );
+			$modules_mock->expects( $this->once() )
+				->method( 'is_active' )
+				->with( Account_Protection::ACCOUNT_PROTECTION_MODULE_NAME )
+				->willReturn( true );
 
-		$modules_mock->expects( $this->never() )
-			->method( 'activate' );
+			$modules_mock->expects( $this->never() )
+				->method( 'activate' );
 
-		$settings = ( new Settings( $modules_mock ) )->get();
+			$settings = ( new Settings( new Account_Protection( $modules_mock ) ) )->get();
 
-		$this->assertTrue( $settings['isSupported'] );
-		$this->assertTrue( $settings['isEnabled'] );
+			$this->assertTrue( $settings['isSupported'] );
+			$this->assertTrue( $settings['isEnabled'] );
 	}
 }
diff --git a/projects/plugins/protect/src/js/routes/settings/index.jsx b/projects/plugins/protect/src/js/routes/settings/index.jsx
@@ -4,6 +4,8 @@ import {
 	Text,
 	ToggleControl,
 	AdminSectionHero,
+	Notice,
+	Button,
 } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -42,16 +44,39 @@ const SettingsPage = () => {
 		<div className={ styles[ 'toggle-section' ] }>
 			<div className={ styles[ 'toggle-section__control' ] }>
 				<ToggleControl
-					checked={ accountProtection.isEnabled }
+					checked={ accountProtection.isSupported && accountProtection.isEnabled }
 					onChange={ toggleAccountProtection }
-					disabled={ toggleAccountProtectionMutation.isPending }
+					disabled={ ! accountProtection.isSupported || toggleAccountProtectionMutation.isPending }
 				/>
 			</div>
 			<div className={ styles[ 'toggle-section__content' ] }>
-				<Text variant="title-medium" mb={ 2 }>
-					{ __( 'Account protection', 'jetpack-protect' ) }
-				</Text>
-				<Text mb={ 2 } className={ styles[ 'toggle-section__description' ] }>
+				<Text variant="title-medium">{ __( 'Account protection', 'jetpack-protect' ) }</Text>
+				{ ! accountProtection.isSupported && (
+					<Notice
+						level="warning"
+						hideCloseButton={ true }
+						className={ styles[ 'toggle-section__alert' ] }
+						title={
+							<Text>
+								{ __(
+									'This feature has been disabled by your site administrator or hosting provider.',
+									'jetpack-protect'
+								) }
+							</Text>
+						}
+						actions={ [
+							<Button
+								variant="link"
+								isExternalLink
+								href={ '#' } // TODO: Update this redirect URL once document exists
+								key="learn-more"
+							>
+								{ __( 'Learn more', 'jetpack-protect' ) }
+							</Button>,
+						] }
+					/>
+				) }
+				<Text className={ styles[ 'toggle-section__description' ] }>
 					{ createInterpolateElement(
 						__(
 							'Enabling this setting enhances account security by detecting compromised passwords and enforcing additional verification when needed. Learn more about <link>how this protects your site</link>.',
@@ -62,18 +87,18 @@ const SettingsPage = () => {
 						}
 					) }
 				</Text>
-				<Text mb={ 2 }>
+				<Text>
 					{ __(
 						'Protect your site with advanced password detection and profile management protection.',
 						'jetpack-protect'
 					) }
 				</Text>
-				{ ! accountProtection.isEnabled && (
+				{ ! accountProtection.isEnabled && accountProtection.isSupported && (
 					<Text className={ styles[ 'toggle-section__info' ] }>
 						<Icon icon={ info } />
 						{ createInterpolateElement(
 							__(
-								'Jetpack recommends activating this setting. Please be <link>mindful of the risks.</link>',
+								'Jetpack recommends enabling this feature. <link>Learn about the risks.</link>',
 								'jetpack-protect'
 							),
 							{

diff --git a/projects/plugins/protect/src/js/routes/settings/styles.module.scss b/projects/plugins/protect/src/js/routes/settings/styles.module.scss
@@ -21,6 +21,9 @@
 
     &__content {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
     }
 
     &__description,