forked from opensearch-project/security-dashboards-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create a password strength UI for security dashboards plugin (opensea…
…rch-project#1762) * Initial password strength bar Signed-off-by: Derek Ho <[email protected]> * save resolution Signed-off-by: Derek Ho <[email protected]> * make the bar look nice Signed-off-by: Derek Ho <[email protected]> * Updates according to UX Signed-off-by: Derek Ho <[email protected]> * Add yarn.lock Signed-off-by: Derek Ho <[email protected]> * Add step to install dependencies prior to building Signed-off-by: Derek Ho <[email protected]> * Lint Signed-off-by: Derek Ho <[email protected]> * Add tests Signed-off-by: Derek Ho <[email protected]> * Lint fix Signed-off-by: Derek Ho <[email protected]> * Add it for the self reset panel and fix spacing Signed-off-by: Derek Ho <[email protected]> * Lint Signed-off-by: Derek Ho <[email protected]> * Remove warning Signed-off-by: Derek Ho <[email protected]> * Update the color and padding Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]>
- Loading branch information
Showing
7 changed files
with
239 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"). | ||
| * You may not use this file except in compliance with the License. | ||
| * A copy of the License is located at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * or in the "license" file accompanying this file. This file is distributed | ||
| * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either | ||
| * express or implied. See the License for the specific language governing | ||
| * permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui'; | ||
| import React from 'react'; | ||
| import zxcvbn from 'zxcvbn'; | ||
|
|
||
| interface PasswordStrengthBarProps { | ||
| password: string; | ||
| } | ||
|
|
||
| export const PasswordStrengthBar = (props: PasswordStrengthBarProps) => { | ||
| const { password } = props; | ||
| const passwordStrength = zxcvbn(password); | ||
| const strength = passwordStrength.score; | ||
| let message; | ||
| let color; | ||
| switch (strength) { | ||
| case 0: | ||
| message = 'Very weak'; | ||
| color = 'danger'; | ||
| break; | ||
| case 1: | ||
| message = 'Weak'; | ||
| color = 'danger'; | ||
| break; | ||
| case 2: | ||
| message = 'Ok'; | ||
| color = 'warning'; | ||
| break; | ||
| case 3: | ||
| message = 'Strong'; | ||
| color = 'success'; | ||
| break; | ||
| case 4: | ||
| message = 'Very strong'; | ||
| color = 'success'; | ||
| break; | ||
| } | ||
|
|
||
| return ( | ||
| password && ( | ||
| <EuiFlexGroup direction="column" gutterSize="xs"> | ||
| <EuiFlexItem> | ||
| <EuiProgress | ||
| value={strength} | ||
| max={4} | ||
| size="m" | ||
| color={color} | ||
| valueText={message} | ||
| label={'Password strength'} | ||
| data-test-subj="password-strength-progress" | ||
| /> | ||
| </EuiFlexItem> | ||
| {passwordStrength.feedback.suggestions && ( | ||
| <EuiFlexItem> | ||
| <EuiText size="xs" data-test-subj="password-strength-feedback-suggestions"> | ||
| {passwordStrength.feedback.suggestions} | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| )} | ||
| <EuiSpacer size="s" /> | ||
| </EuiFlexGroup> | ||
| ) | ||
| ); | ||
| }; |
31 changes: 31 additions & 0 deletions
31
public/apps/configuration/utils/test/__snapshots__/password-strength-bar.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Password strength bar tests renders 1`] = ` | ||
| <EuiFlexGroup | ||
| direction="column" | ||
| gutterSize="xs" | ||
| > | ||
| <EuiFlexItem> | ||
| <EuiProgress | ||
| color="danger" | ||
| data-test-subj="password-strength-progress" | ||
| label="Password strength" | ||
| max={4} | ||
| size="m" | ||
| value={0} | ||
| valueText="Very weak" | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <EuiText | ||
| data-test-subj="password-strength-feedback-suggestions" | ||
| size="xs" | ||
| > | ||
| Add another word or two. Uncommon words are better. | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiSpacer | ||
| size="s" | ||
| /> | ||
| </EuiFlexGroup> | ||
| `; |
79 changes: 79 additions & 0 deletions
79
public/apps/configuration/utils/test/password-strength-bar.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"). | ||
| * You may not use this file except in compliance with the License. | ||
| * A copy of the License is located at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * or in the "license" file accompanying this file. This file is distributed | ||
| * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either | ||
| * express or implied. See the License for the specific language governing | ||
| * permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import { render, shallow } from 'enzyme'; | ||
| import React from 'react'; | ||
| import { PasswordStrengthBar } from '../password-strength-bar'; | ||
|
|
||
| describe('Password strength bar tests', () => { | ||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('renders', () => { | ||
| const component = shallow(<PasswordStrengthBar password="test" />); | ||
| expect(component).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('verifies feedback, warning for very weak password', () => { | ||
| const component = render(<PasswordStrengthBar password="test" />); | ||
|
|
||
| const suggestions = component.find('[data-test-subj="password-strength-feedback-suggestions"]'); | ||
| expect(suggestions.text()).toBe('Add another word or two. Uncommon words are better.'); | ||
|
|
||
| const score = component.find('[data-test-subj="password-strength-progress"]'); | ||
| expect(score.prop('value')).toBe('0'); // test is considered very weak | ||
| }); | ||
|
|
||
| it('verifies feedback, warning for weak password', () => { | ||
| const component = render(<PasswordStrengthBar password="test12" />); | ||
|
|
||
| const suggestions = component.find('[data-test-subj="password-strength-feedback-suggestions"]'); | ||
| expect(suggestions.text()).toBe('Add another word or two. Uncommon words are better.'); | ||
|
|
||
| const score = component.find('[data-test-subj="password-strength-progress"]'); | ||
| expect(score.prop('value')).toBe('1'); // test12 is considered weak | ||
| }); | ||
|
|
||
| it('verifies feedback, warning for an ok password', () => { | ||
| const component = render(<PasswordStrengthBar password="test124My" />); | ||
|
|
||
| const suggestions = component.find('[data-test-subj="password-strength-feedback-suggestions"]'); | ||
| expect(suggestions.text()).toBe('Add another word or two. Uncommon words are better.'); | ||
|
|
||
| const score = component.find('[data-test-subj="password-strength-progress"]'); | ||
| expect(score.prop('value')).toBe('2'); // test124My is considered ok | ||
| }); | ||
|
|
||
| it('verifies feedback, warning for a strong password', () => { | ||
| const component = render(<PasswordStrengthBar password="test124MyTable" />); | ||
|
|
||
| const suggestions = component.find('[data-test-subj="password-strength-feedback-suggestions"]'); | ||
| expect(suggestions.text()).toBe(''); | ||
|
|
||
| const score = component.find('[data-test-subj="password-strength-progress"]'); | ||
| expect(score.prop('value')).toBe('3'); // test124MyTable is considered strong | ||
| }); | ||
|
|
||
| it('verifies feedback, warning for very strong password', () => { | ||
| const component = render(<PasswordStrengthBar password="myStrongPassword123!" />); | ||
|
|
||
| const suggestions = component.find('[data-test-subj="password-strength-feedback-suggestions"]'); | ||
| expect(suggestions.text()).toBe(''); | ||
|
|
||
| const score = component.find('[data-test-subj="password-strength-progress"]'); | ||
| expect(score.prop('value')).toBe('4'); // myStrongPassword123! is considered very strong | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters