Creates reusable password confirmation component

components/settings/password/create.js

@@ -1,43 +1,15 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import nodejs from 'nodejs-mobile-react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
 import { settings } from '../../../i18n/en/settings'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import EnterNewPassword from './enter-new-password'
-import PasswordField from './password-field'
-import showBackUpReminder from './show-backup-reminder'
 import SettingsButton from './settings-button'
-
+import showBackUpReminder from './show-backup-reminder'
-
 
 export default class CreatePassword extends Component {
   constructor() {
     super()
     this.state = {
-      isSettingPassword: false,
+      isSettingPassword: false
-      password: '',
-      passwordConfirmation: '',
-      shouldShowErrorMessage: false,
-    }
-    nodejs.channel.addListener(
-      'create-pw-hash',
-      changeEncryptionAndRestartApp,
-      this
-    )
-  }
-
-  componentWillUnmount() {
-    nodejs.channel.removeListener('create-pw-hash', changeEncryptionAndRestartApp)
-  }
-
-  savePassword = () => {
-    if (this.comparePasswords()) {
-      requestHash('create-pw-hash', this.state.password)
-    } else {
-      this.setState({
-        shouldShowErrorMessage: true
-      })
     }
   }
 
@@ -50,31 +22,12 @@ export default class CreatePassword extends Component {
     showBackUpReminder(this.toggleSettingPassword)
   }
 
-  comparePasswords = () => {
-    return this.state.password === this.state.passwordConfirmation
-  }
-
-  handlePasswordInput = (password) => {
-    this.setState({ password })
-  }
-
-  handleConfirmationInput = (passwordConfirmation) => {
-    this.setState({ passwordConfirmation })
-  }
-
   render () {
     const {
-      isSettingPassword,
+      isSettingPassword
-      password,
-      passwordConfirmation,
-      shouldShowErrorMessage,
     } = this.state
     const labels = settings.passwordSettings
 
-    const isSaveButtonDisabled =
-      !password.length ||
-      !passwordConfirmation.length
-
     if (!isSettingPassword) {
       return (
         <View>
@@ -84,33 +37,7 @@ export default class CreatePassword extends Component {
         </View>
       )
     } else {
-      return (
+      return <EnterNewPassword />
-        <View>
-          <PasswordField
-            placeholder={labels.enterNew}
-            value={password}
-            onChangeText={this.handlePasswordInput}
-          />
-          <PasswordField
-            autoFocus={false}
-            placeholder={labels.confirmPassword}
-            value={passwordConfirmation}
-            onChangeText={this.handleConfirmationInput}
-          />
-          {
-            shouldShowErrorMessage &&
-            <AppText style={styles.errorMessage}>
-              {labels.passwordsDontMatch}
-            </AppText>
-          }
-          <SettingsButton
-            onPress={this.savePassword}
-            disabled={isSaveButtonDisabled}
-          >
-            {labels.savePassword}
-          </SettingsButton>
-        </View>
-      )
     }
 
   }

components/settings/password/enter-new-password.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import nodejs from 'nodejs-mobile-react-native'
+
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import AppText from '../../app-text'
+import PasswordField from './password-field'
+import SettingsButton from './settings-button'
+
+import styles from '../../../styles'
+import { settings } from '../../../i18n/en/settings'
+
+const LISTENER_TYPE = 'create-or-change-pw'
+
+export default class EnterNewPassword extends Component {
+
+  constructor() {
+    super()
+    this.state = {
+      password: '',
+      passwordConfirmation: '',
+      shouldShowErrorMessage: false,
+    }
+    nodejs.channel.addListener(
+      LISTENER_TYPE,
+      changeEncryptionAndRestartApp,
+      this
+    )
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener(LISTENER_TYPE, changeEncryptionAndRestartApp)
+  }
+
+  savePassword = () => {
+    if (this.comparePasswords()) {
+      requestHash(LISTENER_TYPE, this.state.password)
+    } else {
+      this.setState({
+        shouldShowErrorMessage: true
+      })
+    }
+  }
+
+  comparePasswords = () => {
+    return this.state.password === this.state.passwordConfirmation
+  }
+
+  handlePasswordInput = (password) => {
+    this.setState({ password })
+  }
+
+  handleConfirmationInput = (passwordConfirmation) => {
+    this.setState({ passwordConfirmation })
+  }
+
+  render () {
+    const {
+      password,
+      passwordConfirmation,
+      shouldShowErrorMessage,
+    } = this.state
+    const labels = settings.passwordSettings
+
+    const isSaveButtonDisabled =
+      !password.length ||
+      !passwordConfirmation.length
+
+    return (
+      <View>
+        <PasswordField
+          placeholder={labels.enterNew}
+          value={password}
+          onChangeText={this.handlePasswordInput}
+        />
+        <PasswordField
+          autoFocus={false}
+          placeholder={labels.confirmPassword}
+          value={passwordConfirmation}
+          onChangeText={this.handleConfirmationInput}
+        />
+        {
+          shouldShowErrorMessage &&
+          <AppText style={styles.errorMessage}>
+            {labels.passwordsDontMatch}
+          </AppText>
+        }
+        <SettingsButton
+          onPress={this.savePassword}
+          disabled={isSaveButtonDisabled}
+        >
+          {labels.savePassword}
+        </SettingsButton>
+      </View>
+    )
+  }
+}

components/settings/password/update.js

@@ -3,7 +3,8 @@ import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import { settings } from '../../../i18n/en/settings'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import { requestHash } from '../../../db'
+import EnterNewPassword from './enter-new-password'
 import PasswordField from './password-field'
 import SettingsButton from './settings-button'
 import showBackUpReminder from './show-backup-reminder'
@@ -15,8 +16,6 @@ export default class ChangePassword extends Component {
     super()
     this.state = {
       currentPassword: null,
-      newPassword: null,
-      newPasswordConfirmation: null,
       enteringCurrentPassword: false,
       enteringNewPassword: false
     }
@@ -26,17 +25,10 @@ export default class ChangePassword extends Component {
       this.openNewPasswordField,
       this
     )
-
-    nodejs.channel.addListener(
-      'change-pw',
-      changeEncryptionAndRestartApp,
-      this
-    )
   }
 
   componentWillUnmount() {
     nodejs.channel.removeListener('pre-change-pw-check', this.openNewPasswordField)
-    nodejs.channel.removeListener('change-pw', changeEncryptionAndRestartApp)
   }
 
   openNewPasswordField = async hash => {
@@ -72,21 +64,12 @@ export default class ChangePassword extends Component {
     requestHash('pre-change-pw-check', this.state.currentPassword)
   }
 
-  handleNewPasswordInput = (newPassword) => {
-    this.setState({ newPassword })
-  }
-
-  changePassword = () => {
-    requestHash('change-pw', this.state.newPassword)
-  }
-
   render() {
 
     const {
       enteringCurrentPassword,
       enteringNewPassword,
-      currentPassword,
+      currentPassword
-      newPassword
     } = this.state
 
     const labels = settings.passwordSettings
@@ -110,21 +93,7 @@ export default class ChangePassword extends Component {
     }
 
     if (enteringNewPassword) {
-      return (
+      return <EnterNewPassword />
-        <View>
-          <PasswordField
-            placeholder={labels.enterNew}
-            value={newPassword}
-            onChangeText={this.handleNewPasswordInput}
-          />
-          <SettingsButton
-            onPress={this.changePassword}
-            disabled={!newPassword}
-          >
-            {labels.changePassword}
-          </SettingsButton>
-        </View>
-      )
     }
 
     return (