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

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 &&
+        className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error} 
-          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
 }

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;
+  }
+}

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

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
   }

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(