From 9893fb4214b20b1b591658b9402a4b70d553a5d3 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 22 Mar 2018 16:19:57 -0500
Subject: [PATCH] fix(aezeed): make aezeedPassword component stateless

---
 .../Onboarding/NewAezeedPassword.js           | 68 +++++++++----------
 .../Onboarding/NewAezeedPassword.scss         | 11 +++
 app/containers/Root.js                        |  8 ++-
 app/reducers/onboarding.js                    | 19 ++++++
 4 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/app/components/Onboarding/NewAezeedPassword.js b/app/components/Onboarding/NewAezeedPassword.js
index 10390738..bf4412f9 100644
--- a/app/components/Onboarding/NewAezeedPassword.js
+++ b/app/components/Onboarding/NewAezeedPassword.js
@@ -2,45 +2,43 @@ 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: '' }
-  }
+const NewAezeedPassword = ({
+  aezeedPassword,
+  aezeedPasswordConfirmation,
+  showAezeedPasswordConfirmationError,
+  updateAezeedPassword,
+  updateAezeedPasswordConfirmation
+}) => (
+  <div className={styles.container}>
+    <section className={styles.input}>
+      <input
+        type='password'
+        placeholder='Password'
+        className={styles.password}
+        value={aezeedPassword}
+        onChange={event => updateAezeedPassword(event.target.value)}
+      />
+    </section>
 
-  render() {
-    const { aezeedPassword, updateAezeedPassword } = this.props
-    const { confirmPassword } = this.state
-
-    return (
-      <div className={styles.container}>
-        <section className={styles.input}>
-          <input
-            type='password'
-            placeholder='Password'
-            className={styles.password}
-            value={aezeedPassword}
-            onChange={event => updateAezeedPassword(event.target.value)}
-          />
-        </section>
-
-        <section className={styles.input}>
-          <input
-            type='password'
-            placeholder='Confirm Password'
-            className={styles.password}
-            value={confirmPassword}
-            onChange={event => this.setState({ confirmPassword: event.target.value })}
-          />
-        </section>
-      </div>
-    )
-  }
-}
+    <section className={styles.input}>
+      <input
+        type='password'
+        placeholder='Confirm Password'
+        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
diff --git a/app/components/Onboarding/NewAezeedPassword.scss b/app/components/Onboarding/NewAezeedPassword.scss
index 1fd5fd6f..66aa30c5 100644
--- a/app/components/Onboarding/NewAezeedPassword.scss
+++ b/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;
+  }
+}
diff --git a/app/containers/Root.js b/app/containers/Root.js
index 6f1bc2b4..dc5de787 100644
--- a/app/containers/Root.js
+++ b/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 = {
diff --git a/app/reducers/onboarding.js b/app/reducers/onboarding.js
index 675d7369..f3a7a442 100644
--- a/app/reducers/onboarding.js
+++ b/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: {