Reuse ConfirmWithPassword component in DeletePassword component

components/settings/password/delete.js

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