feat(ValidFieldPassword): add password strength meter #minor #84

aylwin-AB · 2022-08-31T04:29:18Z

add password strength meter at ValidFieldPassword, add props hasPasswordStrenghtMeter to show password strength meter

use package https://www.npmjs.com/package/zxcvbn, for determined the password strenght based on research on ticket https://accelbyte.atlassian.net/browse/OS-7353?focusedCommentId=150602

ticket https://accelbyte.atlassian.net/browse/OS-7368
design https://www.figma.com/file/WDZgiufhRsCbUWosWVXsDXUa/Login-Web?node-id=6527%3A4760

rayhan-ab · 2022-08-31T04:36:09Z

package.json

@@ -30,7 +30,8 @@
    "react-datetime": "^2.16.3",
    "react-select-async-paginate": "^0.6.1",
    "react-tooltip": "^3.6.1",
-    "styled-components": "^3.2.6"
+    "styled-components": "^3.2.6",
+    "zxcvbn": "^4.4.2"


afaik this library size is big. is it possible to use another library?

we already agree to use this lib, what is the size if I may know

799kb minified and 388kb minified + gzipped

@yanuaracb let me know if this is unacceptable, please see the research conclusion here https://accelbyte.atlassian.net/browse/OS-7353?focusedCommentId=150602

Thank you @rayhan-ab for raising this

if it's not possible to use another library. could we lazy load this? so that it'll only be loaded if hasPasswordStrenghtMeter is true

btw i found zxcvbn-ts and it's actively maintained. maybe you could take a look @aylwin-AB

the size is a valid concern, please lazy load it.
zxcvbn-ts looks promising nice find @rayhan-ab , maybe worth to compare since they state it's modernized version of zxcvbn @aylwin-AB

nice find @rayhan-ab, it's small too https://bundlephobia.com/package/@zxcvbn-ts/[email protected], I will try that one

after try that package seems like it use the same function but break down the dictionary list, need to add this @zxcvbn-ts/[email protected] too but it's not that big

rayhan-ab · 2022-08-31T04:40:00Z

src/components/ValidatedInput/ValidFieldPassword.tsx

@@ -18,24 +18,31 @@ import { Button } from "../Button";
 import { translation } from "../../utils/i18n";
 import "../../styles/icons/fa_icons.css";
 import DOMPurify from "dompurify";
+import zxcvbn from "zxcvbn";
+import { Enum } from "../../types";

 export interface ValidFieldPasswordProps extends Omit<ValidFieldTextProps, "type" | "rightIcon" | "isFloat"> {
  strengthLevelIndicator?: keyof typeof strengthLevelOrder;


i think strengthLevelIndicator will no longer be used. please remove this.

there still one component using this props on AP, I think we can remove it when we really do clean up and make sure we really not using it

that one component is not used at all in AP, man. plus, it's only one, it should be easy to clean it up.

I see, ok let me try to clean it up

rayhan-ab · 2022-08-31T04:41:45Z

src/utils/i18n/translations/en-US.json

+  "password.strength.level.weak": "Weak",
+  "password.strength.level.fair": "Fair",
+  "password.strength.level.strong": "Strong",
+  "password.strength.level.very-strong": "Very Strong",
  "password.generateNew": "Generate new password",
  "password.poor": "Poor!",


please remove the old password strength translations

rayhan-ab · 2022-08-31T04:42:39Z

src/components/ValidatedInput/ValidFieldPassword.tsx

+    const { onChange } = this.props;
+    if (onChange) onChange(event);
+    if (!event.target.value) return this.setState({ passwordStrenghtLevel: null });
+    const { score } = zxcvbn(event.target.value);


return immediately if hasPasswordStrenghtMeter is false

I was thinking to keep the strenght state updated so when hasPasswordStrenghtMeter set from false to true it will get the strenght and show it. but I change it so when the hasPasswordStrenghtMeter change from false to true it will calculate password strength.

Thank you for catching this

rayhan-ab · 2022-08-31T05:43:16Z

seems like you update too many lines in changelog due to auto format sir. maybe you could turn it off first before saving your change in changelog

rayhan-ab · 2022-08-31T05:48:03Z

src/components/ValidatedInput/ValidFieldPassword.tsx

-        levelColor: props.strengthLevelIndicator,
-      };
+  componentDidUpdate(prevProps: ValidFieldPasswordProps) {
+    const { hasPasswordStrenghtMeter } = this.props;


typo here. should be strength not strenght

rayhan-ab · 2022-08-31T05:49:05Z

src/components/ValidatedInput/ValidFieldPassword.tsx

        {customField}
      </>
    );
  };

+  calculatePasswordStrenght = (password: string) => {


typo here. should be strength not strenght

rayhan-ab · 2022-08-31T05:54:10Z

src/constants/password.ts

@@ -8,4 +8,4 @@

 import { Enum } from "../types";

-export const strengthLevelOrder = Enum("poor", "weak", "average", "good", "excellent");
+export const PASSWORD_STRENGTH_METER = Enum("very-weak", "weak", "fair", "strong", "very-strong");


could we use camel case instead of kebab case so that it'll be easier to use it?

rayhan-ab · 2022-08-31T05:58:42Z

src/components/ValidatedInput/ValidFieldPassword.tsx

+    if (onChange) onChange(event);
+    if (!hasPasswordStrenghtMeter) return;
+    if (!event.target.value) return this.setState({ passwordStrenghtLevel: null });
+    this.calculatePasswordStrenght(event.target.value);


please consider this issue. seems like we need to debounce calculate password strength

I have mention this on the kick off meeting and it seems only happen on that special character being copy paste some time, it seems fine for now we can update the packages when they fix it..

also I will try the zxcvbn-ts that you mention hopefully they don't have this bug

unfortunately this issue still happen at zxcvbn-ts I'm adding debounce

rayhan-ab · 2022-08-31T09:31:46Z

i think it's more like a minor change rather than patch because even though we only update one component, the update is kinda big, involving a new library and deprecating a prop. wdyt? @aylwin-AB

rayhan-ab · 2022-08-31T09:35:18Z

src/components/ValidatedInput/ValidFieldPassword.tsx

  toolTipIconEye = React.createRef<HTMLElement>();

  componentDidMount() {
    setTimeout(() => {
      ReactTooltip.rebuild();
    }, 100);
+    const options = {


return immediately if hasPasswordStrenghtMeter is false?

rayhan-ab · 2022-08-31T10:01:14Z

src/components/ValidatedInput/ValidFieldPassword.scss

+      border-radius: 4px;
+      margin: 10px 0;
+      .bar {
+        background-color: $base-120;


after taking a look in my local, i think it's too dark and it's hard to distinguish the filled and unfilled bar. could we have a lighter color for the unfilled one?

after checking again, i think it's different from the figma design

rayhan-ab · 2022-08-31T10:04:50Z

src/components/ValidatedInput/ValidFieldPassword.scss

+      border-radius: 4px;
+      margin: 10px 0;
+      .bar {
+        background-color: $base-120;


after checking again, i think it's different from the figma design

aylwin-AB requested review from aris-fm, yanuaracb, rayhan-ab, aziz-zen-ab and andrinuryawan August 31, 2022 04:29

aylwin-AB force-pushed the OS-7368-fe-ui-libap-implement-password-s branch from 45b9a0e to 0149d06 Compare August 31, 2022 04:34

rayhan-ab reviewed Aug 31, 2022

View reviewed changes

aylwin-AB force-pushed the OS-7368-fe-ui-libap-implement-password-s branch from 0149d06 to fe09d05 Compare August 31, 2022 05:21

rayhan-ab reviewed Aug 31, 2022

View reviewed changes

aylwin-AB force-pushed the OS-7368-fe-ui-libap-implement-password-s branch from fe09d05 to 14264a2 Compare August 31, 2022 09:26

aylwin-AB requested a review from rayhan-ab August 31, 2022 09:30

rayhan-ab reviewed Aug 31, 2022

View reviewed changes

rayhan-ab approved these changes Aug 31, 2022

View reviewed changes

rayhan-ab reviewed Aug 31, 2022

View reviewed changes

rayhan-ab requested changes Aug 31, 2022

View reviewed changes

aylwin-AB force-pushed the OS-7368-fe-ui-libap-implement-password-s branch from 14264a2 to d0386b5 Compare September 1, 2022 01:39

feat(ValidFieldPassword): add password strength meter #minor

e9bd68c

rayhan-ab force-pushed the OS-7368-fe-ui-libap-implement-password-s branch from d0386b5 to e9bd68c Compare September 1, 2022 01:50

rayhan-ab changed the title ~~feat(ValidFieldPassword): add password strength meter #patch~~ feat(ValidFieldPassword): add password strength meter #minor Sep 1, 2022

aylwin-AB requested a review from rayhan-ab September 1, 2022 02:49

rayhan-ab approved these changes Sep 1, 2022

View reviewed changes

andrinuryawan approved these changes Sep 1, 2022

View reviewed changes

aylwin-AB merged commit 71414a1 into master Sep 1, 2022

aylwin-AB deleted the OS-7368-fe-ui-libap-implement-password-s branch September 1, 2022 06:57

aylwin-AB mentioned this pull request Sep 2, 2022

feat(password-strength): Added password-stregth library, containing … AccelByte/justice-js-common-utils#38

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ValidFieldPassword): add password strength meter #minor #84

feat(ValidFieldPassword): add password strength meter #minor #84

aylwin-AB commented Aug 31, 2022 •

edited

Loading

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

rayhan-ab Aug 31, 2022

yanuaracb Aug 31, 2022

aylwin-AB Aug 31, 2022 •

edited

Loading

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab commented Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab Aug 31, 2022

aylwin-AB Aug 31, 2022

aylwin-AB Aug 31, 2022

rayhan-ab commented Aug 31, 2022

rayhan-ab Aug 31, 2022

rayhan-ab Aug 31, 2022

rayhan-ab Aug 31, 2022

rayhan-ab Aug 31, 2022

feat(ValidFieldPassword): add password strength meter #minor #84

feat(ValidFieldPassword): add password strength meter #minor #84

Conversation

aylwin-AB commented Aug 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aylwin-AB Aug 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rayhan-ab commented Aug 31, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rayhan-ab commented Aug 31, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aylwin-AB commented Aug 31, 2022 •

edited

Loading

aylwin-AB Aug 31, 2022 •

edited

Loading