-
Notifications
You must be signed in to change notification settings - Fork 12
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.
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
fix(ValidFieldPassword)/adding data-qa-id and data-qa-props for password strength #90
fix(ValidFieldPassword)/adding data-qa-id and data-qa-props for password strength #90
Conversation
@@ -27,6 +27,9 @@ export interface ValidFieldPasswordProps extends Omit<ValidFieldTextProps, "type | |||
customPattern?: string; | |||
hasPasswordStrengthMeter?: boolean; | |||
zxcvbnOption?: OptionsType; | |||
dataQaPasswordStrength?: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could we make it as one object so that we won't have to add plenty of dataQa props? what i mean is like
type DataQa: string | null
interface StrengthMeterDataQa {
bar:? DataQa
barProps?: DataQa
label?: DataQa
}
interface ValidFieldPasswordProps {
...
strengthMeterDataQa?: StrengthMeterDataQa
}
wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think this is better approach
will implement it
a02c405
to
2f18765
Compare
{Object.keys(PASSWORD_STRENGTH_METER).map((strengthLevel, index) => ( | ||
<div | ||
key={`bar-${strengthLevel}`} | ||
className={classNames("bar", { fill: index <= passwordStrengthScore })} | ||
data-qa-props={passwordStrengthDataQa && `${passwordStrengthDataQa.barProps}-${index}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
passwordStrengthDataQa.barProps && ...
?
const { passwordStrengthScore } = this.state; | ||
const strengtLevelText = this.getStrengthLevelBasedOnScore(passwordStrengthScore); | ||
return ( | ||
<> | ||
{hasPasswordStrengthMeter && passwordStrengthScore !== null && ( | ||
<div className="password-strength-meter"> | ||
<div className={classNames("strength-meter-bar", strengtLevelText)}> | ||
<div className={classNames("strength-meter-bar", strengtLevelText)} data-qa-id={passwordStrengthDataQa && passwordStrengthDataQa.bar}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
optional chaining?
/> | ||
))} | ||
</div> | ||
<span className={classNames("strength-meter-label")}>{translation("password.strength.label")}</span> | ||
<span className={classNames("strength-meter-level", strengtLevelText)}> | ||
<span className={classNames("strength-meter-level", strengtLevelText)} data-qa-id={passwordStrengthDataQa && passwordStrengthDataQa.label}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
optional chaining?
…ord strength #minor
2f18765
to
c321444
Compare
No description provided.