Adds new reusable component for confirmation with password

components/settings/data-management/confirm-with-password.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+import { View, Alert } from 'react-native'
+
+import nodejs from 'nodejs-mobile-react-native'
+import { requestHash, openDb } from '../../../db'
+
+import PasswordField from '../password/password-field'
+import SettingsButton from '../settings-button'
+
+import settings from '../../../i18n/en/settings'
+import { shared } from '../../../i18n/en/labels'
+
+export default class ConfirmWithPassword extends Component {
+  constructor() {
+    super()
+    this.state = {
+      password: null
+    }
+    nodejs.channel.addListener(
+      'password-check',
+      this.checkPassword,
+      this
+    )
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('password-check', this.checkPassword)
+  }
+
+  resetPasswordInput = () => {
+    this.setState({ password: null })
+  }
+
+
+  onIncorrectPassword = () => {
+    Alert.alert(
+      shared.incorrectPassword,
+      shared.incorrectPasswordMessage,
+      [{
+        text: shared.cancel,
+        onPress: this.props.onCancel
+      }, {
+        text: shared.tryAgain,
+        onPress: this.resetPasswordInput
+      }]
+    )
+  }
+
+  checkPassword = async hash => {
+    try {
+      await openDb(hash)
+      this.props.onSuccess()
+    } catch (err) {
+      this.onIncorrectPassword()
+    }
+  }
+
+  handlePasswordInput = (password) => {
+    this.setState({ password })
+  }
+
+  initPasswordCheck = () => {
+    requestHash('password-check', this.state.password)
+  }
+
+  render() {
+
+    const { password } = this.state
+    const labels = settings.passwordSettings
+
+    return (
+      <View>
+        <PasswordField
+          placeholder={labels.enterCurrent}
+          value={password}
+          onChangeText={this.handlePasswordInput}
+        />
+        <SettingsButton
+          onPress={this.initPasswordCheck}
+          disabled={!password}
+        >
+          {settings.deleteSegment.title}
+        </SettingsButton>
+      </View>
+    )
+
+  }
+}

components/settings/data-management/delete-data-dialog.js

@@ -1,19 +0,0 @@
-import { Alert } from 'react-native'
-import { shared as sharedLabels } from '../../../i18n/en/labels'
-import labels from '../../../i18n/en/settings'
-
-export default function showDeleteDialog(okHandler) {
-
-  const { question, message, confirmation } = labels.deleteSegment
-
-  Alert.alert(
-    question,
-    message,
-    [{
-      text: confirmation,
-      onPress: okHandler
-    }, {
-      text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
-    }]
-  )
-}

components/settings/data-management/delete-data.js

@@ -1,63 +1,50 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
-import nodejs from 'nodejs-mobile-react-native'
 import RNFS from 'react-native-fs'
+import { Alert } from 'react-native'
 
-import settings from '../../../i18n/en/settings'
+import { clearDb } from '../../../db'
-import { requestHash, clearDb } from '../../../db'
 import { hasEncryptionObservable } from '../../../local-storage'
-import PasswordField from '../password/password-field'
 import SettingsButton from '../settings-button'
-import showDeleteDialog from './delete-data-dialog'
+import ConfirmWithPassword from './confirm-with-password'
-import checkCurrentPassword from '../password/check-current-password'
 import alertError from '../alert-error'
 
+import settings from '../../../i18n/en/settings'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
 
 export default class DeleteData extends Component {
   constructor() {
     super()
     this.state = {
       isPasswordSet: hasEncryptionObservable.value,
-      currentPassword: null,
+      isConfirmingWithPassword: false
-      enteringCurrentPassword: false
     }
+  }
 
-    nodejs.channel.addListener(
+  onAlertConfirmation = () => {
-      'pre-change-pw-check',
+    if (this.state.isPasswordSet) {
-      this.openNewPasswordField,
+      this.setState({ isConfirmingWithPassword: true })
-      this
+    } else {
+      this.deleteAppData()
+    }
+  }
+
+  alertBeforeDeletion = () => {
+    const { question, message, confirmation } = settings.deleteSegment
+
+    Alert.alert(
+      question,
+      message,
+      [{
+        text: confirmation,
+        onPress: this.onAlertConfirmation
+      }, {
+        text: sharedLabels.cancel,
+        style: 'cancel',
+        onPress: this.cancelConfirmationWithPassword
+      }]
     )
   }
 
-  componentWillUnmount() {
-    nodejs.channel.removeListener('pre-change-pw-check', this.openNewPasswordField)
-  }
-
-  openNewPasswordField = async hash => {
-    const passwordCorrect = await checkCurrentPassword({
-      hash,
-      onTryAgain: () => this.setState({ currentPassword: null }),
-      onCancel: () => this.setState({
-        enteringCurrentPassword: false,
-        currentPassword: null
-      })
-    })
-
-    if (passwordCorrect) {
-      await this.deleteAppData()
-    }
-  }
-
-  startDataDeletion = () => {
-    showDeleteDialog(() => {
-      if (this.state.isPasswordSet) {
-        this.setState({ enteringCurrentPassword: true })
-      } else {
-        this.deleteAppData()
-      }
-    })
-  }
-
   deleteExportedFile = async () => {
     const path = RNFS.DocumentDirectoryPath + '/data.csv'
     const isFileExist = await RNFS.exists(path)
@@ -77,50 +64,26 @@ export default class DeleteData extends Component {
     }
   }
 
-  handleCurrentPasswordInput = (currentPassword) => {
+  cancelConfirmationWithPassword = () => {
-    this.setState({ currentPassword })
+    this.setState({ isConfirmingWithPassword: false })
-  }
-
-  checkCurrentPassword = () => {
-    requestHash('pre-change-pw-check', this.state.currentPassword)
   }
 
   render() {
+    const { isConfirmingWithPassword } = this.state
 
-    const {
+    if (isConfirmingWithPassword) {
-      enteringCurrentPassword,
-      currentPassword
-    } = this.state
-
-    const labels = settings.passwordSettings
-
-    if (enteringCurrentPassword) {
       return (
-        <View>
+        <ConfirmWithPassword
-          <PasswordField
+          onSuccess={this.deleteAppData}
-            placeholder={labels.enterCurrent}
+          onCancel={this.cancelConfirmationWithPassword}
-            value={currentPassword}
+        />
-            onChangeText={this.handleCurrentPasswordInput}
-          />
-          <SettingsButton
-            onPress={this.checkCurrentPassword}
-            disabled={!currentPassword}
-          >
-            {settings.deleteSegment.title}
-          </SettingsButton>
-        </View>
       )
     }
 
     return (
-      <View>
+      <SettingsButton onPress={this.alertBeforeDeletion}>
-        <SettingsButton
+        {settings.deleteSegment.title}
-          onPress={this.startDataDeletion}
+      </SettingsButton>
-          disabled={currentPassword}
-        >
-          {settings.deleteSegment.title}
-        </SettingsButton>
-      </View>
     )
   }
 }