Skip to content

Use password message from /dashboardsinfo #1503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cwperks merged 7 commits into from
Jul 11, 2023
Merged

Use password message from /dashboardsinfo #1503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9a2cc26
Use password message from /dashboardsinfo
cwperks Jul 6, 2023
616f279
Run eslint --fix
cwperks Jul 6, 2023
d111e51
Remove unused attribute
cwperks Jul 6, 2023
f3f4148
Clean up test
cwperks Jul 6, 2023
6e1162e
Remove redundant mock
cwperks Jul 6, 2023
d3a6f5e
Removed TODO messages
cwperks Jul 6, 2023
c3db9d4
Merge branch 'main' into password-message
cwperks Jul 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion public/apps/account/password-reset-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { logout, updateNewPassword } from './utils';
import { PASSWORD_INSTRUCTION } from '../apps-constants';
Copy link
Collaborator

@RyanL1997 RyanL1997 Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this PASSWORD_INSTRUCTION, should we also update it so that it has the new password rules that introduced by the strong password validation feature?

Copy link
Collaborator

@RyanL1997 RyanL1997 Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just like this password_validation_error_message :

'Password must be minimum 5 characters long and must contain at least one uppercase letter, one lowercase letter, one digit, and one special character.'

Copy link
Member Author

@cwperks cwperks Jul 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point and needs to be updated on the backend as well. I'll adjust it according to the description on the PR that introduced password strength: opensearch-project/security#2557

plugins.security.restapi.password_min_length - minimum password length, default and minimum is 8

Copy link
Member Author

@cwperks cwperks Jul 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already properly set: https://github.com/opensearch-project/security-dashboards-plugin/blob/main/public/apps/apps-constants.tsx

Note: This default is duplicated and the frontend and backend. I decided to keep the value in the frontend, but it could certainly be removed from the frontend codebase in favor of just keeping a single reference on the backend.

Copy link
Contributor

@stephen-crawford stephen-crawford Jul 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this as a follow up PR to unblock your change.

import { constructErrorMessageAndLog } from '../error-utils';
import { validateCurrentPassword } from '../../utils/login-utils';
import { getDashboardsInfo } from '../../utils/dashboards-info-utils';

interface PasswordResetPanelProps {
coreStart: CoreStart;
Expand All @@ -57,6 +58,22 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {

const [errorCallOut, setErrorCallOut] = React.useState<string>('');

const [passwordHelpText, setPasswordHelpText] = React.useState<string>(PASSWORD_INSTRUCTION);

React.useEffect(() => {
const fetchData = async () => {
try {
setPasswordHelpText(
(await getDashboardsInfo(props.coreStart.http)).password_validation_error_message
);
} catch (e) {
console.error(e);
}
};

fetchData();
}, [props.coreStart.http]);

const handleReset = async () => {
const http = props.coreStart.http;
// validate the current password
Expand Down Expand Up @@ -107,7 +124,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {

<FormRow
headerText="New password"
helpText={PASSWORD_INSTRUCTION}
helpText={passwordHelpText}
isInvalid={isNewPasswordInvalid}
>
<EuiFieldPassword
Expand Down
6 changes: 5 additions & 1 deletion public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,11 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
setNameState={setUserName}
setIsFormValid={setIsFormValid}
/>
<PasswordEditPanel updatePassword={setPassword} updateIsInvalid={setIsPasswordInvalid} />
<PasswordEditPanel
coreStart={props.coreStart}
updatePassword={setPassword}
updateIsInvalid={setIsPasswordInvalid}
/>
</EuiForm>
</PanelWithHeader>
<EuiSpacer size="m" />
Expand Down
20 changes: 19 additions & 1 deletion public/apps/configuration/utils/password-edit-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,35 @@
*/

import React from 'react';
import { CoreStart } from 'opensearch-dashboards/public';
import { EuiFieldText, EuiIcon } from '@elastic/eui';
import { FormRow } from './form-row';
import { PASSWORD_INSTRUCTION } from '../../apps-constants';
import { getDashboardsInfo } from '../../../utils/dashboards-info-utils';

export function PasswordEditPanel(props: {
coreStart: CoreStart;
updatePassword: (p: string) => void;
updateIsInvalid: (v: boolean) => void;
}) {
const [password, setPassword] = React.useState<string>('');
const [repeatPassword, setRepeatPassword] = React.useState<string>('');
const [isRepeatPasswordInvalid, setIsRepeatPasswordInvalid] = React.useState<boolean>(false);
const [passwordHelpText, setPasswordHelpText] = React.useState<string>(PASSWORD_INSTRUCTION);

React.useEffect(() => {
const fetchData = async () => {
try {
setPasswordHelpText(
(await getDashboardsInfo(props.coreStart.http)).password_validation_error_message
);
} catch (e) {
console.error(e);
}
};

fetchData();
}, [props.coreStart.http]);

React.useEffect(() => {
props.updatePassword(password);
Expand All @@ -43,7 +61,7 @@ export function PasswordEditPanel(props: {

return (
<>
<FormRow headerText="Password" helpText={PASSWORD_INSTRUCTION}>
<FormRow headerText="Password" helpText={passwordHelpText}>
<EuiFieldText
data-test-subj="password"
prepend={<EuiIcon type="lock" />}
Expand Down
58 changes: 51 additions & 7 deletions public/apps/configuration/utils/test/password-edit-panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,24 @@
* permissions and limitations under the License.
*/

import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import React from 'react';
import { PasswordEditPanel } from '../password-edit-panel';
import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';

const mockDashboardsInfo = {
multitenancy_enabled: true,
private_tenant_enabled: true,
default_tenant: '',
password_validation_error_message:
'Password must be minimum 5 characters long and must contain at least one uppercase letter, one lowercase letter, one digit, and one special character.',
};

jest.mock('../../../../utils/dashboards-info-utils', () => ({
getDashboardsInfo: jest.fn().mockImplementation(() => {
return mockDashboardsInfo;
}),
}));

describe('Password edit panel', () => {
let component;
Expand All @@ -24,21 +39,43 @@ describe('Password edit panel', () => {
const updateIsInvalid = jest.fn();
const useState = jest.spyOn(React, 'useState');
const useEffect = jest.spyOn(React, 'useEffect');
const mockCoreStart = {
http: 1,
};

beforeEach(() => {
useEffect.mockImplementationOnce((f) => f());
useState.mockImplementation((initialValue) => [initialValue, setState]);
component = shallow(
<PasswordEditPanel updatePassword={updatePassword} updateIsInvalid={updateIsInvalid} />
);
});

it('renders', () => {
expect(updatePassword).toHaveBeenCalledTimes(1);
expect(updateIsInvalid).toHaveBeenCalledTimes(1);
afterEach(() => {
jest.clearAllMocks();
});

it('renders', (done) => {
mount(
<PasswordEditPanel
coreStart={mockCoreStart as any}
updatePassword={updatePassword}
updateIsInvalid={updateIsInvalid}
/>
);
process.nextTick(() => {
expect(updatePassword).toHaveBeenCalledTimes(1);
expect(updateIsInvalid).toHaveBeenCalledTimes(1);
expect(setState).toBeCalledWith(mockDashboardsInfo.password_validation_error_message);
done();
});
});

it('password field update', () => {
component = shallow(
<PasswordEditPanel
coreStart={mockCoreStart as any}
updatePassword={updatePassword}
updateIsInvalid={updateIsInvalid}
/>
);
const event = {
target: { value: 'dummy' },
} as React.ChangeEvent<HTMLInputElement>;
Expand All @@ -47,6 +84,13 @@ describe('Password edit panel', () => {
});

it('repeat password field update', () => {
component = shallow(
<PasswordEditPanel
coreStart={mockCoreStart as any}
updatePassword={updatePassword}
updateIsInvalid={updateIsInvalid}
/>
);
const event = {
target: { value: 'dummy' },
} as React.ChangeEvent<HTMLInputElement>;
Expand Down
1 change: 1 addition & 0 deletions public/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface DashboardsInfo {
multitenancy_enabled?: boolean;
private_tenant_enabled?: boolean;
default_tenant: string;
password_validation_error_message: string;
}

export interface ClientConfigType {
Expand Down