From b85deb72bd2b6639fef85c4a4286f43032002fd9 Mon Sep 17 00:00:00 2001 From: Manideep Pabba <109986843+mpabba3003@users.noreply.github.com> Date: Mon, 10 Oct 2022 15:29:17 -0500 Subject: [PATCH] [MD] new UX changes for password fields and update password modal in data source management (#2532) * nex ux changes for password fields and update password modal in data source management Signed-off-by: mpabba3003 * update change log Signed-off-by: mpabba3003 Signed-off-by: mpabba3003 (cherry picked from commit 9f6bfc01d94e4100e790857985bf2e1b648160af) --- CHANGELOG.md | 1 + .../edit_form/edit_data_source_form.tsx | 5 +- .../update_password_modal.tsx | 72 ++++++++++++++++--- .../components/text_content/text_content.ts | 21 +++++- 4 files changed, 89 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1d6dc1a692b..38f4c7c179c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,6 +51,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) * [Viz Builder] State validation before dispatching and loading ([#2351](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2351)) * [Multi DataSource] UX enhacement on index pattern management stack ([#2505]https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2505)) * [Multi DataSource] UX enhancement on Data source management stack ([#2521](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2521)) +* [Multi DataSource] UX enhancement on Update stored password modal for Data source management stack ([#2532](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2532)) ### 🐛 Bug Fixes diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx index 3edc2b1b7371..424d4cb9f5a8 100644 --- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx +++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx @@ -9,6 +9,7 @@ import { EuiButton, EuiButtonEmpty, EuiDescribedFormGroup, + EuiFieldPassword, EuiFieldText, EuiFlexGroup, EuiFlexItem, @@ -459,8 +460,9 @@ export class EditDataSourceForm extends React.Component - {this.props.existingDataSource.auth.type !== AuthType.NoAuth ? ( diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/update_password_modal/update_password_modal.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/update_password_modal/update_password_modal.tsx index a77e67f148ad..5e7307abc7db 100644 --- a/src/plugins/data_source_management/public/components/edit_data_source/components/update_password_modal/update_password_modal.tsx +++ b/src/plugins/data_source_management/public/components/edit_data_source/components/update_password_modal/update_password_modal.tsx @@ -15,9 +15,18 @@ import { EuiModalFooter, EuiModalHeader, EuiModalHeaderTitle, + EuiSpacer, EuiText, } from '@elastic/eui'; -import { NEW_PASSWORD_TEXT, UPDATE_STORED_PASSWORD, USERNAME } from '../../../text_content'; +import { + CANCEL_TEXT, + CONFIRM_NEW_PASSWORD_TEXT, + NEW_PASSWORD_TEXT, + PASSWORD_NO_MATCH, + UPDATE_STORED_PASSWORD, + UPDATE_STORED_PASSWORD_DESCRIPTION, + USERNAME, +} from '../../../text_content'; export interface UpdatePasswordModalProps { username: string; @@ -32,13 +41,34 @@ export const UpdatePasswordModal = ({ }: UpdatePasswordModalProps) => { /* State Variables */ const [newPassword, setNewPassword] = useState(''); + const [confirmNewPassword, setConfirmNewPassword] = useState(''); + const [isNewPasswordValid, setIsNewPasswordValid] = useState(true); + const [isConfirmNewPasswordValid, setIsConfirmNewPasswordValid] = useState([]); const onClickUpdatePassword = () => { - if (!!newPassword) { + if (isFormValid()) { handleUpdatePassword(newPassword); } }; + const isFormValid = () => { + return !!(newPassword && confirmNewPassword && confirmNewPassword === newPassword); + }; + + const validateNewPassword = () => { + setIsNewPasswordValid(!!newPassword); + }; + + const validateConfirmNewPassword = () => { + const invalidReason: string[] = []; + if (!confirmNewPassword) { + invalidReason.push(''); + } else if (confirmNewPassword !== newPassword) { + invalidReason.push(PASSWORD_NO_MATCH); + } + setIsConfirmNewPasswordValid(invalidReason); + }; + const renderUpdatePasswordModal = () => { return ( @@ -49,33 +79,59 @@ export const UpdatePasswordModal = ({ + + + {UPDATE_STORED_PASSWORD_DESCRIPTION} + + + + {/* Username */} {username} - {/* Password */} - + {/* updated Password */} + setNewPassword(e.target.value)} + onBlur={validateNewPassword} + /> + + {/* Password */} + + setConfirmNewPassword(e.target.value)} + onBlur={validateConfirmNewPassword} /> - Cancel + {CANCEL_TEXT} - Update + {UPDATE_STORED_PASSWORD} diff --git a/src/plugins/data_source_management/public/components/text_content/text_content.ts b/src/plugins/data_source_management/public/components/text_content/text_content.ts index 56a2ea93be15..8cf536c72fa5 100644 --- a/src/plugins/data_source_management/public/components/text_content/text_content.ts +++ b/src/plugins/data_source_management/public/components/text_content/text_content.ts @@ -163,7 +163,19 @@ export const DELETE_THIS_DATA_SOURCE = i18n.translate( export const NEW_PASSWORD_TEXT = i18n.translate( 'dataSourcesManagement.editDataSource.newPassword', { - defaultMessage: 'New password', + defaultMessage: 'Updated password', + } +); +export const CONFIRM_NEW_PASSWORD_TEXT = i18n.translate( + 'dataSourcesManagement.editDataSource.confirmNewPassword', + { + defaultMessage: 'Confirm Updated password', + } +); +export const PASSWORD_NO_MATCH = i18n.translate( + 'dataSourcesManagement.editDataSource.passwordNoMatch', + { + defaultMessage: 'Passwords do not match', } ); export const UPDATE_STORED_PASSWORD = i18n.translate( @@ -172,6 +184,13 @@ export const UPDATE_STORED_PASSWORD = i18n.translate( defaultMessage: 'Update stored password', } ); +export const UPDATE_STORED_PASSWORD_DESCRIPTION = i18n.translate( + 'dataSourcesManagement.editDataSource.updateStoredPasswordDescription', + { + defaultMessage: + 'Update credential password to reflect accurate password to gain access to the endpoint.', + } +); export const CONNECTION_DETAILS_TITLE = i18n.translate( 'dataSourcesManagement.editDataSource.connectionDetailsText', {