Security Settings: Display actual password status

client/me/security-checkup/password.jsx

@@ -1,30 +1,51 @@
 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 {
 	static propTypes = {
 		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' ) }
 			/>
 		);
 	}
 }
 
-export default localize( SecurityCheckupPassword );
+export default connect( ( state ) => ( {
+	areUserSettingsLoaded: hasUserSettings( state ),
+	userSettings: getUserSettings( state ),
+} ) )( localize( SecurityCheckupPassword ) );