Merge branch 'settings-editing-password-confirmation' into 'master'

Settings editing password confirmation

Closes #256

See merge request bloodyhealth/drip!125

components/settings/password/create.js

@@ -1,59 +1,15 @@
 import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import nodejs from 'nodejs-mobile-react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
+import { View } from 'react-native'
 import { settings } from '../../../i18n/en/settings'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
-import PasswordField from './password-field'
+import EnterNewPassword from './enter-new-password'
+import SettingsButton from './settings-button'
 import showBackUpReminder from './show-backup-reminder'
 
-const SettingsButton = ({ children, ...props }) => {
-  return (
-    <TouchableOpacity
-      style={[
-        styles.settingsButton,
-        props.disabled ? styles.settingsButtonDisabled : null
-      ]}
-      { ...props }
-    >
-      <AppText style={styles.settingsButtonText}>
-        {children}
-      </AppText>
-    </TouchableOpacity>
-  )
-}
-
 export default class CreatePassword extends Component {
   constructor() {
     super()
     this.state = {
-      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
-      })
+      isSettingPassword: false
     }
   }
 
@@ -66,35 +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) => {
-    const { password } = this.state
-    this.setState({
-      passwordConfirmation,
-      isPasswordsMatch: passwordConfirmation === password
-    })
-  }
-
   render () {
     const {
-      isSettingPassword,
-      password,
-      passwordConfirmation,
-      shouldShowErrorMessage,
+      isSettingPassword
     } = this.state
     const labels = settings.passwordSettings
 
-    const isSaveButtonDisabled =
-      !password.length ||
-      !passwordConfirmation.length
-
     if (!isSettingPassword) {
       return (
         <View>
@@ -104,33 +37,7 @@ export default class CreatePassword extends Component {
         </View>
       )
     } else {
-      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>
-      )
+      return <EnterNewPassword />
     }
 
   }

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/settings-button.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { TouchableOpacity } from 'react-native'
+import AppText from '../../app-text'
+import styles from '../../../styles'
+
+const SettingsButton = ({ children, ...props }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.settingsButton,
+        props.disabled ? styles.settingsButtonDisabled : null
+      ]}
+      { ...props }
+    >
+      <AppText style={styles.settingsButtonText}>
+        {children}
+      </AppText>
+    </TouchableOpacity>
+  )
+}
+
+SettingsButton.propTypes = {
+  onPress: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+}
+
+export default SettingsButton

components/settings/password/update.js

@@ -1,26 +1,23 @@
-
 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 { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+import { settings } from '../../../i18n/en/settings'
+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'
 import checkCurrentPassword from './check-current-password'
 
+
 export default class ChangePassword extends Component {
   constructor() {
     super()
     this.state = {
-      enteringCurrentPassword: false,
       currentPassword: null,
-      enteringNewPassword: false,
-      newPassword: null
+      enteringCurrentPassword: false,
+      enteringNewPassword: false
     }
 
     nodejs.channel.addListener(
@@ -28,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 => {
@@ -53,77 +43,67 @@ export default class ChangePassword extends Component {
 
     if (passwordCorrect) {
       this.setState({
-        enteringCurrentPassword: false,
         currentPassword: null,
-        enteringNewPassword: true
+        enteringNewPassword: true,
+        enteringCurrentPassword: false
       })
     }
   }
 
+  startChangingPassword = () => {
+    showBackUpReminder(() => {
+      this.setState({ enteringCurrentPassword: true })
+    })
+  }
+
+  handleCurrentPasswordInput = (currentPassword) => {
+    this.setState({ currentPassword })
+  }
+
+  checkCurrentPassword = () => {
+    requestHash('pre-change-pw-check', this.state.currentPassword)
+  }
+
   render() {
-    return (
-      <View>
-        {!this.state.enteringCurrentPassword &&
-         !this.state.enteringNewPassword &&
-          <TouchableOpacity
-            onPress={() => showBackUpReminder(() => {
-              this.setState({ enteringCurrentPassword: true })
-            })}
-            disabled={this.state.currentPassword}
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.passwordSettings.changePassword}
-            </AppText>
-          </TouchableOpacity>
-        }
 
-        {this.state.enteringCurrentPassword &&
-          <View>
-            <PasswordField
-              onChangeText={val => {
-                this.setState({
-                  currentPassword: val,
-                  wrongPassword: false
-                })
-              }}
-              value={this.state.currentPassword}
-              placeholder={labels.passwordSettings.enterCurrent}
-            />
-            <TouchableOpacity
-              onPress={() => requestHash('pre-change-pw-check', this.state.currentPassword)}
-              disabled={!this.state.currentPassword}
-              style={styles.settingsButton}>
-              <AppText style={styles.settingsButtonText}>
-                {shared.unlock}
-              </AppText>
-            </TouchableOpacity>
-          </View>
-        }
+    const {
+      enteringCurrentPassword,
+      enteringNewPassword,
+      currentPassword
+    } = this.state
 
-        {this.state.enteringNewPassword &&
+    const labels = settings.passwordSettings
+
+    if (enteringCurrentPassword) {
+      return (
         <View>
           <PasswordField
-            style={styles.passwordField}
-            onChangeText={val => {
-              this.setState({
-                newPassword: val
-              })
-            }}
-            value={this.state.changedPassword}
-            placeholder={labels.passwordSettings.enterNew}
+            placeholder={labels.enterCurrent}
+            value={currentPassword}
+            onChangeText={this.handleCurrentPasswordInput}
           />
-
-          <TouchableOpacity
-            onPress={() => requestHash('change-pw', this.state.newPassword)}
-            disabled={ !this.state.newPassword }
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.passwordSettings.changePassword}
-            </AppText>
-          </TouchableOpacity>
+          <SettingsButton
+            onPress={this.checkCurrentPassword}
+            disabled={!currentPassword}
+          >
+            {sharedLabels.unlock}
+          </SettingsButton>
         </View>
-        }
+      )
+    }
 
+    if (enteringNewPassword) {
+      return <EnterNewPassword />
+    }
+
+    return (
+      <View>
+        <SettingsButton
+          onPress={this.startChangingPassword}
+          disabled={currentPassword}
+        >
+          {labels.changePassword}
+        </SettingsButton>
       </View>
     )
   }

package.json

@@ -27,6 +27,7 @@
     "nodejs-mobile-react-native": "^0.3.0",
     "object-path": "^0.11.4",
     "obv": "0.0.1",
+    "prop-types": "^15.6.2",
     "react": "16.4.1",
     "react-native": "~0.56.0",
     "react-native-calendars": "^1.19.3",