[DDW-170] Improved Password input #140

DominikGuzei · 2020-05-27T18:38:46Z

This PR improves the previous implementation of the PasswordInput component to include a configurable password strength algorithm based on basic string entropy:

Included Features:

Configurable, entropy based password strength algorithm
4 different controllable (or dynamically chosen) states of the password input - default, insecure, weak, strong
Various UX options to control how the tooltips are shown: on hover, on focus, combined or always, debounced (only after initial user input is given etc.)
It's possible (though not perfectly beautiful yet) to render a password repeat mode (see example in Storybook)

nikolaglumac

@DominikGuzei great work 🎉
I have just one smaller concern - the text in the password field is not vertically centered - can you please check that out? 🙏

…nput-output-hk/react-polymorph into feature/ddw-733-improve-password-input

DominikGuzei · 2020-06-02T11:10:19Z

@nikolaglumac the text itself is vertically centered (this is just a standard Input component) but since the asteriks (*) are not vertically centered characters it appears a bit pushed up … the same happens on <Input type="password" …>

So this could only be fixed by not centering the input text, so that the asteriks appear to be centered vertically … I will try this with type="password" inputs

DominikGuzei · 2020-06-02T11:28:43Z

@nikolaglumac any password inputs should be vertically centered now 👍

nikolaglumac

Great work @DominikGuzei 💯

nikolaglumac · 2020-06-02T12:01:52Z

@a-rukin please check this out 🙏

alexander-rukin · 2020-06-02T12:09:23Z

font of tooltips is light now -> should be medium

alexander-rukin · 2020-06-02T12:17:31Z

few minor improvements:

lets add "border-radius: 1px;" for these progreses
for the ".SimplePasswordInput_indicator" lets add "top: -2px;" + "left: 1px;" + "width: calc(100% - 2px);"
it improves look and feel for these lines ))

DominikGuzei · 2020-06-02T19:31:33Z

@a-rukin styling issues should be fixed now 👍

alexander-rukin · 2020-06-03T10:37:53Z

does it make "medium font" default one?
It shouldn't be I think, as it will change the current tooltips

DominikGuzei · 2020-06-03T11:43:37Z

@a-rukin i refactored it so that only the password input tooltips are medium font now 👍

alexander-rukin · 2020-06-03T12:25:39Z

it should be "light"

alexander-rukin · 2020-06-04T14:29:18Z

@DominikGuzei ⬆️

DominikGuzei · 2020-06-05T09:17:48Z

@a-rukin great catch, fixed now 👍

* [DDW-829] Installs react-custom-scrollbars as dependency * [DDW-829] Creates ScrollBar component * [DDW-829] Creates SCROLLBAR identifier * [DDW-829] Creates ScrollBarSkin using react-custom-scrollbars package * [DDW-829] Exports ScrollBarSkin from index using identifier * [DDW-829] Changes render prop to children * [DDW-829] Adds SCROLLBAR_THEME_API * [DDW-829] Adds theme api export * [DDW-829] Creates SimpleScrollBar theme file * [DDW-829] Exports SimpleScrollBar theme file * [DDW-829] Adds configurable CSS vars to theme file * [DDW-829] Swaps className prop for style prop * [DDW-829] Adds ScrollBar story * [DDW-829] Fixes ScrollBar height issue * [DDW-829] Cleans up ScrollBar storybook styles * [DDW-829] Updates CHANGELOG * [DDW-829] Removes root class from ScrollBar's theme * [DDW-829] Adds optionHeight prop to Options component * [DDW-829] Adds optionHeight prop to OptionsSkin and fixes scroll bar height calculation * Add support for *.module.scss file name convention * [DDW-829] Adds big countries list for testing * [DDW-829] Use maintained custom scrollbars package * [DDW-829] Fixes ESLint warning in ScrollBar story * [DDW-829] Arranges ScrollBar scss vars in ABC order * [DDW-829] Makes ScrollBar thumb darker * [DDW-829] Fixes ESLint error in Autocomplete behavior tests * [DDW-829] Fix broken jest snapshots by using enzyme While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes) * [DDW-829] Updates CHANGELOG to include snapshot test refactoring * Prepares CHANGELOG for 0.9.2 release * 0.9.2 * 0.9.2-rc.1 * Fixes prepare-sass-files-for-publishing.js * 0.9.2-rc.2 * [DDW-733] Implement password input component * [DDW-733] Fixes ESLint warning * [DDW-733] Fixes flow error * [DDW-733] Fixes CSS variable names and adds comments to theme file * [DDW-733] Updates CHANGELOG * [DDW-1227] Fix options component dimensions (#135) * [DDW-1227] Introduce a fix for options fixed height * [DDW-1227] Add more optionHeight declarations * [DDW-1227] Fix typo * [DDW-1227] Add GlobalListeners mouse event on root element position * [DDW-1227] Fix flow issues * [DDW-1227] Update CHANGELOG * [DDW-1227] Update stoybook stories due to latest changes * [DDW-1227] CHANGELOG update * Prepare release 0.9.3 (#136) * Prepare release 0.9.3 * [DDW-246]: Eliminate usage of deprecated lifecycle methods (#138) * [DDW-246]: Eliminate usage of deprecated lifecycle methods * [DDW-246]: Restore single quote usage * [DDW-246]: Fix props type in tooltip component * [DDW-733] Refactor jest setup (#139) Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improved Password input (#140) * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Center password input asteriks vertically * [DDW-733] Refine indicator and tooltip styles * [DDW-733] Add theme var for tooltip font-family * [DDW-733] Fix tooltip default font-family Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * [DDW-170] Add dedicated flag for password repeats * 0.9.4-rc.8 * [DDW-170] Improve password repeat feature (#141) * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * 0.9.4 * Update changelog Co-authored-by: MarcusHurney <marcushurney@gmail.com> Co-authored-by: Danilo Prates <daniloprates@gmail.com> Co-authored-by: Tomislav Horaček <tomislav.horacek@thespian.hr> Co-authored-by: Yakov Karavelov <yakovkaravelov@users.noreply.github.com> Co-authored-by: Nikola Glumac <niglumac@gmail.com>

* [DDW-829] Installs react-custom-scrollbars as dependency * [DDW-829] Creates ScrollBar component * [DDW-829] Creates SCROLLBAR identifier * [DDW-829] Creates ScrollBarSkin using react-custom-scrollbars package * [DDW-829] Exports ScrollBarSkin from index using identifier * [DDW-829] Changes render prop to children * [DDW-829] Adds SCROLLBAR_THEME_API * [DDW-829] Adds theme api export * [DDW-829] Creates SimpleScrollBar theme file * [DDW-829] Exports SimpleScrollBar theme file * [DDW-829] Adds configurable CSS vars to theme file * [DDW-829] Swaps className prop for style prop * [DDW-829] Adds ScrollBar story * [DDW-829] Fixes ScrollBar height issue * [DDW-829] Cleans up ScrollBar storybook styles * [DDW-829] Updates CHANGELOG * [DDW-829] Removes root class from ScrollBar's theme * [DDW-829] Adds optionHeight prop to Options component * [DDW-829] Adds optionHeight prop to OptionsSkin and fixes scroll bar height calculation * Add support for *.module.scss file name convention * [DDW-829] Adds big countries list for testing * [DDW-829] Use maintained custom scrollbars package * [DDW-829] Fixes ESLint warning in ScrollBar story * [DDW-829] Arranges ScrollBar scss vars in ABC order * [DDW-829] Makes ScrollBar thumb darker * [DDW-829] Fixes ESLint error in Autocomplete behavior tests * [DDW-829] Fix broken jest snapshots by using enzyme While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes) * [DDW-829] Updates CHANGELOG to include snapshot test refactoring * Prepares CHANGELOG for 0.9.2 release * 0.9.2 * 0.9.2-rc.1 * Fixes prepare-sass-files-for-publishing.js * 0.9.2-rc.2 * [DDW-733] Implement password input component * [DDW-733] Fixes ESLint warning * [DDW-733] Fixes flow error * [DDW-733] Fixes CSS variable names and adds comments to theme file * [DDW-733] Updates CHANGELOG * [DDW-1227] Fix options component dimensions (#135) * [DDW-1227] Introduce a fix for options fixed height * [DDW-1227] Add more optionHeight declarations * [DDW-1227] Fix typo * [DDW-1227] Add GlobalListeners mouse event on root element position * [DDW-1227] Fix flow issues * [DDW-1227] Update CHANGELOG * [DDW-1227] Update stoybook stories due to latest changes * [DDW-1227] CHANGELOG update * Prepare release 0.9.3 (#136) * Prepare release 0.9.3 * [DDW-246]: Eliminate usage of deprecated lifecycle methods (#138) * [DDW-246]: Eliminate usage of deprecated lifecycle methods * [DDW-246]: Restore single quote usage * [DDW-246]: Fix props type in tooltip component * [DDW-733] Refactor jest setup (#139) Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improved Password input (#140) * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Center password input asteriks vertically * [DDW-733] Refine indicator and tooltip styles * [DDW-733] Add theme var for tooltip font-family * [DDW-733] Fix tooltip default font-family Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * [DDW-170] Add dedicated flag for password repeats * 0.9.4-rc.8 * [DDW-170] Improve password repeat feature (#141) * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> * Bump elliptic from 6.4.0 to 6.5.3 (#144) Bumps [elliptic](https://github.com/indutny/elliptic) from 6.4.0 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](indutny/elliptic@v6.4.0...v6.5.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [issue-145] Remove deprecated postinstall-build package (#146) * [issue-145] Remove deprecated postinstall-build package * [issue-145] Update changelog * 0.9.5-rc.1 * Bump lodash.merge from 4.6.1 to 4.6.2 (#148) Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump node-sass from 4.13.0 to 4.13.1 (#147) Bumps [node-sass](https://github.com/sass/node-sass) from 4.13.0 to 4.13.1. - [Release notes](https://github.com/sass/node-sass/releases) - [Changelog](https://github.com/sass/node-sass/blob/master/CHANGELOG.md) - [Commits](sass/node-sass@v4.13.0...v4.13.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Dominik Guzei <dominik.guzei@gmail.com> * 0.9.5 Co-authored-by: MarcusHurney <marcushurney@gmail.com> Co-authored-by: Danilo Prates <daniloprates@gmail.com> Co-authored-by: Tomislav Horaček <tomislav.horacek@thespian.hr> Co-authored-by: Yakov Karavelov <yakovkaravelov@users.noreply.github.com> Co-authored-by: Nikola Glumac <niglumac@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

DominikGuzei added 2 commits May 27, 2020 14:57

[DDW-733] Refactor jest setup

f01ad70

[DDW-733] Implement advanced password input

c84d71f

DominikGuzei added the feature label May 27, 2020

DominikGuzei requested a review from a team May 27, 2020 18:38

DominikGuzei self-assigned this May 27, 2020

DominikGuzei changed the title ~~Feature/ddw 733 improve password input~~ [DDW-170] Improved Password input May 27, 2020

Merge branch 'develop' into feature/ddw-733-improve-password-input

37095fc

nikolaglumac suggested changes Jun 1, 2020

View reviewed changes

DominikGuzei added 3 commits June 2, 2020 12:59

[DDW-733] Refactor jest setup

24250ed

[DDW-733] Implement advanced password input

571abea

Merge branch 'feature/ddw-733-improve-password-input' of github.com:i…

b3d254d

…nput-output-hk/react-polymorph into feature/ddw-733-improve-password-input

[DDW-733] Center password input asteriks vertically

7fe8d11

nikolaglumac requested a review from alexander-rukin June 2, 2020 12:01

nikolaglumac previously approved these changes Jun 2, 2020

View reviewed changes

[DDW-733] Refine indicator and tooltip styles

a4e2fdc

DominikGuzei dismissed nikolaglumac’s stale review via a4e2fdc June 2, 2020 19:31

[DDW-733] Add theme var for tooltip font-family

5b6ece9

[DDW-733] Fix tooltip default font-family

a2fc721

alexander-rukin approved these changes Jun 5, 2020

View reviewed changes

DominikGuzei merged commit a0dc895 into develop Jun 5, 2020

DominikGuzei deleted the feature/ddw-733-improve-password-input branch June 5, 2020 09:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DDW-170] Improved Password input #140

[DDW-170] Improved Password input #140

DominikGuzei commented May 27, 2020 •

edited

Loading

nikolaglumac left a comment

DominikGuzei commented Jun 2, 2020 •

edited

Loading

DominikGuzei commented Jun 2, 2020

nikolaglumac left a comment

nikolaglumac commented Jun 2, 2020

alexander-rukin commented Jun 2, 2020

alexander-rukin commented Jun 2, 2020

DominikGuzei commented Jun 2, 2020

alexander-rukin commented Jun 3, 2020

DominikGuzei commented Jun 3, 2020

alexander-rukin commented Jun 3, 2020

alexander-rukin commented Jun 4, 2020

DominikGuzei commented Jun 5, 2020

[DDW-170] Improved Password input #140

[DDW-170] Improved Password input #140

Conversation

DominikGuzei commented May 27, 2020 • edited Loading

nikolaglumac left a comment

Choose a reason for hiding this comment

DominikGuzei commented Jun 2, 2020 • edited Loading

DominikGuzei commented Jun 2, 2020

nikolaglumac left a comment

Choose a reason for hiding this comment

nikolaglumac commented Jun 2, 2020

alexander-rukin commented Jun 2, 2020

alexander-rukin commented Jun 2, 2020

DominikGuzei commented Jun 2, 2020

alexander-rukin commented Jun 3, 2020

DominikGuzei commented Jun 3, 2020

alexander-rukin commented Jun 3, 2020

alexander-rukin commented Jun 4, 2020

DominikGuzei commented Jun 5, 2020

DominikGuzei commented May 27, 2020 •

edited

Loading

DominikGuzei commented Jun 2, 2020 •

edited

Loading