Cleanup ChangePassword component

components/settings/password/create.js

@@ -59,11 +59,7 @@ export default class CreatePassword extends Component {
   }
 
   handleConfirmationInput = (passwordConfirmation) => {
-    const { password } = this.state
-    this.setState({
-      passwordConfirmation,
-      isPasswordsMatch: passwordConfirmation === password
-    })
+    this.setState({ passwordConfirmation })
   }
 
   render () {

components/settings/password/update.js

-
 import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity} from 'react-native'
+import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
-import { shared } from '../../../i18n/en/labels'
-import { settings as labels } from '../../../i18n/en/settings'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+import { settings } from '../../../i18n/en/settings'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import PasswordField from './password-field'
 import SettingsButton from './settings-button'
@@ -19,10 +14,11 @@ export default class ChangePassword extends Component {
   constructor() {
     super()
     this.state = {
-      enteringCurrentPassword: false,
       currentPassword: null,
-      enteringNewPassword: false,
-      newPassword: null
+      newPassword: null,
+      newPasswordConfirmation: null,
+      enteringCurrentPassword: false,
+      enteringNewPassword: false
     }
 
     nodejs.channel.addListener(
@@ -55,9 +51,9 @@ export default class ChangePassword extends Component {
 
     if (passwordCorrect) {
       this.setState({
-        enteringCurrentPassword: false,
         currentPassword: null,
-        enteringNewPassword: true
+        enteringNewPassword: true,
+        enteringCurrentPassword: false
       })
     }
   }
@@ -68,61 +64,77 @@ export default class ChangePassword extends Component {
     })
   }
 
+  handleCurrentPasswordInput = (currentPassword) => {
+    this.setState({ currentPassword })
+  }
+
+  checkCurrentPassword = () => {
+    requestHash('pre-change-pw-check', this.state.currentPassword)
+  }
+
+  handleNewPasswordInput = (newPassword) => {
+    this.setState({ newPassword })
+  }
+
+  changePassword = () => {
+    requestHash('change-pw', this.state.newPassword)
+  }
+
   render() {
-    return (
-      <View>
-        {!this.state.enteringCurrentPassword &&
-         !this.state.enteringNewPassword &&
-         <SettingsButton
-           onPress={this.startChangingPassword}
-           disabled={this.state.currentPassword}
-         >
-           {labels.passwordSettings.changePassword}
-         </SettingsButton>
-        }
-
-        {this.state.enteringCurrentPassword &&
-          <View>
-            <PasswordField
-              onChangeText={val => {
-                this.setState({
-                  currentPassword: val,
-                  wrongPassword: false
-                })
-              }}
-              value={this.state.currentPassword}
-              placeholder={labels.passwordSettings.enterCurrent}
-            />
-            <SettingsButton
-              onPress={() => requestHash('pre-change-pw-check', this.state.currentPassword)}
-              disabled={!this.state.currentPassword}
-            >
-              {shared.unlock}
-            </SettingsButton>
-          </View>
-        }
-
-        {this.state.enteringNewPassword &&
+
+    const {
+      enteringCurrentPassword,
+      enteringNewPassword,
+      currentPassword,
+      newPassword
+    } = this.state
+
+    const labels = settings.passwordSettings
+
+    if (enteringCurrentPassword) {
+      return (
+        <View>
+          <PasswordField
+            placeholder={labels.enterCurrent}
+            value={currentPassword}
+            onChangeText={this.handleCurrentPasswordInput}
+          />
+          <SettingsButton
+            onPress={this.checkCurrentPassword}
+            disabled={!currentPassword}
+          >
+            {sharedLabels.unlock}
+          </SettingsButton>
+        </View>
+      )
+    }
+
+    if (enteringNewPassword) {
+      return (
         <View>
           <PasswordField
-            style={styles.passwordField}
-            onChangeText={val => {
-              this.setState({
-                newPassword: val
-              })
-            }}
-            value={this.state.changedPassword}
-            placeholder={labels.passwordSettings.enterNew}
+            placeholder={labels.enterNew}
+            value={newPassword}
+            onChangeText={this.handleNewPasswordInput}
           />
           <SettingsButton
-            onPress={() => requestHash('change-pw', this.state.newPassword)}
-            disabled={ !this.state.newPassword }
+            onPress={this.changePassword}
+            disabled={!newPassword}
           >
-            {labels.passwordSettings.changePassword}
+            {labels.changePassword}
           </SettingsButton>
         </View>
-        }
+      )
+    }
 
+    return (
+      <View>
+        <SettingsButton
+          onPress={this.startChangingPassword}
+          disabled={currentPassword}
+        >
+          {labels.changePassword}
+        </SettingsButton>
       </View>
     )
   }