Browse Source

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

* fix(onboarding-pass-validation): users are not allowed to proceed if pass < 8 char

* fix(onboarding-pass-validation): fixed prettier issue

* fix(onboarding-pass-validation): fixed prettier issue2

* fix(onboarding-pass-validation): add 8 char inline validation

* fix(onboarding-pass-validation): improve password validation
renovate/lint-staged-8.x
Kristiyan Lukanov 7 years ago
committed by Ben Woosley
parent
commit
58e34e2299
  1. 12
      app/components/Onboarding/NewWalletPassword.js
  2. 13
      app/components/Onboarding/NewWalletPassword.scss
  3. 4
      app/components/Onboarding/Onboarding.js
  4. 2
      app/containers/Root.js
  5. 8
      app/reducers/onboarding.js

12
app/components/Onboarding/NewWalletPassword.js

@ -6,6 +6,7 @@ const NewWalletPassword = ({
createWalletPassword,
createWalletPasswordConfirmation,
showCreateWalletPasswordConfirmationError,
passwordMinCharsError,
updateCreateWalletPassword,
updateCreateWalletPasswordConfirmation
}) => (
@ -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)}
/>
@ -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)}
/>
@ -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>
)
@ -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
}

13
app/components/Onboarding/NewWalletPassword.scss

@ -7,7 +7,7 @@
.password {
background: transparent;
outline: none;
border:1px solid #404040;
border: 1px solid #404040;
border-radius: 4px;
padding: 15px;
color: $gold;
@ -35,3 +35,14 @@
visibility: visible;
}
}
.helpMessage {
color: white;
opacity: 0.87;
padding-top: 10px;
font-size: 14px;
&.red {
color: $red;
}
}

4
app/components/Onboarding/Onboarding.js

@ -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)
}}

2
app/containers/Root.js

@ -69,6 +69,7 @@ const mapStateToProps = state => ({
syncPercentage: lndSelectors.syncPercentage(state),
passwordIsValid: onboardingSelectors.passwordIsValid(state),
passwordMinCharsError: onboardingSelectors.passwordMinCharsError(state),
showCreateWalletPasswordConfirmationError: onboardingSelectors.showCreateWalletPasswordConfirmationError(
state
),
@ -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
}

8
app/reducers/onboarding.js

@ -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(

Loading…
Cancel
Save