Skip to content
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

Hide password strength message when the password is valid #1382

Merged
merged 2 commits into from
May 28, 2018
Merged

Hide password strength message when the password is valid #1382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d31cc77
Hide password strength message when the password is valid
luisrudge May 25, 2018
3f46992
tyop and missing test case
luisrudge May 28, 2018
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
44 changes: 44 additions & 0 deletions src/__tests__/field/__snapshots__/password_pane.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ exports[`PasswordPane disables input when submitting 1`] = `
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={false}
data-strengthMessages={Object {}}
data-value="password"
/>
Expand All @@ -53,6 +54,7 @@ exports[`PasswordPane renders correctly 1`] = `
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={false}
data-strengthMessages={Object {}}
data-value="password"
/>
Expand All @@ -72,6 +74,7 @@ exports[`PasswordPane renders correctly when \`allowShowPassword\` is true 1`] =
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={false}
data-strengthMessages={Object {}}
data-value="password"
/>
Expand Down Expand Up @@ -104,6 +107,47 @@ exports[`PasswordPane sets isValid as true when \`isFieldVisiblyInvalid\` is fal
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={false}
data-strengthMessages={Object {}}
data-value="password"
/>
</div>
`;

exports[`PasswordPane sets showPasswordStrengthMessage as false when \`isFieldValid\` is true 1`] = `
<div
className="auth0-lock-input-block auth0-lock-input-show-password"
>
<div
data-__type="password_input"
data-disabled={false}
data-invalidHint="blankErrorHint"
data-isValid={false}
data-onChange={[Function]}
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={false}
data-strengthMessages={Object {}}
data-value="password"
/>
</div>
`;

exports[`PasswordPane sets showPasswordStrengthMessage as true when \`isFieldValid\` is false 1`] = `
<div
className="auth0-lock-input-block auth0-lock-input-show-password"
>
<div
data-__type="password_input"
data-disabled={false}
data-invalidHint="blankErrorHint"
data-isValid={false}
data-onChange={[Function]}
data-placeholder="placeholder"
data-policy="policy"
data-showPassword="showPassword"
data-showPasswordStrengthMessage={true}
data-strengthMessages={Object {}}
data-value="password"
/>
Expand Down
13 changes: 13 additions & 0 deletions src/__tests__/field/password_pane.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe('PasswordPane', () => {
jest.resetModules();

jest.mock('field/index', () => ({
isFieldValid: () => true,
getFieldValue: (m, field) => field,
isFieldVisiblyInvalid: () => true
}));
Expand Down Expand Up @@ -60,6 +61,18 @@ describe('PasswordPane', () => {

expectComponent(<PasswordPane {...defaultProps} />).toMatchSnapshot();
});
it('sets showPasswordStrengthMessage as true when `isFieldValid` is false', () => {
require('field/index').isFieldValid = () => false;
let PasswordPane = getComponent();

expectComponent(<PasswordPane {...defaultProps} />).toMatchSnapshot();
});
it('sets showPasswordStrengthMessage as false when `isFieldValid` is true', () => {
require('field/index').isFieldValid = () => true;
let PasswordPane = getComponent();

expectComponent(<PasswordPane {...defaultProps} />).toMatchSnapshot();
});
it('sets isValid as true when `isFieldVisiblyInvalid` is false', () => {
require('field/index').isFieldVisiblyInvalid = () => false;
let PasswordPane = getComponent();
Expand Down
1 change: 1 addition & 0 deletions src/field/password/password_pane.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default class PasswordPane extends React.Component {
<PasswordInput
value={c.getFieldValue(lock, 'password')}
invalidHint={i18n.str('blankErrorHint')}
showPasswordStrengthMessage={!c.isFieldValid(lock, 'password')}
isValid={!c.isFieldVisiblyInvalid(lock, 'password')}
onChange={this.handleChange}
placeholder={placeholder}
Expand Down
4 changes: 3 additions & 1 deletion src/ui/input/password_input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export const icon =
export default class PasswordInput extends React.Component {
static propTypes = {
invalidHint: PropTypes.string.isRequired,
showPasswordStrengthMessage: PropTypes.bool.isRequired,
isValid: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
Expand All @@ -34,6 +35,7 @@ export default class PasswordInput extends React.Component {
render() {
const {
invalidHint,
showPasswordStrengthMessage,
isValid,
onChange,
policy,
Expand All @@ -46,7 +48,7 @@ export default class PasswordInput extends React.Component {
const { focused, changing } = this.state;

const passwordStrength =
policy && focused && changing ? (
policy && focused && changing && showPasswordStrengthMessage ? (
<PasswordStrength messages={strengthMessages} password={value} policy={policy} />
) : null;

Expand Down