Skip to content
This repository has been archived by the owner on Nov 17, 2023. It is now read-only.

fix(onboarding-pass-validation): added password validation #424

Merged
merged 7 commits into from Jun 28, 2018
Merged

fix(onboarding-pass-validation): added password validation #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
902da0a
fix(onboarding-pass-validation): users are not allowed to proceed if …
odb366 Jun 15, 2018
4662417
Merge branch 'master' into fix/onboarding-pass-validation
odb366 Jun 25, 2018
d59c339
fix(onboarding-pass-validation): fixed prettier issue
odb366 Jun 25, 2018
d90c3a1
fix(onboarding-pass-validation): fixed prettier issue2
odb366 Jun 25, 2018
c22104d
fix(onboarding-pass-validation): add 8 char inline validation
odb366 Jun 27, 2018
9240c9b
fix(onboarding-pass-validation): update local repo
odb366 Jun 27, 2018
1ef2c96
fix(onboarding-pass-validation): improve password validation
odb366 Jun 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 9 additions & 3 deletions app/components/Onboarding/NewWalletPassword.js
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@ const NewWalletPassword = ({
createWalletPassword,
createWalletPasswordConfirmation,
showCreateWalletPasswordConfirmationError,
passwordMinCharsError,
updateCreateWalletPassword,
updateCreateWalletPasswordConfirmation
}) => (
Expand All @@ -14,7 +15,8 @@ const NewWalletPassword = ({
<input
type="password"
placeholder="Password"
className={styles.password}
className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error}
${passwordMinCharsError && styles.error}`}
value={createWalletPassword}
onChange={event => updateCreateWalletPassword(event.target.value)}
/>
Expand All @@ -24,8 +26,8 @@ const NewWalletPassword = ({
<input
type="password"
placeholder="Confirm Password"
className={`${styles.password} ${showCreateWalletPasswordConfirmationError &&
styles.error}`}
className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error}
${passwordMinCharsError && styles.error}`}
value={createWalletPasswordConfirmation}
onChange={event => updateCreateWalletPasswordConfirmation(event.target.value)}
/>
Expand All @@ -35,6 +37,9 @@ const NewWalletPassword = ({
>
Passwords do not match
</p>
<p className={`${styles.helpMessage} ${passwordMinCharsError && styles.red}`}>
Password must be at least 8 characters long
</p>
</section>
</div>
)
Expand All @@ -43,6 +48,7 @@ NewWalletPassword.propTypes = {
createWalletPassword: PropTypes.string.isRequired,
createWalletPasswordConfirmation: PropTypes.string.isRequired,
showCreateWalletPasswordConfirmationError: PropTypes.bool.isRequired,
passwordMinCharsError: PropTypes.bool.isRequired,
updateCreateWalletPassword: PropTypes.func.isRequired,
updateCreateWalletPasswordConfirmation: PropTypes.func.isRequired
}
Expand Down
13 changes: 12 additions & 1 deletion app/components/Onboarding/NewWalletPassword.scss
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@
.password {
background: transparent;
outline: none;
border:1px solid #404040;
border: 1px solid #404040;
border-radius: 4px;
padding: 15px;
color: $gold;
Expand Down Expand Up @@ -35,3 +35,14 @@
visibility: visible;
}
}

.helpMessage {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

currently we highlight the bottom border of the input that isn;t correct and make the border $red. we also make the error text $red. can you make those style changes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we use input field with all borders making just the bottom one red will look strange. I haven't seen this pattern in sites/apps, so in my opinion it will not be consistent in usability point of view. I've made all borders and error text to get $red when error occurs. Is that Ok?

color: white;
opacity: 0.87;
padding-top: 10px;
font-size: 14px;

&.red {
color: $red;
}
}
4 changes: 4 additions & 0 deletions app/components/Onboarding/Onboarding.js
View file
Open in desktop
Expand Up @@ -127,6 +127,10 @@ const Onboarding = ({
if (newWalletPasswordProps.showCreateWalletPasswordConfirmationError) {
return
}
// if the password is less than 8 characters dont allow users to proceed
if (newWalletPasswordProps.passwordMinCharsError) {
return
}

changeStep(5)
}}
Expand Down
2 changes: 2 additions & 0 deletions app/containers/Root.js
View file
Open in desktop
Expand Up @@ -69,6 +69,7 @@ const mapStateToProps = state => ({

syncPercentage: lndSelectors.syncPercentage(state),
passwordIsValid: onboardingSelectors.passwordIsValid(state),
passwordMinCharsError: onboardingSelectors.passwordMinCharsError(state),
showCreateWalletPasswordConfirmationError: onboardingSelectors.showCreateWalletPasswordConfirmationError(
state
),
Expand Down Expand Up @@ -142,6 +143,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
createWalletPassword: stateProps.onboarding.createWalletPassword,
createWalletPasswordConfirmation: stateProps.onboarding.createWalletPasswordConfirmation,
showCreateWalletPasswordConfirmationError: stateProps.showCreateWalletPasswordConfirmationError,
passwordMinCharsError: stateProps.passwordMinCharsError,
updateCreateWalletPassword: dispatchProps.updateCreateWalletPassword,
updateCreateWalletPasswordConfirmation: dispatchProps.updateCreateWalletPasswordConfirmation
}
Expand Down
8 changes: 7 additions & 1 deletion app/reducers/onboarding.js
View file
Open in desktop
Expand Up @@ -331,10 +331,16 @@ onboardingSelectors.passwordIsValid = createSelector(
password => password.length >= 8
)

onboardingSelectors.passwordMinCharsError = createSelector(
createWalletPasswordSelector,
createWalletPasswordConfirmationSelector,
(pass1, pass2) => pass1 === pass2 && pass1.length < 8 && pass1.length > 0
)

onboardingSelectors.showCreateWalletPasswordConfirmationError = createSelector(
createWalletPasswordSelector,
createWalletPasswordConfirmationSelector,
(pass1, pass2) => pass1 !== pass2 && pass2.length > 0
(pass1, pass2) => pass1 !== pass2 && pass2.length >= pass1.length
)

onboardingSelectors.showAezeedPasswordConfirmationError = createSelector(
Expand Down