Pull password settings apart into individual components

components/settings/index.js

@@ -11,7 +11,7 @@ import TempReminderPicker from './temp-reminder-picker'
 import TempSlider from './temp-slider'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
-import PasswordSetting from './password-setting'
+import PasswordSetting from './password'
 
 export default class Settings extends Component {
   constructor(props) {

components/settings/password/check-current-password.js

@@ -0,0 +1,23 @@
+import { Alert } from 'react-native'
+import { openDb } from '../../../db'
+import { shared } from '../../labels'
+
+export default async function checkPassword({hash, onCancel, onTryAgain }) {
+  try {
+    await openDb({ hash, persistConnection: false })
+    return true
+  } catch (err) {
+    Alert.alert(
+      shared.incorrectPassword,
+      shared.incorrectPasswordMessage,
+      [{
+        text: shared.cancel,
+        onPress: onCancel
+      }, {
+        text: shared.tryAgain,
+        onPress: onTryAgain
+      }]
+    )
+    return false
+  }
+}

components/settings/password/create.js

@@ -0,0 +1,61 @@
+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 { settings as labels } from '../../labels'
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import PasswordField from './password-field'
+import showBackUpReminder from './show-backup-reminder'
+
+export default class CreatePassword extends Component {
+  constructor() {
+    super()
+    this.state = {
+      enteringNewPassword: false,
+      newPassword: null
+    }
+    nodejs.channel.addListener(
+      'create-pw-hash',
+      changeEncryptionAndRestartApp,
+      this
+    )
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('create-pw-hash', changeEncryptionAndRestartApp)
+  }
+
+  render () {
+    return (
+      <View>
+        {this.state.enteringNewPassword &&
+          <PasswordField
+            placeholder={labels.passwordSettings.enterNew}
+            value={this.state.newPassword}
+            onChangeText={val => this.setState({newPassword: val})}
+          />
+        }
+        <TouchableOpacity
+          onPress={() => {
+            if (!this.state.enteringNewPassword) {
+              showBackUpReminder(() => {
+                this.setState({ enteringNewPassword: true })
+              })
+            } else {
+              requestHash('create-pw-hash', this.state.newPassword)
+            }
+          }}
+          disabled={this.state.enteringNewPassword && !this.state.newPassword}
+          style={styles.settingsButton}>
+          <AppText style={styles.settingsButtonText}>
+            {labels.passwordSettings.setPassword}
+          </AppText>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}

components/settings/password/delete.js

@@ -0,0 +1,76 @@
+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 { settings as labels } from '../../labels'
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import PasswordField from './password-field'
+import showBackUpReminder from './show-backup-reminder'
+import checkCurrentPassword from './check-current-password'
+
+export default class DeletePassword extends Component {
+  constructor() {
+    super()
+    this.state = {
+      enteringCurrentPassword: false,
+      currentPassword: null
+    }
+
+    nodejs.channel.addListener(
+      'pre-delete-pw-check',
+      this.removeEncryption,
+      this
+    )
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('pre-delete-pw-check', this.removeEncryption)
+  }
+
+  removeEncryption = async hash => {
+    const passwordIsCorrect = await checkCurrentPassword({
+      hash,
+      onTryAgain: () => this.setState({currentPassword: null}),
+      onCancel: () => this.setState({
+        enteringCurrentPassword: false,
+        currentPassword: null
+      })
+    })
+
+    if (passwordIsCorrect) await changeEncryptionAndRestartApp()
+  }
+
+  render() {
+    return (
+      <View>
+        {this.state.enteringCurrentPassword &&
+          <PasswordField
+            onChangeText={val => this.setState({ currentPassword: val })}
+            value={this.state.currentPassword}
+            placeholder={labels.passwordSettings.enterCurrent}
+          />
+        }
+        <TouchableOpacity
+          onPress={() => {
+            if (!this.state.enteringCurrentPassword) {
+              showBackUpReminder(() => {
+                this.setState({ enteringCurrentPassword: true })
+              })
+            } else {
+              requestHash('pre-delete-pw-check', this.state.currentPassword)
+            }
+          }}
+          style={styles.settingsButton}
+        >
+          <AppText style={styles.settingsButtonText}>
+            {labels.passwordSettings.deletePassword}
+          </AppText>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}

components/settings/password/index.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import CreatePassword from './create'
+import ChangePassword from './update'
+import DeletePassword from './delete'
+import { AppText } from '../../app-text'
+import {
+  hasEncryptionObservable
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import { settings as labels } from '../../labels'
+
+export default class PasswordSetting extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showUpdateAndDelete: hasEncryptionObservable.value,
+      showCreate: !hasEncryptionObservable.value
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.settingsSegment}>
+
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.passwordSettings.title}
+        </AppText>
+
+        {this.state.showUpdateAndDelete ?
+          <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
+          :
+          <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
+        }
+
+        {this.state.showUpdateAndDelete &&
+          <View>
+            <ChangePassword/>
+            <DeletePassword/>
+          </View>
+        }
+
+        {this.state.showCreate &&
+          <CreatePassword/>
+        }
+
+      </View>
+    )
+  }
+}

components/settings/password/password-field.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { TextInput } from 'react-native'
+import styles from '../../../styles'
+
+export default function PasswordField(props) {
+  return (
+    <TextInput
+      style={styles.passwordField}
+      autoFocus={true}
+      secureTextEntry={true}
+      onChangeText={props.onChangeText}
+      value={props.value}
+      placeholder={props.placeholder}
+    />
+  )
+}

components/settings/password/show-backup-reminder.js

@@ -0,0 +1,16 @@
+import { Alert } from 'react-native'
+import { settings as labels, shared } from '../../labels'
+
+export default function showBackUpReminder(okHandler) {
+  Alert.alert(
+    labels.passwordSettings.backupReminderTitle,
+    labels.passwordSettings.backupReminder,
+    [{
+      text: shared.cancel,
+      style: 'cancel'
+    }, {
+      text: shared.ok,
+      onPress: okHandler
+    }]
+  )
+}

components/settings/password/update.js

@@ -0,0 +1,129 @@
+
+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 { settings as labels, shared } from '../../labels'
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import PasswordField from './password-field'
+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
+    }
+
+    nodejs.channel.addListener(
+      'pre-change-pw-check',
+      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 => {
+    const passwordCorrect = await checkCurrentPassword({
+      hash,
+      onTryAgain: () => this.setState({ currentPassword: null }),
+      onCancel: () => this.setState({
+        enteringCurrentPassword: false,
+        currentPassword: null
+      })
+    })
+
+    if (passwordCorrect) {
+      this.setState({
+        enteringCurrentPassword: false,
+        currentPassword: null,
+        enteringNewPassword: true
+      })
+    }
+  }
+
+  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>
+        }
+
+        {this.state.enteringNewPassword &&
+        <View>
+          <PasswordField
+            style={styles.passwordField}
+            onChangeText={val => {
+              this.setState({
+                newPassword: val
+              })
+            }}
+            value={this.state.changedPassword}
+            placeholder={labels.passwordSettings.enterNew}
+          />
+
+          <TouchableOpacity
+            onPress={() => requestHash('change-pw', this.state.newPassword)}
+            disabled={ !this.state.newPassword }
+            style={styles.settingsButton}>
+            <AppText style={styles.settingsButtonText}>
+              {labels.passwordSettings.changePassword}
+            </AppText>
+          </TouchableOpacity>
+        </View>
+        }
+
+      </View>
+    )
+  }
+}