fix(aezeed): make aezeedPassword component stateless

app/components/Onboarding/NewAezeedPassword.js

@@ -2,17 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './NewAezeedPassword.scss'
 
-class NewAezeedPassword extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { confirmPassword: '' }
-  }
-
-  render() {
-    const { aezeedPassword, updateAezeedPassword } = this.props
-    const { confirmPassword } = this.state
-
-    return (
+const NewAezeedPassword = ({
+  aezeedPassword,
+  aezeedPasswordConfirmation,
+  showAezeedPasswordConfirmationError,
+  updateAezeedPassword,
+  updateAezeedPasswordConfirmation
+}) => (
   <div className={styles.container}>
     <section className={styles.input}>
       <input
@@ -28,19 +24,21 @@ class NewAezeedPassword extends React.Component {
       <input
         type='password'
         placeholder='Confirm Password'
-            className={styles.password}
-            value={confirmPassword}
-            onChange={event => this.setState({ confirmPassword: event.target.value })}
+        className={`${styles.password} ${showAezeedPasswordConfirmationError && styles.error}`}
+        value={aezeedPasswordConfirmation}
+        onChange={event => updateAezeedPasswordConfirmation(event.target.value)}
       />
+      <p className={`${styles.errorMessage} ${showAezeedPasswordConfirmationError && styles.visible}`}>Passwords do not match</p>
     </section>
   </div>
 )
-  }
-}
 
 NewAezeedPassword.propTypes = {
   aezeedPassword: PropTypes.string.isRequired,
-  updateAezeedPassword: PropTypes.func.isRequired
+  aezeedPasswordConfirmation: PropTypes.string.isRequired,
+  showAezeedPasswordConfirmationError: PropTypes.bool.isRequired,
+  updateAezeedPassword: PropTypes.func.isRequired,
+  updateAezeedPasswordConfirmation: PropTypes.func.isRequired
 }
 
 export default NewAezeedPassword

app/components/Onboarding/NewAezeedPassword.scss

@@ -22,3 +22,14 @@
   text-shadow: none;
   -webkit-text-fill-color: initial;
 }
+
+.errorMessage {
+  color: $red;
+  margin-top: 10px;
+  font-size: 10px;
+  visibility: hidden;
+
+  &.visible {
+    visibility: visible;
+  }
+}

app/containers/Root.js

@@ -17,6 +17,7 @@ import {
   updateCreateWalletPassword,
   updateCreateWalletPasswordConfirmation,
   updateAezeedPassword,
+  updateAezeedPasswordConfirmation,
   submitNewWallet,
   onboardingSelectors,
   unlockWallet,
@@ -33,6 +34,7 @@ const mapDispatchToProps = {
   updateCreateWalletPassword,
   updateCreateWalletPasswordConfirmation,
   updateAezeedPassword,
+  updateAezeedPasswordConfirmation,
   setAutopilot,
   changeStep,
   startLnd,
@@ -53,6 +55,7 @@ const mapStateToProps = state => ({
   syncPercentage: lndSelectors.syncPercentage(state),
   passwordIsValid: onboardingSelectors.passwordIsValid(state),
   showCreateWalletPasswordConfirmationError: onboardingSelectors.showCreateWalletPasswordConfirmationError(state),
+  showAezeedPasswordConfirmationError: onboardingSelectors.showAezeedPasswordConfirmationError(state),
   reEnterSeedChecker: onboardingSelectors.reEnterSeedChecker(state)
 })
 
@@ -109,7 +112,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const newAezeedPasswordProps = {
     aezeedPassword: stateProps.onboarding.aezeedPassword,
-    updateAezeedPassword: dispatchProps.updateAezeedPassword
+    aezeedPasswordConfirmation: stateProps.onboarding.updateAezeedPasswordConfirmation,
+    showAezeedPasswordConfirmationError: stateProps.showAezeedPasswordConfirmationError,
+    updateAezeedPassword: dispatchProps.updateAezeedPassword,
+    updateAezeedPasswordConfirmation: dispatchProps.updateAezeedPasswordConfirmation
   }
 
   const reEnterSeedProps = {

app/reducers/onboarding.js

@@ -9,6 +9,7 @@ export const UPDATE_PASSWORD = 'UPDATE_PASSWORD'
 export const UPDATE_CREATE_WALLET_PASSWORD = 'UPDATE_CREATE_WALLET_PASSWORD'
 export const UPDATE_CREATE_WALLET_PASSWORD_CONFIRMATION = 'UPDATE_CREATE_WALLET_PASSWORD_CONFIRMATION'
 export const UPDATE_AEZEED_PASSWORD = 'UPDATE_AEZEED_PASSWORD'
+export const UPDATE_AEZEED_PASSWORD_CONFIRMATION = 'UPDATE_AEZEED_PASSWORD_CONFIRMATION'
 export const UPDATE_SEED_INPUT = 'UPDATE_SEED_INPUT'
 
 export const CHANGE_STEP = 'CHANGE_STEP'
@@ -71,6 +72,13 @@ export function updateAezeedPassword(aezeedPassword) {
   }
 }
 
+export function updateAezeedPasswordConfirmation(aezeedPasswordConfirmation) {
+  return {
+    type: UPDATE_AEZEED_PASSWORD_CONFIRMATION,
+    aezeedPasswordConfirmation
+  }
+}
+
 export function updateSeedInput(inputSeedObj) {
   return {
     type: UPDATE_SEED_INPUT,
@@ -174,6 +182,7 @@ const ACTION_HANDLERS = {
   [UPDATE_CREATE_WALLET_PASSWORD]: (state, { createWalletPassword }) => ({ ...state, createWalletPassword }),
   [UPDATE_CREATE_WALLET_PASSWORD_CONFIRMATION]: (state, { createWalletPasswordConfirmation }) => ({ ...state, createWalletPasswordConfirmation }),
   [UPDATE_AEZEED_PASSWORD]: (state, { aezeedPassword }) => ({ ...state, aezeedPassword }),
+  [UPDATE_AEZEED_PASSWORD_CONFIRMATION]: (state, { aezeedPasswordConfirmation }) => ({ ...state, aezeedPasswordConfirmation }),
   [UPDATE_SEED_INPUT]: (state, { inputSeedObj }) => ({
     ...state,
     seedInput: Object.assign([], state.seedInput, { [inputSeedObj.index]: inputSeedObj })
@@ -208,6 +217,9 @@ const passwordSelector = state => state.onboarding.password
 const createWalletPasswordSelector = state => state.onboarding.createWalletPassword
 const createWalletPasswordConfirmationSelector = state => state.onboarding.createWalletPasswordConfirmation
 
+const aezeedPasswordSelector = state => state.onboarding.aezeedPassword
+const aezeedPasswordConfirmationSelector = state => state.onboarding.aezeedPasswordConfirmation
+
 const seedSelector = state => state.onboarding.seed
 const seedInputSelector = state => state.onboarding.seedInput
 
@@ -222,6 +234,12 @@ onboardingSelectors.showCreateWalletPasswordConfirmationError = createSelector(
   (pass1, pass2) => pass1 !== pass2 && pass2.length > 0
 )
 
+onboardingSelectors.showAezeedPasswordConfirmationError = createSelector(
+  aezeedPasswordSelector,
+  aezeedPasswordConfirmationSelector,
+  (pass1, pass2) => pass1 !== pass2 && pass2.length > 0
+)
+
 onboardingSelectors.reEnterSeedChecker = createSelector(
   seedSelector,
   seedInputSelector,
@@ -251,6 +269,7 @@ const initialState = {
 
   // seed password. this is optional and used to encrypt the seed
   aezeedPassword: '',
+  aezeedPasswordConfirmation: '',
 
   unlockingWallet: false,
   unlockWalletError: {