From 2830e9ffa9a352a5ab27ee140fa766fb069a82b7 Mon Sep 17 00:00:00 2001
From: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>
Date: Wed, 15 Jan 2025 11:22:24 -0300
Subject: [PATCH] Security Settings: Display actual password status

---
 client/me/security-checkup/password.jsx | 37 +++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/client/me/security-checkup/password.jsx b/client/me/security-checkup/password.jsx
index 8c237098c9ba8e..f4812ace70e309 100644
--- a/client/me/security-checkup/password.jsx
+++ b/client/me/security-checkup/password.jsx
@@ -1,7 +1,10 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { getOKIcon } from './icons.js';
+import { connect } from 'react-redux';
+import getUserSettings from 'calypso/state/selectors/get-user-settings';
+import hasUserSettings from 'calypso/state/selectors/has-user-settings';
+import { getOKIcon, getWarningIcon } from './icons.js';
 import SecurityCheckupNavigationItem from './navigation-item';
 
 class SecurityCheckupPassword extends Component {
@@ -9,17 +12,32 @@ class SecurityCheckupPassword extends Component {
 		translate: PropTypes.func.isRequired,
 	};
 
+	getDescriptionAndIcon() {
+		const { translate, userSettings } = this.props;
+
+		if ( userSettings.is_passwordless_user ) {
+			return {
+				description: translate( 'You do not have a password configured.' ),
+				materialIcon: getWarningIcon(),
+			};
+		}
+
+		return {
+			description: translate( 'You have a password configured, but can change it at any time.' ),
+			materialIcon: getOKIcon(),
+		};
+	}
+
 	render() {
-		const { translate } = this.props;
+		const { translate, areUserSettingsLoaded } = this.props;
 
-		const description = translate(
-			'You have a password configured, but can change it at any time.'
-		);
+		if ( ! areUserSettingsLoaded ) {
+			return <SecurityCheckupNavigationItem isPlaceholder />;
+		}
 
 		return (
 			<SecurityCheckupNavigationItem
-				description={ description }
-				materialIcon={ getOKIcon() }
+				{ ...this.getDescriptionAndIcon() }
 				path="/me/security/password"
 				text={ translate( 'Password' ) }
 			/>
@@ -27,4 +45,7 @@ class SecurityCheckupPassword extends Component {
 	}
 }
 
-export default localize( SecurityCheckupPassword );
+export default connect( ( state ) => ( {
+	areUserSettingsLoaded: hasUserSettings( state ),
+	userSettings: getUserSettings( state ),
+} ) )( localize( SecurityCheckupPassword ) );